字体Awesome无障碍问题。使用标签代替。

Question

27

我正在测试我的HTML代码是否符合无障碍标准：http://achecker.ca/checker/index.php。以下是我收到的错误信息：

修复：将您的i元素替换为em或strong。

<i class="fa fa-search" title="Search"></i> <span class="sr-only">Search</span>

我查看了 Font Awesome 官方文档中关于辅助功能的内容（https://cdn.fontawesome.com/help#qa-autoa11y），没有提到需要使用不同的标签来显示图标。对此有什么想法吗？

- sdvnksv

3

由于没有可读的文本涉及，因此可以安全地使用“i”。 - Paulie_D

...但是如果你真的很在意的话...最好使用span。 - Paulie_D

1

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i - Paulie_D

@Paulie_D，谢谢。我想我会用span来替换它们，以防万一。 - sdvnksv

6

Font Awesome的文档：Font Awesome旨在与内联元素一起使用，并建议在项目中坚持使用一致的HTML元素来引用它们。我们喜欢使用标签，因为它简洁，并且大多数人现在使用来强调/斜体语义文本。如果这不是你所喜欢的，使用更符合语义。 - Voicu

4个回答

8

在严格和语义化的HTML中，字体图标必须使用标签进行标记：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa fa-camera-retro"></span>

Font Awesome示例使用（斜体标签）出现是因为缩写编码。就是这样。

- Miquel Al. Vicens

8

我知道这是2016年的答案...你可以在标签上使用aria-hidden="true"，像这样：。

- Lincoln Stuart Lima da Gama

尽管存在这些规范，但像achecker.ca这样的验证器似乎并不遵守它们。我猜最好的方法是使用元素。 - Dimitrios Arampatzis

aria-hidden="true" 最大的缺陷在于它无法很好地处理动态内容。 - code

1

元素表示其内容的强调重点。

如果您没有强调特定单词，则应使用。

元素更适合用于表示演示目的。

您可以使用标记引用 - 不是为整个短语或段落添加强调，而是为了将其与主文本区分开或抵消。

在您的情况下，建议使用 ，因为一些专业的辅助功能软件可能会更加强调它们。

- Herbs

2

你可以使用来标记引用，但最好不要这样做。我们有<q>元素。 - Quentin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quentin · Accepted Answer

作为通用的指导方针，应该使用 em 来强调文字，而不是使用 i 来表示斜体，因为斜体一般只用于暗示强调。在这种情况下，您正在使用 i 来表示图标，这是没有意义的（并且会混淆您的可访问性检查工具）。请改用 span，它不会带有任何不适当的语义。

字体Awesome无障碍问题。使用<em>标签代替<i>。