字体真棒可访问性问题。使用标记代替

Question

我正在测试我的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），但没有发现我需要为图标使用不同标签的任何提示。有什么想法吗？

Answer 1

作为一般准则，您应该使用em强调而不是i斜体文字，因为斜体文字通常仅用于暗示重点。

在这种情况下，您使用的i是icon，这是胡说八道（并且使可访问性检查工具混乱）。使用span代替。这没有任何不适当的语义。

@sdvnskv 看来这种传统智慧不再正确。“在 HTML 规范的早期版本中， 元素只是一个用于以斜体显示文本的表示元素，很像 元素用于以粗体字母显示文本。现在情况已不再如此，因为这些标签现在定义语义而不是印刷外观。” - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i (2认同)

Answer 2

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

Answer 3

在严格的语义 HTML 上，字体图标必须用spans标记：

<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 示例以（斜体标记）出现。只是它。

字体真棒可访问性问题。使用&lt;em&gt;标记代替&lt;i&gt;