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

我在这里找到了答案：

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

您似乎应该添加一些可以通过CSS隐藏的文本，但不能使用display:none;或类似的任何内容。屏幕阅读器会忽略它。

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

Answer 2

我遇到了同样的问题，用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 3

这意味着您在'i'标签旁边写了文字如您的文字代替

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

Answer 4

我通过CSS解决方法解决了该问题：

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

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

Answer 5

我遇到了同样的问题，我只添加了一个空格就解决了

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

Answer 6

我的标头设计系统遇到了同样的问题，并在此处找到了解决方案：

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

为澄清起见，这是区别：

之前：

const ExternalButton = styled（（{... props}）=> ）``

之后：

const ExternalButton = styled（（{{children，... props}）=> ）

请注意中必须包含一个空格才能在帖子上呈现。请删除它以获取功能性答案

图标链接没有文本夹板错误

6 个答案: