Question

我正在使用Semantic-UI框架，对于图标，我必须使用i标记。这是一个例子：

<i class="icon search"></i>

我想让我的代码符合WCAG 2.0（AA级），我正在使用AChecker validator。对于包含i标记的每一行，我都会收到以下错误：

1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

Success Criteria 1.4.4 Resize text (AA)

Check 117: i (italic) element used.
Repair: Replace your i elements with em or strong.

由于Semantic-UI组件的使用，我不能用em或strong替换它，因为我没有将i用于斜体，你知道如何修复它或任何解决方法来检查没有错误吗？

Answer 1

当你将自己与'Semantic-UI'作为选择框架时，我认为你有两个选择：

更改来源icons.css组件并换出i.icon span.icon的引用然后使用<span>元素。
实际上解决了辅助功能问题，而不是尝试解决它。根据您使用的图标来判断<i class="icon search"></i>看起来像辅助技术的用户需要另外的描述。

Font Awesome有一些非常好的建议：

具有语义或互动目的的图标

如果您使用图标来传达意义（而不仅仅是作为装饰元素），请确保将此含义传达给辅助技术。这适用于您通过图标以及交互式控件（按钮，表单元素，切换等）缩写的内容。

http://fontawesome.io/accessibility/

如何使标签与WCAG 2.0兼容？

1 个答案: