Перевод статьи Стива Фолкнера «On HTML belts and ARIA braces» с сайта html5doctor.com

Надо ли добавлять HTML-элементам атрибуты ARIA role, чтобы раскрыть их семантику — один из тех вопросов, что всплывают с завидным постоянством. Ответ — «может быть» для некоторой части элементов, но обычно (и чем дальше, тем больше) — «нет».

Патрик Лауке демонстрирует необходимейшие предметы гардероба последних сезонов: повседневную майку-поло HTML5 в сочетании с поддерживающим поясом [button] и подтяжками [role].

Для большинства элементов ARIA-роли ничего не добавляют к семантике по умолчанию

Иногда семантику HTML-элемента можно выразить ролью, состоянием или свойством ARIA. Это просто адски известно как «неявная ARIA-семантика по умолчанию» элемента.

Ни одному из элементов, описанных в HTML4, не нужно добавлять ARIA-роли, чтобы раскрыть их семантику по умолчанию. Добавлять ARIA-роли — напрасный труд, и может доставить вам или еще кому-то немало мучений. У новых возможностей, определенных в HTML5 — там, где они реализованы — семантика по умолчанию теперь тоже «видна» большинству браузеров.

В спецификации ARIA в HTML есть такое замечание:

Веб-разработчики не должны (MUST NOT) использовать ARIA-атрибуты role и aria-* так, чтобы это противоречило семантике, описанной в таблице § 2. Требования для соответствия документов стандарту при использовании ARIA-атрибутов в HTML. Веб-разработчикам не следует (SHOULD NOT) задавать ARIA-атрибутам role и aria-* значения, совпадающие с неявной ARIA-семантикой по умолчанию, определенной в этой таблице.

Некоторые примеры избыточной ARIA

Добавление неявных ролей по умолчанию интерактивным элементам, перечисленным в рекомендации HTML5 — пустая трата времени:

<button role=”button”>нажми меня</button>

Добавление ARIA-состояний или ARIA-свойств впридачу к их «родным» аналогам в HTML — пустая трата времени:

<input type=”text” required aria-required=”true”>
<div hidden aria-hidden=”true”>

Добавление ARIA-состояний или ARIA-свойств давно реализованным структурным элементам — пустая трата времени:

<h1 role=”heading” aria-level=”1″>текст заголовка</h1>

Что насчет как бы новых структурных элементов HTML5?

HTML5 определил новый набор структурных и секционных элементов с неявной семантикой по умолчанию, которая соответствует ARIA-ролям (для некоторых — лишь при определенных условиях):

• article соответствует role=article
• aside соответствует role=complementary
• footer соответствует role=contentinfo (в пределах элемента <span class="pln">body</span>)
• header соответствует role=banner (в пределах элемента <span class="pln">body</span>)
• main соответствует role=main
• nav соответствует role=navigation
• section соответствует role=region (если у элемента <span class="pln">section</span> есть доступное имя).

Это означает, что там, где это реализовано, браузер сам раскроет неявную семантику этих элементов по умолчанию, так что вам не придется это делать.

Хотя элемент main — новичок по сравнению с другими, ему больше не нужно добавлять role, поскольку его семантика для доступности реализована одновременно с другими аспектами его реализации в браузерах (за исключением IE).

История с реализацией неявной семантики по умолчанию

Для структурных элементов, впервые введенных в HTML5, в целом это история со счастливым концом. Мы находимся на этапе, когда все современные браузеры (которые поддерживают доступность) реализовали семантику по умолчанию.

Итого

В общем, всё, что описано в Рекомендации HTML5, не нуждается в атрибутах роли, состояния или свойства ARIA. Так что не делайте этого, это лишь еще одно место усложнения кода и потенциальных проблем без толку.

Для как бы новых структурных элементов

Ввиду более надежной поддержки семантики структурных элементов (за вычетом алгоритма схемы документа, но это совсем другая, отдельная история), я полагаю, веб-разработчикам стоит подумать о том, чтобы отбросить старый подход с HTML-поясами и ARIA-подтяжками. Для этого в HTML любое использование неявной семантики по умолчанию стало нормативным требованием «не следует» (SHOULD NOT):

Неявная ARIA-семантика по умолчанию — использовать не следует.

(ARIA в HTML)

Это не значит, что вам больше нельзя так делать, но спецификация отговаривает вас от этого (т.е. это не отмененный, но устаревший подход). Так что в ближайшем будущем, когда вы будете проверять HTML на соответствие стандарту, инструмент проверки выставит предупреждение на каждую найденную ARIA-роль, совпадающую с неявной семантикой по умолчанию для HTML-элементов.

Для элементов, определенных в HTML, но еще не реализованных единообразно

Как пример — элемент dialog. Для таких элементов, используемых с полифилами, добавлять подходящую семантику по умолчанию посредством ARIA хорошо и полезно.

Эту статью написал Стив Фолкнер. Австралиец, живущий в Лондоне, работает в The Paciello Group, известной консалтинговой фирме по веб-доступности, и был одним из главных редакторов спецификации HTML5 в W3C

P.S. Это тоже может быть интересно:

• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• Не боритесь с каскадом, управляйте им!
• Голограммы, пленочные засветки и шейдеры на чистом CSS