ラベルとラジオボタンをCSSを適切なHTMLにフックとして使用していますか？

Question

CSSの場合、<label />と<input type="radio" />の組み合わせは祝福です。コマンドライン要素は、JavaScriptを必要とせずにDOMを使用して戻ることができ、あらゆる種類の有用なアプリケーションがあります。例：

<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.