我有一个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>
我遇到了同样的问题，我只添加一个空格就解决了它
<a><i class="fa fa-phone" aria-hidden="true"></i> </a>
我在这里找到了答案：
https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/
似乎您应该添加一些可以通过CSS隐藏的文本，尽管不能使用display:none;或类似的东西。 屏幕阅读器将忽略这一点。
我不确定这是否是最新的做事方式，但它确实有效并实现了可访问性，并且 eslint 很高兴。
我遇到了同样的问题，用 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>;
};
我用CSS解决方法解决了它：
添加一些文本。 添加一些 CSS：
text-indent: 100%;white-space: nowrap;overflow: hidden;
这意味着你在"i"标签的旁边写了你的文本 如 你的文字 相反
<a><i class="fa fa-phone" aria-hidden="true"></i> your text</a>