1

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

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

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

4

1 回答 1

2

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

不过，在 Firefox 中它可以工作。但是，如果这些链接之一被聚焦，则没有样式更改。您可以使用伪类为其添加 CSS :focus。通常将此选择器添加到您已经拥有的规则中是有意义的: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;}
于 2013-09-12T15:35:03.303 回答