仅使用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)编辑器\xe2\x80\x99s 草稿不再\xe2\x80\x99 包含此语法/功能。（最新的工作草案仍然如此，但它是 2013-05-02 的\xe2\x80\x99。）

\n\n\n\n

为将来：

\n\n

在选择器级别 4的工作草案中，有一种方法可以指定选择器的主题（分别在 Editor\xe2\x80\x99s Draft 中）。

\n\n

我想当浏览器实现它时，以下内容应该可以工作（并且如果语法不会改变）：

\n\n

!div a:focus\n  {display:block;}\n

\n\n

它选择一个具有焦点元素作为子元素的div元素（请注意选择器中的 ） 。!a

\n\n\n\n

对于 JQuery，有一个 polyfill（但它使用旧语法，其中!用作后缀，而不是前缀）。

\n