Полезно ли добавлять теги aria-labelledby и alt вместе для обычных изображений? или есть лучшая практика, которую я должен принять.
aria-labelledby
Нет, фактически добавление aria-labelledby и alt вместе приведет к тому, что некоторые программы чтения с экрана будут читать имя дважды. Просто используйте атрибут alt, вот для чего он нужен, он имеет самую широкую поддержку (100%) и прекрасно справится с этой задачей.
Также aria-labelledby требуется как минимум один элемент в DOM, который содержит текст, вы ссылаетесь на него по идентификатору. Вы можете иметь более одного ярлыка только для справки. Он предназначен для использования с другими элементами, которые не могут быть помечены с помощью semanti c HTML, на самом деле не для изображений (всегда есть исключения, но они редки, и это общее руководство).
например,
<span id="ID1">Read First</span>
<span id="ID2">You can add a second label that will be read second</span>
<div aria-labelledby="ID1 ID2"></div>
атрибут заголовка
Также не используйте атрибут title, если только вы не планируете сделать его таким же, как атрибут alt. В противном случае пользователи мыши могут по-разному воспринимать пользователей программ чтения с экрана, поскольку атрибут title недоступен большинству программ чтения с экрана. Посмотрите этот подробный ответ, который я дал об атрибуте title и о том, как развернуть доступную версию, если вы хотите ее использовать.
пример доступного изображения
Итак Ваше окончательное, доступное изображение будет выглядеть так: -
<img src="https://placeholder.pics/svg/300x300" alt="Image Placeholder" width="300" height="300">
Идеально доступно и легко поддерживается.
Нужно ли добавлять role = "presentation", aria-hidden = "true" и alt = "" к каждому декоративному изображению? Все трое должны go вместе? или только один из них? (если только один или два из них, то какие?)
атрибут alt
Все, что вам нужно сделать, это добавить пустой атрибут alt. Обратите внимание, как я сказал пустой и не нулевой. например, alt="" НЕ просто alt. Использование alt в качестве нулевого атрибута приведет к тому, что некоторые программы чтения с экрана будут его игнорировать, поэтому имя файла будет считано.
role = "presentation"
Для полноты можно добавить role="presentation" но это не добавит никакой дополнительной поддержки, насколько я знаю.
С учетом вышесказанного я лично добавляю role="presentation" к декоративным изображениям, так как наше модульное тестирование помечает все пустые атрибуты alt, если это не добавлено. Это было обдуманное решение, поэтому, когда мы запускаем тесты, мы не проверяем правильность пустых атрибутов alt.
Поскольку поддержка пустых атрибутов alt также составляет 99/100%, она также совершенно допустима и доступна только для использования alt="".
aria-hidden
Единственное место (ну, главное, всегда есть исключения), где вы хотите использовать aria-hidden на внешнем изображении, это если вы собираетесь динамически скрывать и показывать его. Некоторые программы чтения с экрана отслеживают изменения WAI-ARIA лучше, чем изменения DOM.
aria-hidden и встроенные SVG
Я бы порекомендовал добавить aria-hidden="true", role="presentation" и focusable="false" для встроенных SVG, которые являются чисто декоративными, хотя Inte rnet Explorer иногда может разрешить они должны быть сосредоточены.
Обратите внимание, что вы все равно не используете атрибуты alt для встроенных SVG.
примеры декоративных изображений
Таким образом, ваше окончательное декоративное изображение будет: -
<!--all image types loaded externally using `img` including SVGs-->
<img src="https://placeholder.pics/svg/100x100" alt="" width="100" height="100">
<!--exception for inline SVGs due to focus bug in IE-->
<svg aria-hidden="true" role="presentation" focusable="false">...</svg>
заключительная заметка о WAI-ARIA
WAI-ARIA предназначена для предоставления информации, когда для этого нет способа semanti c.
Добавление дополнительной WAI-ARIA all на самом деле делает доступность хуже. Всегда следует начинать с «есть ли собственный способ передачи информации программе чтения с экрана», если есть, то WAI-ARIA не нужен или даже не рекомендуется.
After Thought
Я упомянул встроенные SVG, не использующие атрибут alt , вместо этого вы хотите использовать <title> как часть SVG. Прочтите эту краткую статью о доступных SVG для быстрого обзора.