Сегодня будет ARIA и советы о том, как её правильно использовать.
ARIA или Accessible Rich Internet Applications — это набор специальных атрибутов, которые расширяют возможности HTML и добавляют для элементов новые роли и функции.
ARIA стандартизирует спецификация WAI-ARIA. Последняя версия на данный момент 1.1. Ей занимается отдельная рабочая группа W3C — Accessible Rich Internet Applications Working Group (ARIA WG).
Самое главное правило ARIA — лучше никакой ARIA. Конец треда :)
Но нет, так просто меня не остановить! Вы можете использовать ARIA-атрибуты и роли, когда у вас на странице есть интерактивный элемент, для которого не хватает стандартного HTML.
Давайте обсудим роли и атрибуты, которые могут нам пригодиться.
Какой бы ни был дизайн, помните о правиле один элемент — одна роль. Более того, у вас всё равно не получится сделать один элемент одновременно кнопкой и ссылкой. role="" перезапишет роль, которая есть у элемента по умолчанию.
Избегайте изменения семантики элементов без сильной необходимости.
Для панели вкладок можно использовать role="tablist", внутри для самих вкладок — role="tab", а для их содержимого — role="tabpanel". Обратите внимание на то, что вкладки должны быть размечены как <button> и связаны с содержимым при помощи одинаковых id и aria-labelledby.
Пример разметки и скрипта для доступных вкладок можете посмотреть на MDN: developer.mozilla.org/en-US/docs/Web…
role="presentation" сбрасывает семантику элемента. Если встретите role=”none”, то это то же самое. Эта роль нужна ну в очень редких случаях. Например, когда у вас есть олдскульный сайт с табличной вёрсткой и вам нужно срочно избавиться от табличной семантики <table>.
aria-selected="true" используем для выбранных по умолчанию элементов, а aria-selected="false" для элемента, который в данный момент не активен. Состояниями, соответственно, управляем через JS. Этот атрибут может пригодиться для вкладок или аккордеонов.
Атрибут aria-expanded пригодится для элементов, которые сворачиваются или разворачиваются, как в аккордеонах или в бургерном меню. aria-expanded="true" добавляем для развёрнутых элементов, а aria-expanded="false" для свёрнутых. Его значения тоже переключаем через JS.
aria-hidden скрывает элемент от вспомогательных технологий, но оставляет его в DOM, если задать ему значение true. А false, наоборот, снова делает его видимым. У атрибута не так много кейсов для применения: он полезен для декоративных и дублирующихся элементов.
Повторюсь, что для декоративных изображений стоит использовать просто пустой alt.
Чтобы скринридерам проще было работать с интерактивными элементами, есть ARIA Live Region. Это такие области страниц, на которых изменяется контент. Например, чат, погодные виджеты, системные ошибки.
Без таких областей пользователи вспомогательных технологий смогут узнать об изменениях только тогда, когда сделают фокус на обновлённом элементе. Это не очень ненадёжный паттерн.
Чтобы такие части сайта «оживали», достаточно задать ей aria-live=”polite”. Тогда скринридер будет «вежливо» объявлять о том, что что-то в ней изменилось.
polite означает, что если в данный момент он читает в форме подпись поля, то он не прервётся, а сначала её дочитает, а уже потом сделает новое объявление.
Для сообщения об ошибке вам может пригодиться role="alert". Эту роль можно навесить на сообщение о системной ошибке. Тогда скринридер сразу же её объявит, как только окно с оповещением появится в DOM.
Самые основные вещи про Aria Live Region я собрала в статье «Всё, что нужно знать про Aria Live Regions»: medium.com/web-standards/…
Атрибут aria-label подходит для случаев, когда у элемента нет видимого описания. Его можно использовать для любого элемента, но лучше не делать это часто. Например, можно применять его для ссылок-иконок, у которых в дизайне не предусмотрена подпись.
Важно вот что: значение aria-label презаписывает другое текстовое содержимое элемента, в том числе у его детей.
С aria-label есть серьёзная проблема: его содержимое, как и у placeholder, не переводится автоматически: adrianroselli.com/2019/11/aria-l…
Если у элемента есть текстовое содержимое, то для того, чтобы связать его на программном уровне с другим элементом, можно добавить для него aria-labelledby и связать со вторым через id. При этом будет перезаписано содержимое текстового узла.
aria-describedby подходит для расширенного описания элемента и установления программной связи между ним и каким-то другим. Его можно использовать в полях для их связывания с сообщениями об ошибках.
У Аарона Густафсона есть небольшая заметка про aria-labelledby и aria-describedby с демкой: aaron-gustafson.com/notebook/aria-…
Сама WAI-ARIA: w3.org/TR/wai-aria-1.…
А подробнее о том, как именно использовать ARIA, можно узнать из черновика гайда W3C: w3c.github.io/using-aria/
Да, и помните, что скринридеры такие же уникальные и индивидуальные как браузеры. У них разная поддержка ролей и атрибутов. Так что не забывайте всё проверять на Accessibility Support: a11ysupport.io
На сегодня всё, а завтра будет финальный тред про WCAG.