[Перевод] Для этого не нужна ARIA20.12.2022 22:01

В веб-разработке написание семантического HTML важно для доступности, а также дает некоторые приятные побочные эффекты, такие как поддержка режима «чтения» в браузере, SEO, graceful degradation и возможность экспорта.

Реализуя семантический HTML, мы также значительно уменьшаем потребность в ARIA (Accessible Rich Internet Applications). ARIA — это большой набор HTML атрибутов, который обеспечивает доступность для пользователей использующих screen reader, за счет лучшей поддержки семантики, которая не предоставляется или плохо поддерживается с помощью базовой HTML разметки.

Местами, использование ARIA, определённо необходимо. Но в целом, сокращение использования ARIA, по иронии судьбы, значительно повышает доступность. Это связано с несколькими причинами, в том числе:

ARIA очень часто реализована неправильно. Это хорошо известно в области, но для получения данных обратитесь к отчету WebAIM Million, в котором говорится, что «На главных страницах с присутствием ARIA было обнаружено в среднем на 70% больше ошибок, чем на страницах без ARIA».
ARIA может не очень хорошо поддерживаться (даже если правильно реализовано) браузером и/или screen reader’ом, что, к сожалению, случается очень часто.
ARIA не магия (как, похоже, думают некоторые профессиональные веб-разработчики). Интерфейсы по-прежнему должны быть доступными, инклюзивными и пригодными для использования.
ARIA предоставляет только семантику. Оно не предоставляет никакой функциональности. Он не обеспечивает никакого взаимодействия с клавиатурой, которое часто ожидают от определенных шаблонов ARIA (например, панель вкладок). Оно не решает проблемы доступности вне семантики вспомогательных технологий (таких как альтернативный текст, цветовой контраст, порядок чтения, четкие надписи, подписи к рисункам и т.д.).

Следующие примеры продемонстрируют, как правильно использовать HTML так, чтобы ARIA не требовалась. При этом приведённые методы помогут разработчикам следовать первому правилу ARIA (по возможности сначала использовать HTML), а также обеспечат более надежный код и, скорее всего, более доступный интерфейс для пользователя.

Примеры использования

Приведенные ниже примеры представляют собой лишь выборку проблем и включают подписи элементов форм, кнопки, ссылки и изображения. Я считаю их распространенными проблемами, и на самом деле я столкнулся со всеми из них «в дикой природе» (на живых веб-сайтах) за последние пару недель. За плохой версией следует хорошая, а затем примечание. В демонстрационных целях фрагменты кода значительно упрощены по сравнению с веб-страницами, на которых они были найдены.

Помните, что исправление избыточности ARIA может показаться тривиальным на первый взгляд, но может иметь большое значение в:

снижение сложности кода — меньше кода!
уменьшение проблем с поддержкой — например, использование одного текстового контента вместо дублирования (кроме того, меньше кода!)
уменьшение ошибок доступности вызванных вычислением значений браузером — например, разработчик может не понимать как высчитывается доступное имя, что может быть немного сложным.

Теперь давайте перейдем к примерам!

Подписи в формах

Пример 1

Плохо: не нужный атрибут aria-label


    
     
    Pickup

Хорошо: используйте текст внутри метки (неявная ассоциация)


    
     
    Pickup

Примечание: Удалите aria-label, чтобы выиграть! label, обернутый вокруг input, в достаточной степени обеспечивает доступное имя для поля ввода.

Предупреждение: этот пример реализует неявную маркировку поля ввода, которая может иметь проблемы с некоторыми вспомогательными технологиями, такими как Dragon NaturallySpeaking. Рекомендуется использовать явную ассоциацию, как в примере 2.

Пример 2

Плохо: необоснованное использование aria-labelledby

Sort By:

Хорошо: используйте атрибуты for и id для явной связи

Sort By:

Примечание: Используйте базовый HTML (а не ARIA), чтобы выиграть! Атрибуты for и id предоставляют доступное имя для полей ввода.

Изображения в кнопках

Плохо: ненужный aria-label и ненужная роль

Хорошо

Примечание: Удалите два атрибута ARIA (и дублирующийся текст), чтобы выиграть! Атрибут alt предоставляет доступное имя для кнопки.

Текст в ссылках

Плохо: перезапись существующего контента


	100 W Main St
	Strangeville, OH 48000

Хорошо: используйте существующий встроенный текст


	100 W Main St
	Strangeville, OH 48000

Примечание: Здесь не нужно переусердствовать, aria-label перезаписывает текст адреса в качестве имени ссылки, поэтому текст адреса недоступен пользователям screen reader’ов. Достаточно обернуть в ссылку текст адреса.

Изображения в ссылках

Плохо: ненужный атрибут aria-label

Хорошо: используйте только альтернативный текст изображения

Примечание: Удалите атрибут aria-label и используйте базовый HTML, чтобы выиграть! Атрибут alt используется в качестве контента ссылки.

Декоративные изображения

Плохо: атрибут role используется для обозначение декоративного изображения

Хорошо: используйте пустое значение для атрибута alt

Примечание: Удалите атрибут role (и удалите содержимое alt), чтобы выиграть! Пустой атрибут alt означает, что это декоративное изображение.

Скрипты

Плохо: aria-hidden на тэге скрипта