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

Question

Если у меня есть сайт с парой шрифтов на нем, например значки

<i class="fa fa-fw fa-cloud "></i>

И запустить это через валидатор WCAG 2.0, я получаю следующую ошибку:

Success Criteria 1.4.4 Resize text (AA)

  Check 117: i (italic) element used. 

  Repair: Replace your i elements with em or strong. 

  Error Line 185, Column 158: 

    <i class="fa fa-fw fa-cloud"></i> 

Я понимаю, что правило не должно действительно применяться в этом случае, так как оно должно гарантировать, что <em> а также <strong> используются вместо своих несемантических аналогов <i> а также <b>, Но проблема все еще существует, если у меня есть клиент, который требует, чтобы я установил все флажки WCAG2.0.

Так кто-нибудь знает, что будет правильным способом. Должен ли я изменить их на <em> вместо этого, это дает читателям экрана какие-либо трудности? Любые другие предложения приветствуются!

Answer 1

Из удивительного документа:

Вы можете разместить иконки Font Awesome практически в любом месте, используя префикс CSS fa и имя иконки. Font Awesome разработан для использования со встроенными элементами (для краткости нам нравится тег 'i', но использование 'span' более семантически правильно).

Таким образом, вы можете попробовать изменить теги 'i' на 'span'.

Answer 2

Первый, <i> действительно имеет семантическое значение в HTML5 (но до этого был только презентационным). Предполагая, что вы используете HTML5, используемый вами валидатор неправильный, чтобы пометить все вхождения <i> как неуместно.

Во-вторых, меняется

<i class="fa fa-fw fa-cloud"></i>

в

<span class="fa fa-fw fa-cloud"></span>

это хорошо, но это не решает реальную проблему доступности, которая заключается в том, что у вас нет текстовой альтернативы значку (по крайней мере, кажется, что у вас ее нет). Ради аргумента, давайте предположим, что ваша иконка fa-cloud находится внутри <a> тег. Как то так (используя Bootstrap's sr-only Класс CSS):

<a href="...">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
    <span class="sr-only">Download</span>
</a>

или как это (используя WAI-ARIA aria-label атрибуты):

<a href="..." aria-label="Download">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
</a>

это решение. Еще проще было бы показать текст всем:

<a href="...">
    <span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
    Download
</a>

Answer 3

Это очень сильно зависит от того, какой контент находится внутри i тег семантически. WCAG2.0 - это набор правил, а не жестких и быстрых правил.

Согласно спецификации HTML5:

Элемент i представляет диапазон текста альтернативным голосом или настроением или иным образом смещается от обычной прозы, что указывает на другое качество текста, такое как таксономическое обозначение, технический термин, идиоматическая фраза с другого языка, транслитерация, мысль или название корабля в западных текстах.

От: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html

Если содержание является чем-то, что должно быть "подчеркнуто", тогда не пользуйтесь em тег как это семантически правильно для всех пользовательских агентов. Пример в спецификации с латинским техническим названием для животного является прекрасным примером чего-то, что будет выделено курсивом, но не подчеркнуто (хотя визуально они будут выглядеть одинаково).

<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>

Будет в стиле:

Кошка Felis Silvestris симпатична.

Поэтому, если вы можете объяснить, почему текст "курсив", но не выделен, оставьте его как есть, иначе измените его на семантически подходящий тег.

Answer 4

Добавление к ответу Дэниеликсона (+1): если я хочу использовать в пользовательском интерфейсе необычный значок в качестве декоративного элемента (не ссылку, кнопку и т. Д.), Я добавляю диапазон с атрибутом wai-aria:

<span class="fa fa-small-arrow" role="presentation"></span>