如何修复灯塔“链接没有可分辨的名称”

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

除了将span放在文本中a并将其隐藏起来，例如<a....><span class="hide">Twitter</span></a>之外，我想不出其他什么了，但是想知道是否有适当的解决方案？ / p>

对此有何建议？

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 app中实现，我们需要在<{1}}标签中添加 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>

Answer 3

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

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