Проверка WCAG 2.0 - последовательные текстовые и графические ссылки на один и тот же ресурс

Я использую онлайн-инструмент tawdis для проверки совместимости с уровнем WCAG 2.0 AA. Я сталкиваюсь с ошибкой «Consecutive text and image links to the same resource», когда использую приведенный ниже код. Как исправить эту ошибку при валидации WCAG?

<ul>
    <li><div><a href="#"><em class="fa fa-instagram" title="instagram"></em></a></div></li>
    <li><div><a href="#"><em class="fa fa-facebook-square" title="facebook"></em></a></div></li>
    <li><div><a href="#"><em class="fa fa-pinterest-square" title="pinterest"></em></a></div></li>
    <li><div><a href="#"><em class="fa fa-youtube-square" title="youtube"></em></a></div></li>
</ul>

html twitter-bootstrap-3 wcag wcag2.0
person Balaji Kandasamy    schedule 01.06.2016    source источник
comment
1. Вы знаете, что ваши ссылки недоступны, потому что они пусты? 2. Использование здесь элемента em нецелесообразно. Вероятно, должно быть span. 3. Проверяли ли вы именно эту разметку (т.е. со значением # как href для всех ссылок)?   -  person unor    schedule 02.06.2016

Ответы (2)


arrow_upward
3
arrow_downward

Это относится к H2: объединение смежных изображений и текстовых ссылок для одного и того же ресурса Техника WCAG.

Поскольку я полагаю, вы разместили свой полный код, я полагаю, что вы используете какой-то javascript для этих ссылок. Таким образом, синтаксический анализатор Tawdis считает, что эти ссылки нацелены на один и тот же URI.

На самом деле это плохой анализ этого парсера, поскольку следует отметить, что привязка # часто используется для маркировки ссылки javascript (хотя это не действительный URI и плохая практика).

У вас разные дела:

  • используйте значимый тег для того, что кажется button, а не ссылкой,
  • не используйте теги типа em, которые имеют семантическое значение,
  • предоставить альтернативный текст.

Пример:

 <ul>
    <li><button class="fa fa-instagram">Instagram</button></li>
    <li><button class="fa fa-facebook-square">Facebook</button></li>
    <li><button class="fa fa-pinterest-square">Pinterest</button></li>
    <li><button class="fa fa-youtube-square">Youtube</button></li>
</ul>
person Adam    schedule 09.06.2016

arrow_upward
0
arrow_downward

попробуй это

   <ul>
        <li><div><a href="#"><em class="fa fa-instagram" title="instagram" alt="instagram"></em></a></div></li>
        <li><div><a href="#"><em class="fa fa-facebook-square" title="face" alt="face"></em></a></div></li>
        <li><div><a href="#"><em class="fa fa-pinterest-square" title="pinta" alt="pinta"></em></a></div></li>
        <li><div><a href="#"><em class="fa fa-youtube-square" title="youtube" alt="youtube"></em></a></div></li>
    </ul>

Методы / HTML / Объединение смежных изображений и текстовых ссылок для одного ресурса

person JMF    schedule 01.06.2016
comment
Атрибут alt бесполезен для тега em - person Adam; 09.06.2016