css 字体极好的辅助功能问题,使用标记代替

guz6ccqo 于 2022-12-01 发布在其他

关注(0)|答案(5)|浏览(214)

我正在测试HTML代码标记是否符合可访问性标准：http://achecker.ca/checker/index.php。以下是我收到的错误：
修复：用em或strong替换你的i元素。

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

我浏览了官方的Font Awesome无障碍文档（https：//cdn.fontawesome.com/help#qa-autoa11y），没有发现任何关于我需要为图标使用不同标签的内容。

css

来源：https://stackoverflow.com/questions/40264695/font-awesome-accessibility-issue-use-em-tags-instead-of-i

5条答案

按热度按时间

ycggw6v21#

作为一般准则，您应该使用em来强调，而不是i来强调斜体文字，因为斜体文字通常仅用于暗示强调。
在本例中，您将i用于 icon，这是毫无意义的（并且会混淆您的可访问性检查工具）。请改用span。它不会加载任何不适当的语义。

赞(0）回复(0）举报 2022-12-01

sdnqo3pr2#

在严格的语义HTML中，字体图标必须用span s标记：

<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 examples与（斜体标记）一起出现是因为缩写编码。

赞(0）回复(0）举报 2022-12-01

qvtsj1bj3#

我知道这是一个2016年的答案...你可以在你的标签上使用aria-hidden="true"，就像这样：，tho.
这就解释了：https://rules.sonarsource.com/html/RSPEC-1100和https://www.w3.org/WAI/GL/wiki/Using_aria-hidden%3Dtrue_on_an_icon_font_that_AT_should_ignore的函数

赞(0）回复(0）举报 2022-12-01

v64noz0r4#

元素表示其内容的强调。
如果你不是在强调某个特定的单词，那么你应该使用。
元素更适合用于表示目的。
您可以使用来标记引文--不是为了强调整个短语或段落，而是为了区分它或使它偏离正文。
http://www.silkstream.net/blog/2016/02/b-vs-strong-i-vs-em-whats-the-difference.html
在您的情况下，它可能会建议使用，因为一些专门的辅助功能软件可能会更强调处理它们。