html - 使用标签和单选按钮作为 CSS 钩子(Hook)是否适合 HTML？

Question

对于 CSS，<label /> 的组合和 <input type="radio" />是一种祝福 - 它允许通过 DOM 命令返回元素，而不需要 javascript，具有各种有用的应用程序。示例:

<style>
#wrapper {width:300px; height:200px; text-align:center;}
.slide {position:relative; width:300px; height:200px; line-height:200px; border:1px solid black; font-size:3em; color:crimson;}
input {display:none;}
input[name="ito"] + .slide {display:none;}
input[name="ito"]:checked + .slide {display:block;}
.slide label {position:absolute; top:0; color:black;}
.slide label:first-of-type {left:0;}
.slide label:last-of-type {right:0;}
#is:checked ~ [for="is"], #this:checked ~ [for="this"], #ok:checked ~ [for="ok"] {color:crimson;}
</style>

<div id="wrapper">
    <input name="ito" type="radio" id="is" checked>
  <div class="slide">IS
    <label for="ok">«</label><label for="this">»</label>
  </div>
    <input name="ito" type="radio" id="this">
  <div class="slide">THIS
    <label for="is">«</label><label for="ok">»</label>
  </div>
    <input name="ito" type="radio" id="ok">
  <div class="slide">OK?
    <label for="this">«</label><label for="is">»</label>
  </div>
    <label for="is">1</label><label for="this">2</label><label for="ok">3</label>
</div>

https://jsfiddle.net/v6eeqxog/

代码在技术上是有效的 https://html5.validator.nu , 但如何正确使用它？

我的意思是，代码中存在一些明显的困惑程度，但除此之外 - 这是否适合可访问性或其他此类问题？

Answer 1

这似乎无法通过键盘访问。您不能聚焦单选按钮(使用 Tab 键)来切换“幻灯片”(使用箭头键)。它没有这个 CSS 也能工作，因为这样你就可以聚焦单选按钮。

参见 WCAG 2.0 准则 2.1:Keyboard Accessible: Make all functionality available from a keyboard.