cssとhtmlのみを使用した隠しコンテンツのキーボードアクセシビリティ

Question

このスニペットにアクセスするにはどうすればよいですか？

<div tabindex="0"> 
    Show More 
    <ul> 
     <li><a href="#">Hidden Content</a></li> 
     <li><a href="#">Hidden Content</a></li> 
     <li><a href="#">Hidden Content</a></li> 
    </ul> 
</div> 

CSS：

div > ul 
    {display:none;} 
div:hover > ul, div:focus > ul 
    {display:block;} 

上のCSSプロパティを変更し、その内容

http://jsfiddle.net/pJs2U/

Answer 1

アップデート2015（JayMee @おかげで、）：現在（2015年5月29日）Editor’s Draftはもうこの構文/機能を含んでいないjQueryのでは、それは次のようになります。 （最新のワーキングドラフトstill doesが、it’s from 2013-05-02。）将来のために

---

：

Working Draft of Selectors Level 4でセレクタのspecify the subjectへの道があり（それぞれがin the Editor’s Draft。）。

私はブラウザがそれを実装するとき（と構文が変更されない場合）、以下は動作するはず推測：

!div a:focus 
    {display:block;} 

それは集中aを持ってdiv要素を（セレクタで!に気づく）を選択子としての要素。

---

For JQuery, there is a polyfill（それは!が接尾辞ではなく、接頭辞として使用された古い構文を使用しています）。

Answer 2

を中心にキーボードナビゲーション とも見える<ul>を行うことが可能であるならば、私は疑問に思います<ul>子要素にフォーカスがあるときはHTMLとCSSだけではできません。

親セレクタが必要ですが、CSS3は親セレクタfor performance reasonsをサポートしていません。

注：：javascriptソリューションを検討するとよいでしょう。大多数のスクリーンリーダーユーザーhave javascript enabled。

$('a').on('focus blur', function(e) { 
    $(this).parents('ul').toggle(); 
}); 

Answer 3

JavaScriptのソリューションが最適です。あなたは子供を表示する親の焦点に依存することはできません。フォーカスを移動するとすぐに、これは崩壊します。

親からクラスを追加したり削除したりすると、より多くの制御が可能になります。 Dirk Ginaderがアクセシビリティの第5層としてこれを話しました。http://www.slideshare.net/ginader/the-5-layers-of-web-accessibility