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

Question

Я использую онлайн-инструмент 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> 

Answer 1

Это относится к H2: Combining adjacent image and text links for the same resource технике WCAG.

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

В действительности это плохой анализ из этого синтаксического анализа как следовало бы отметить, что якорь # часто используется для обозначения яваскрипта ссылки (хотя это не является допустимой 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> 

Answer 2

попробовать это

<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> 

Techniques/HTML/Combining adjacent image and text links for the same resource