Комментарии 6
Когда у вашей ссылки нет видимой подписи, её следует подписывать с помощью специального атрибута aria-label, а не использовать костыль со скрытым текстом. То есть не
<a href={url}> <A11yHidden hiddenText="фото котиков" /> </a>, А<a href={url} aria-label="Фото котиков"></a>То же самое справедливо и для ссылок с тегом
<img>внутри. aria-label лучше, чем атрибут altВ ссылке
<a tabIndex={0}>Фото котиков</a>нужен tabindex, т.к. у нее отсутствует href, а это значит, что ссылка не будет получать фокус клавиатуры.
следует подписывать с помощью специального атрибута aria-label
Предпочтительнее использовать visually hidden, потому что при автоматическом переводе страницы текст, который не находится внутри элемента читается на ломанном языке. Например, если весь текст страницы будут читать на английском, то вот эту часть - на ломанном английском. Скрытый текст - это не костыль, это общепринятая практика, используемая повсеместно https://www.google.com/search?q=visually+hidden&oq=visually+&aqs=chrome.1.69i57j0i512l9.3202j0j7&sourceid=chrome&ie=UTF-8&bshm=ncc/1
То же самое справедливо и для ссылок с тегом <img> внутри. aria-label лучше, чем атрибут alt
В спецификации прописано как раз, что нужно указывать alt https://www.w3.org/WAI/tutorials/images/decision-tree/
В ссылке <a tabIndex={0}>Фото котиков</a> нужен tabindex, т.к. у нее отсутствует href, а это значит, что ссылка не будет получать фокус клавиатуры.
href я опустила. Я конечно имела в виду обычную ссылку с href.
Предпочтительнее использовать visually hidden, потому что при автоматическом переводе страницы > текст, который не находится внутри элемента читается на ломанном языке. Например, если весь > текст страницы будут читать на английском, то вот эту часть - на ломанном английском. Скрытый текст > - это не костыль, это общепринятая практика, используемая повсеместно > https://www.google.com/search?> q=visually+hidden&oq=visually+&aqs=chrome.1.69i57j0i512l9.3202j0j7&sourceid=chrome&ie=UTF-> > 8&bshm=ncc/
А почему тут ссылка на гугл, а не спецификацию? Возможно, потому что во всех спецификациях указано, что для этих задач используется атрибут aria-label? Вообще, кажется, что довольно логично использовать для решения проблем атрибут, который был придуман для решения этих проблем. Довольно удивительно указывать в качестве доказательства ссылку на гугл поиск, но ok, давайте возьмем один из результатов, хотя бы https://getbootstrap.com/docs/5.0/helpers/visually-hidden/. Мы видим, что этот костыль, используется для скрытие текста тогда, когда aria-label неприменим, к примеру, чтобы скрыть текст заголовка, что само по себе является костылём. Вам же известно, что aria-label нельзя устанавливать на некоторые html контейнеры? Так же это используется порой для скрытия фокусируемых элементов. Этот хак наверняка можно назвать общеупотребительной практикой, но только в тех случаях, когда не существует специально разработанных средств, а необходимость его использовать уже значительный повод задуматься над реализацией.
Если же какие-то скринридеры не способны нормально озвучить переведенный текст в aria-label в 2023 году, хотя я такого не встречал последние пару лет, то это не проблема прикладных разработчиков и не повод городить костыли.
Ссылка на гугл, чтобы показать, что есть множество статей на эту тему, соответственно это общепринятая практика.
aria-label нельзя устанавливать на некоторые html контейнеры
Да, и еще это тоже.
необходимость его использовать уже значительный повод задуматься над реализацией
Не факт. Например, на странице товара в поиске по товару есть график изменения цены, сделанный с помощью svg. С помощью visually-hidden мы поместили на страницу таблицу, в которой есть вся информация по изменению цен. По другому сделать этот график доступным для скринридеров было нельзя.
В своей статье вы приводите примеры, где следует использовать aria-label, а в своих аргументах под статьёй примеры, где его нельзя использовать. Понятно, что у aria-label есть границы применимости, но это же не значит, что его не следует использовать для того, для чего он и был создан и для чего подходит лучше всего. Конечно, в нем не разместить таблицу, но кнопки подписывать лучше всего с помощью него, т.к. это просто удобно и хорошо работает.
Как сделать сервисы доступнее для людей с нарушениями зрения. Исправляем 5 самых частых ошибок