如何使标签与 WCAG 2.0 兼容?

How do I make tag i WCAG 2.0 compatible?

我正在使用 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.

由于语义-UI 组件的使用,我不能用 emstrong 替换它,因为我没有将 i 用于 斜体,你知道我该如何修复它或任何变通方法以使检查器不出错吗?

当您将 'Semantic-UI' 作为您的选择框架时,我认为您有两个选择:

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

Font Awesome 有一些很好的建议:

Icons with semantic or interactive purpose

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies. This goes for content you're abbreviating via icons as well as interactive controls (buttons, form elements, toggles, etc.).

http://fontawesome.io/accessibility/