Как сделать тег i WCAG 2.0 совместимым?

Question

Я использую рамки семантического UI, и для значков я должен использовать тег i. Вот пример:

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

Я хочу, чтобы мой код совместимым с WCAG 2.0 (уровень АА), и я использую 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. 

Поскольку я не могу заменить его em или strong из-за использование компонентов Semantic-UI и потому, что я не использую i для курсивных, вы знаете, как я могу исправить это или любой рабочий процесс, чтобы не получить ошибок с помощью проверки?

Answer 1

Как вы привязывание себя в «семантический-UI» как ваши рамки выбора, как я вижу у вас есть два варианта:

1. Измените компонент источника icons.css и выгрузить i.icon ссылки на span.icon затем используйте элемент <span>.
2. Фактически обращайтесь к проблеме доступности, а не пытайтесь обойти ее. Судя по значку, который вы используете <i class="icon search"></i>, похоже, что пользователям вспомогательных технологий потребуется альтернативное описание.

шрифт Высокий есть очень хороший совет: [? Как сделать шрифт Высокий WCAG 2.0 совместимый]

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/