如何修复灯塔"链接没有明显的名称"

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>