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

【问题标题】：How to fix Lighthouse "Links do not have a discernible name"如何修复灯塔“链接没有可识别的名称”
【发布时间】：2019-01-12 00:06:29
【问题描述】：

灯塔建议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>，因为在这种情况下显示的文本会破坏视图。

我想不出任何其他方法，比如在我的a 中添加一个带有文本的span 并将其隐藏，例如<a....><span class="hide">Twitter</span></a>，但想知道是否有任何合适的解决方案？

对此有什么建议吗？

【问题讨论】：

标签： html css lighthouse

【解决方案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>

【讨论】：

我们可以把它隔开吗？例如“在推特上找到我们？
@Nofel，是的，当然。为aria-label 定义任何值。
谷歌推荐的Lighthouse工具中出现错误，详细信息页面没有提到aria-label，但这似乎是解决方案。这对 Google 来说太经典了。

【解决方案2】：

如果想在react app中实现这个，我们需要在<a>标签中添加aria-label属性。

之前：

<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>

【讨论】：

【解决方案3】：

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

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

【讨论】：