带有 href 的标签未在选项卡上接收键盘焦点答案

【问题标题】：A tag with href not receiving keyboard focus on tab带有 href 的标签未在选项卡上接收键盘焦点
【发布时间】：2021-05-24 16:57:12
【问题描述】：

我正在制作一个带有链接的菜单，结构是 ul > li > 带有 href 的标签，并且链接没有通过菜单获得焦点。据我所知，具有有效 href 的 a 标记的默认行为是在选项卡上接收键盘焦点。这是操作系统/浏览器问题吗？我在 Mac 上运行 Catalina 并在 Chrome 中浏览。

<ul class="collapse" id="footerLinksHelp">
        <li class="footer-links__item">
            <a href="https://help.com" class="footer-links__link" title="Go to Delivery" rel="noopener" target="_blank">Delivery</a>
        </li>
        <li class="footer-links__item">
            <a href="https://help.com" class="footer-links__link" title="Go to Returns" rel="noopener" target="_blank">Returns</a>
        </li>
        <li class="footer-links__item">
            <a href="https://orders.com" class="footer-links__link" title="Check my Order">Check my Order</a>
        </li>
        <li class="footer-links__item">
            <a href="https://terms.com" class="footer-links__link" title="Go to Terms" rel="noopener" target="_blank">Terms &amp; Conditions</a>
        </li>
        <li class="footer-links__item">
            <a href="https://customer-support.com" rel="noopener" target="_blank">Customer
                Support</a>
        </li>
    </ul>

我已经用谷歌搜索并阅读了辅助功能文档，但无法弄清楚为什么 a 标签没有收到任何键盘焦点。这是通过测试确定的可访问性要求。

【问题讨论】：

嗨，娜塔莉，运气好吗？
是的，碰巧，我团队中的其他人已将代码放在引导覆盖文件中，该文件添加了：outline: 0px !important;到一个有焦点的标签，因此显然推翻了默认行为以及我试图在我的文件中应用的任何样式规则。

标签： accessibility keyboard-focus

【解决方案1】：

尝试将tabindex=0 属性添加到您的链接（锚标记）。您的浏览器有时会导致此类问题，但无法从上述 sn-p 确定。

【讨论】：

谢谢。是的，我知道 tabindex="0"，但不认为它是原生可聚焦元素（如标签）所必需的，我之前在 div 或 span 元素上使用过它。正如您所提到的，这可能是由浏览器引起的。