如何修复 Lighthouse“链接没有可识别的名称”

Question

灯塔建议 修复我的 href 文本

我有一个这样的 html

 <a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

这里真正发生的是我只是通过使用 css 类在 href 中显示图像：

 .social-icon.twitter {
  background: url('../images/logo-twitter.png') no-repeat center center;
}

我不能做 <a....>Twitter</a> 因为在那种情况下显示的文本会破坏视图。

我想不出其他任何东西，比如在我的 --- 中放置一个 span a 并使其隐藏，例如 <a....><span class="hide">Twitter</span></a> 解决方案？

有什么建议吗？

原文由 sreginogemoh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

出于可访问性原因（屏幕阅读器需要），链接必须包含文本或在 aria-label 属性中具有描述。在许多像您这样的用例中，您不想在链接中添加任何文本，而是将其用作图像或任何图形元素包装器。

通过将 aria-label="Twitter" 添加到您的 a 元素来修复它，例如

<a href="https://twitter.com/@some-name-here" aria-label="Twitter" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

原文由 Binyamin 发布，翻译遵循 CC BY-SA 4.0 许可协议