为什么在 Chrome 中切换时键盘会跳过某些链接？答案

【问题标题】：Why would keyboard skip certain links while tabbing in Chrome?为什么在 Chrome 中切换时键盘会跳过某些链接？
【发布时间】：2013-09-13 19:52:17
【问题描述】：

我正在尝试查看网站的可访问性，我注意到某些链接在 Chrome 中切换时从未突出显示。（白色导航栏中的文本/图像）。我尝试向它们添加标签索引，但这似乎没有效果。为什么 Tab 键会忽略它们？它适用于 Firefox。

这是否有任何合理的原因，或者它可能是 Chrome 中的错误

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

【问题讨论】：

标签： google-chrome keyboard accessibility

【解决方案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;}

【讨论】：

是的，我已经为焦点设置了样式，但它还没有上线。主页上非常相似的链接 do 在 chromium 中获得焦点
太棒了。为什么他们会跳过浮动的东西似乎没有意义，但很高兴知道问题出在哪里！