Question

我正在尝试查看网站的可访问性，并且我注意到在Chrome中通过它们进行选项卡时，某些链接并未突出显示..（白色导航栏中的文本/图像）。我已经尝试为它们添加tab-index但这似乎没有效果。为什么tab键会忽略它们？它适用于Firefox。

是否有任何合理的理由，或者可能是Chrome中的错误

http://www.vawsec.on.ca/womens-place-elgins-emergency-shelter

Answer 1

事实上，Chromium没有标注这些链接。

在Firefox中，它可以工作。但如果关注其中一个链接，则没有样式变化。您可以使用伪类:focus为其添加CSS。通常，将此选择器添加到:hover已有的规则中是有意义的，因此悬停和焦点共享相同的样式。

~~也许（只是一个疯狂的猜测，没有测试）当焦点上应用CSS更改时，Chromium会关注这些链接吗？~~

float似乎是一个问题。我做了一个不可聚焦的链接的最小例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
<title>Focus problem in Chromium</title>
<!-- see http://stackoverflow.com/a/18768563/1591669 -->

<style>
#icon_bar_sub_pages ul li img {float:left;}
#icon_bar_sub_pages ul li span {float:left;}
</style>

</head>

<body>

    <div id="icon_bar_sub_pages"> 
        <ul>
            <li><a href="/24-hour-helpline"><img src="" alt="Phone" width="52" height="56"/><span>1</span></a></li>
            <li><a href="/womens-place-elgins-emergency-shelter"><img src="" alt="House" width="53" height="48" /><span>2</span></a></li>
            <li><a href="/community-based-counselling"><img src="" alt="Chairs" width="79" height="44"/><span>3</span></a></li>
            <li><a href="/prevention-together"><img src="" alt="Apple" width="46" height="49" /><span>4</span></a></li>
            <li><a href="/help-for-children"><img src="" alt="Backpacks" width="69" height="49"/><span>5</span></a></li>
        </ul>
    </div>

</body>
</html>

如果删除/更改img和/或span的浮动，则可以再次关注链接：

#icon_bar_sub_pages ul li img {float:left;}
#icon_bar_sub_pages ul li span {float:left;}

为什么键盘会在Chrome中标记时跳过某些链接？

1 个答案: