Жизнь стала легкой с тех пор, как мы начали интегрировать роли ARIA в код HTML. ARIA предоставляет дополнительную семантику для поддержки вспомогательных технологий (AT) и позволяет разработчикам повысить удобство использования веб-приложений для людей с ограниченными возможностями. На сегодняшний день остается фундаментальный вопрос — нужны ли HTML-элементам ролевые атрибуты ARIA для раскрытия их семантики?
В этой статье я расскажу об этой теме вместе с новыми структурными элементами HTML5 с неявной семантикой по умолчанию, которая оспаривает роли ARIA.
Основы ARIA и общее восприятие
WAI-ARIA (обычно известный как ARIA) — это набор атрибутов, которые вы можете добавить к своим элементам HTML. Назначение этих атрибутов простое — передать семантику ролей, свойств и состояний в AT с помощью API специальных возможностей, присутствующих в веб-браузерах. Сообщение Стефана « Введение в WAI-ARIA» необходимо прочитать тем, кто не знаком с ARIA.
Общее восприятие ARIA в сообществе HTML таково: «Не используйте код ARIA, если вас охватил HTML». То же самое можно сказать немного яснее: если ваш HTML-элемент уже реализован, но еще не имеет поддержки специальных возможностей, используйте ARIA.
Влияние ролей ARIA на большинство элементов
В некоторых общих случаях семантика HTML-элемента может быть раскрыта с помощью роли, свойства или состояния ARIA. Сначала немного озадачивает, это известно в сообществе HTML как неявная семантика ARIA по умолчанию для элемента HTML.
Однако при кодировании в HTML лучше всего написать семантически правильный HTML (и, следовательно, использовать его собственную семантику), прежде чем приступать к интеграции атрибутов ARIA.
Роли ARIA ничего не добавляют к семантике по умолчанию для большинства элементов HTML.
Правило должно быть простым — если семантика по умолчанию включена в элемент HTML, не используйте ARIA. Интеграция ARIA там, где это не нужно, создает избыточный код.
Нужна ли HTML4 роль ARIA?
Как объяснил эксперт по специальностям Стив Фолкнер, все элементы HTML, которые были определены в HTML4 (и более ранних версиях HTML), не требуют добавления ролей ARIA для раскрытия их семантики по умолчанию, поскольку они уже были отображены.
Фактически, использование ролей ARIA в таких ситуациях и с элементами, определенными в HTML4, не будет иметь значения. Если в коде на основе HTML4 используются роли ARIA, это потребует от вас дополнительной работы, когда кто-то просматривает ваш код. Поэтому, как правило, желательно не добавлять роли ARIA в элементы HTML, если этого можно избежать.
Новые функции в HTML5
Согласно спецификации HTML5 :
В большинстве случаев установка роли ARIA и / или атрибута aria- *, которая соответствует неявной семантике ARIA по умолчанию, не нужна и не рекомендуется, поскольку эти свойства уже установлены браузером.
Это означает, что новые функции, определенные в HTML5, имеют неявную семантику ARIA по умолчанию, предоставляемую большинством веб-браузеров. Несмотря на этот факт, нельзя предполагать, что используемый вами HTML-элемент уже сопоставлен с ARIA без предварительного его поиска. Имея это в виду, я предлагаю вам добавить роли ARIA на время, чтобы оставаться на более безопасной стороне шкалы — даже если это означает необходимость писать избыточный код.
Избыточность в ARIA
Интерактивные элементы в HTML5 — это те, которые категорически предназначены для взаимодействия с пользователем (например, большинство элементов формы или элемент button Добавление неявных ролей ARIA по умолчанию к интерактивным элементам HTML5 не повлияет на них. Это не будет иметь пагубных последствий, но, как уже упоминалось, отказ от добавления ролей ARIA не нанесет вреда. Интерактивные элементы не требуют ролей ARIA, поэтому рекомендуется не добавлять их, чтобы сэкономить время разработки.
Интерактивные элементы должны иметь доступные имена. Это означает, что вы должны присвоить свойству доступного имени доступного имени API некоторое значение. Это можно объяснить лучше с помощью кода:
<label>title</label>
<input type="text">
Приведенный выше код может быть записан более соответствующим образом:
<label for="title">title</label>
<input type="text" id="title">
Во второй строке кода упоминаются как видимые, так и доступные метки. Включение атрибутов forid
Примеры избыточности
Давайте рассмотрим несколько примеров избыточности при использовании ARIA. И имейте в виду, что приведенные ниже примеры являются примерами кода, который следует избегать .
Неявные роли по умолчанию для интерактивных элементов
<button role="button">Submit</button>
В этом случае role Сам элемент button
Роль ARIA вместе с родными аналогами HTML
<div hidden aria-hidden="true">
В этом примере используется hiddenaria-hidden
ARIA добавил к давно реализованным конструктивным элементам
<h1 role="heading" aria-level="1">I am a Heading</h1>
В этом случае и rolearia-level
ARIA со структурными элементами HTML5
Появление HTML5 привело к появлению нового набора структурных элементов и элементов секционирования, которые по умолчанию отображают неявную семантику в роли ARIA.
Например:
-
asiderole=complementary -
articlerole=article -
mainrole=main
Здесь важно отметить, что некоторые из этих вышеупомянутых элементов отображаются только на роли ARIA при определенных условиях. Например, footerrole=contentinfoarticlesection Аналогично, headerrole=banner
Из этих примеров очевидно, что браузер будет предоставлять неявную семантику по умолчанию самостоятельно, где бы они ни реализовывались.
Поддержка браузера
Структурные и секционные элементы, которые были недавно добавлены в HTML5, находятся в хорошем месте. Наиболее широко используемые браузеры реализуют неявную семантику по умолчанию — или, в случае Internet Explorer, находятся в процессе реализации.
Для получения дополнительной информации о реализации в браузере функций ARIA в HTML5, доступность HTML5 является отличным ресурсом для начала работы.
Завершение
В заключение этой статьи я бы хотел оставить краткое резюме:
- Не используйте роли, свойства или состояния ARIA, если функция определена в Рекомендации HTML5
- Многие элементы HTML5 имеют неявную семантику ARIA по умолчанию.
- За исключением Internet Explorer, поддержка ARIA очень хороша в современных браузерах.
Что вы думаете о добавлении атрибутов ARIA к элементам HTML? Если есть что-то, что я пропустил, пожалуйста, оставьте свои предложения в комментариях.