7

我怎样才能使这个片段可以访问？

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

4

3 回答 3

4

2015 年更新（感谢 @ JayMee）：当前 (2015-05-29)编辑草稿不再包含此语法/功能。（最新的工作草案仍然如此，但它来自 2013-05-02。）

为未来：

在Selectors Level 4的工作草案中，有一种方法可以指定选择器的主题（分别在 Editor's Draft 中）。

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

!div a:focus
  {display:block;}

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

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

于 2013-04-23T23:05:26.300 回答
1

<ul>仅使用 HTML 和 CSS 无法更改子元素具有焦点时的 CSS 属性。

您所描述的内容需要父选择器，但出于性能原因，CSS3 不支持父选择器。

注意：您可能会考虑使用 javascript 解决方案。绝大多数屏幕阅读器用户都启用了 javascript。在 jQuery 中，它可能看起来像：

$('a').on('focus blur', function(e) {
  $(this).parents('ul').toggle();
});
于 2013-04-23T17:58:09.817 回答
1

javascript解决方案是最好的。您不能依靠父母的焦点来显示孩子。一旦你移动焦点，这就会分崩离析。

从父级添加和删除一个类可以让您拥有更多的控制权。Dirk Ginader 将此称为可访问性的第五层http://www.slideshare.net/ginader/the-5-layers-of-web-accessibility

于 2013-04-24T16:04:02.627 回答