1

我正在使用 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因为我没有使用iitalic ，你知道我该如何修复它或任何解决方法以使检查器没有错误吗？

4

1 回答 1

1

当您将自己绑定到“语义 UI”作为您选择的框架时，我认为您有两个选择：

  1. 更改源icons.css组件并换出i.icon 引用，span.icon然后使用<span>元素。
  2. 实际上解决可访问性问题，而不是试图解决它。从您使用的图标来看<i class="icon search"></i>，辅助技术的用户似乎需要其他描述。

Font Awesome 有一些很好的建议：

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

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

http://fontawesome.io/accessibility/

于 2017-01-27T12:44:41.557 回答