html - 如何修复灯塔“链接没有可识别的名称”

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>但想知道是否有任何适当的解决方案？

对此有什么建议吗？

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>

Answer 2

如果想在 React 应用中实现这一点，我们需要在标签中添加aria-label属性<a>。

前：

<a href={`https://${ this.props.info }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>

后：

<a href={`https://${ this.props.info }`} aria-label={`${ this.props.name }`} target="_blank" rel="noopener noreferrer">
   <i className="fa fa-circle fa-stack-2x"></i>
   <i className={ `fa fa-${ this.props.icon } fa-stack-1x fa-inverse` }></i>
</a>

Answer 3

对于 SlickNav 解决方案非常简单。只需将标题添加到具有 aria-haspopup="true" 和 tabindex="0" 属性的 Javascript 文件的元素。在上述行中添加 title="Anything" 之类的标题。它将解决问题。工作示例是Oceanspace

对于其他类似问题，您必须将 title 属性添加到相应的锚元素