图标链接没有文本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 很高兴。

Answer 3

我遇到了同样的问题，用React这样解决了（与@danielInixon相同的建议

 const IconLink = props => {
   const { name } = props;
   return <a aria-label={name} href="https://github.com/johnb8005/svg">
     <i className={`fa fa-${name}`} aria-hidden="true"/>
   </a>;
 };

Answer 4

我用 CSS 解决方法解决了这个问题：

添加一些文本。 添加一些CSS：

• text-indent: 100%;

• white-space: nowrap;

• overflow: hidden;

Answer 5

这意味着您在“i”标签旁边写了文字 如 你的文字 相反

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

Answer 6

我的标题设计系统也遇到了同样的问题，并在这里找到了解决方案：

https://github.com/gatsbyjs/gatsby/issues/20208

澄清一下，区别如下：

之前：

const ExternalButton = styled( ({ ...props}) => <a {...props} />)

之后：

const ExternalButton = styled( ({ children, ...props}) => <a {...props}>{children} </a>)