html - 仅使用 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;}

我想知道是否可以制作<ul>通过键盘导航也可见同时关注其内容

http://jsfiddle.net/pJs2U/

Answer 1

2015 年更新(感谢，@ JayMee):当前 (2015-05-29) Editor’s Draft不再包含此语法/功能。 (最新的工作草案 still does ，但是 it’s from 2013-05-02 。)

---

对于 future :

在Working Draft of Selectors Level 4有办法specify the subject选择器(resp. in the Editor’s Draft)。

我想当浏览器实现它时，下面的代码应该可以工作(如果语法不会改变的话):

!div a:focus
  {display:block;}

它选择一个 div 元素(注意选择器中的 !)，它有一个聚焦的 a 元素作为子元素。

---

For JQuery, there is a polyfill (但它使用旧语法，其中 ! 用作后缀，而不是前缀)。