Про пояса HTML и подтяжки ARIA: неявная ARIA-семантика по умолчанию, которую от вас хотели скрыть

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

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

belt-braces

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

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

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

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

Спецификация HTML включает такое замечание:

В большинстве случаев установка ARIA-атрибута role и/или атрибутов aria-*, которые соответствуют неявной ARIA-семантике по умолчанию, не требуется и не рекомендуется, поскольку эти свойства уже установлены браузером.

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

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

<button role=”button”>press me</button>

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

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

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

<h1 role=”heading” aria-level=”1″>heading text</h1>

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

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

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

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

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

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

Итого

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

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

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

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

(ARIA в HTML)

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

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

Некоторые возможности не вошли в HTML5, но вернулись в HTML 5.1 (из HTML5 их убирали как недостаточно реализованные), например, элементы details и summary или dialog. Для таких элементов при использовании полифилов хорошо и полезно добавить подходящую семантику по умолчанию посредством ARIA.

 

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

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

3 Комментарии

  1. Алексей

    Не очень понятна мысль в статье. Использование ролей устарело, используйте классы? Или?…

    1. SelenIT (Автор записи)

      Стив призывает не указывать явно те роли, которые уже назначены элементам неявно. По крайней мере для тех из них, которые уже прочно прижились и поддерживаются во всех браузерах, скринридерах и т.п.

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

      1. Алексей

        Стив призывает не указывать явно те роли, которые уже назначены элементам неявно.

        — не много ли мыслей, для одной статьи? :-)

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.