Лучшая практика для заголовка изображения и альтернативного текста для доступности? - PullRequest
Новая
       41

Лучшая практика для заголовка изображения и альтернативного текста для доступности?

0 голосов
/ 03 октября 2019

JAWS произносит описание дважды: «Вернуться к графической ссылке на веб-сайт Google. Test Lon и вернуться на веб-сайт Google».

Исследования показали, что это, по-видимому, повторяется дважды, как указано один раз для графической / графической ссылки и один раз для заголовка гиперссылки.

Мне было интересно, что лучше для этого делать. мудрое кодирование доступности / инвалидности, я делаю это правильно или это лучшая практика для этого? Пожалуйста, не стесняйтесь изменить ответ. 

<div class="col-md-2">
<a href="https://www.google.co.uk/" title="Google’s Test Lon – Back to Google’s website">
<img src="/test.jpg" alt="Back to Google’s website">
</a>
</div>

1 Ответ

1 голос
/ 03 октября 2019

Лучший способ сделать это - поместить текст в ссылку и сделать изображение «украшением», указав в большинстве случаев пустой alt-тег - не существует 100% -го решения, подходящего для всех вариантов использования

Обратите внимание - убедитесь, что тег alt есть и пуст, как показано alt="" - наличие alt или отсутствие тега alt вообще приведет к тому, что имя файла будет прочитаноout.

Затем мы скрываем текст ссылки, используя класс «визуально скрытый», который гарантирует, что текст все еще доступен, но не видим.

Не используйте атрибут title в ссылках (покаопять-таки общее правило), поскольку оно имеет тенденцию вызывать двойные объявления.

Скрипка должна работать во всех программах чтения с экрана, она работает в JAWS, VoiceOver и NVDA, когда я последний раз тестировал ее (около 90% программ чтения с экрана). 

.visually-hidden { 
        position: absolute; 
        overflow: hidden; 
        clip: rect(0 0 0 0); 
        height: 1px; width: 1px; 
        margin: -1px; padding: 0; border: 0; 
    }
<div class="col-md-2">
  <a href="https://www.google.co.uk/">
    <img src="https://via.placeholder.com/150" alt="">
    <span class="visually-hidden">Google’s Test Lon – Back to Google’s website</span>
  </a>
</div>
...