在尝试使用键盘导航时，我试图在字体上加上轮廓，但是它不起作用。我试图按照另一篇文章中的建议添加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元素
这里没有几个要解决的问题：-
一个正的制表符索引会破坏自然的制表顺序，您希望tabindex="0"才能使通常无法聚焦的内容能够接受焦点。在您的示例中也不需要它，因为<a>元素默认是可聚焦的。
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内搜索这些术语以识别问题。