没有文本的图标链接 eslint 错误

Question

我有一个 React 项目，它显示了一堆社交媒体链接，这些链接只是各自网站的图标。我使用 icomoon 字体等来提供 icon-* 类来显示社交媒体图标。

可以理解的是，我得到的错误是：

Anchors must have content and the content must be accessible by a screen reader

在这种情况下，除了图标和文本之外我不需要任何东西，我该怎么办？我不知道如何正确地做到这一点，这样每个人都高兴。

编辑

我认为代码没有必要，因为它与任何事情都不相关。

这是吐出链接的映射。如您所见，没有文字。只是链接到的任何社交媒体网站的字体图标：

{this.props.siteInfo.social.map(function(item, i){
    return <a key={i} className={`nav_item icon-${item.social_media_type}-square`} href={item.url} target="_blank" rel="noopener noreferrer"></a>
})}

结果是：

<a key="0" class="nav_item icon-facebook-square" href="facebook.com/someprofile" target="_blank" rel="noopener noreferrer"></a>

Answer 1

我遇到了同样的问题，我通过添加一个空格解决了它

<a><i class="fa fa-phone" aria-hidden="true"></i> </a>

Answer 2

我在这里找到了答案：

https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/

看来你应该添加一些可以通过CSS隐藏的文本，尽管不能使用display:none;或任何类似的东西。屏幕阅读器会忽略这一点。

我不确定这是否是最新的做事方式，但它确实有效并实现了可访问性，并且 eslint 很高兴。