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

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

<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>, возникают ли при этом проблемы с программами чтения с экрана? Любые другие предложения приветствуются!


html accessibility font-awesome wcag wcag2.0
person zelexir    schedule 11.04.2014    source источник

Ответы (4)


arrow_upward
8
arrow_downward

из документа font-awesome:

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

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

person kurroman    schedule 09.12.2014
comment
Я действительно изменил теги на span для всего проекта. Избавился от ошибок в инструменте проверки, и, как вы отметили, он более семантически правильный. - person zelexir; 10.12.2014

arrow_upward
24
arrow_downward

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

Во-вторых, изменение

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

to

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

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

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

или как это (используя _8 _ атрибут):

<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>
person danielnixon    schedule 18.12.2014
comment
Проголосовал за усилия :) В моем случае значки использовались только в декоративных целях. Решения aria / screen-reader-only важны и в других сценариях использования, описанных здесь. - person zelexir; 09.01.2015

arrow_upward
2
arrow_downward

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

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

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

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

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

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

Был бы оформлен в стиле:

Felis silvestris catus - милый.

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

person Community    schedule 14.05.2014
comment
Вопрос в том, что спрашивают о fontawesome, у которого не будет содержимого внутри элемента ‹i›, поскольку он существует только для отображения графики. - person Alexander Holsgrove; 09.06.2017

arrow_upward

arrow_downward

person    schedule
comment
Добавление role="presentation" к span является избыточным. w3.org/TR/wai-aria/roles#presentation. - person danielnixon; 11.01.2016