【问题标题】: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 中获得焦点
    • 太棒了。为什么他们会跳过浮动的东西似乎没有意义,但很高兴知道问题出在哪里!
    猜你喜欢
    • 1970-01-01
    • 2021-04-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-06-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多