html - 如何修复 Lighthouse "Links do not have a discernible name"

Question

灯塔建议fix my a href text

我有一个这样的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>在这种情况下，显示的文本将破坏 View 。

我想不出其他任何东西，比如把 span我的 a 里面有一段文字并将其隐藏，例如 <a....><span class="hide">Twitter</span></a>但不知道是否有任何合适的解决方案？

有什么建议吗？

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>