Question

在尝试使用键盘导航时，我试图在字体上加上轮廓，但是它不起作用。我试图按照另一篇文章中的建议添加aria-hidden =“ true” tabindex =“ 1”，但仍然无法正常工作。

<div class="faContainer"> 
<a class="homeAnchor" href="" aria-hidden="true" tabindex="1"> 
<i class="fas fa-home fa-2x"> 
</i> 
</a> 
</div>

CSS

a:focus{
  outline: 3px solid white;
}

也尝试定位i元素

Answer 1

这里没有几个要解决的问题：-

从不使用正选项卡索引

一个正的制表符索引会破坏自然的制表顺序，您希望tabindex="0"才能使通常无法聚焦的内容能够接受焦点。在您的示例中也不需要它，因为<a>元素默认是可聚焦的。

aria-hidden与焦点无关

aria-hidden与可访问性树有关。通过添加此属性，您是在告诉辅助技术（例如屏幕阅读器）忽略此项目。删除它。

您的href=""属性在某些情况下可以忽略，因为它不是有效的超链接。

在测试期间添加href="#"，如果您不知道当前要指向的URL。

如果要用于在当前页面上进行更改，请使用<button>元素，因为这在语义上是正确的（即，它将与JavaScript函数一起使用，而不是作为链接来使用）

上述CSS（深色主题）应该可以正常工作。

在Google Chrome上->打开开发人员工具（F12）->检查元素。

在右上角您将看到Filter :hov .cls +

选择:hov，然后单击:focus复选框。

将通过更具体（例如a:focus）或使用a.homeanchor:focus来覆盖您的!important规则。

该规则可能是outline:0或outline:none，因此您也可以尝试在CSS内搜索这些术语以识别问题。