CSS-live.ru

Про пояса 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 — там, где они реализованы — семантика по умолчанию теперь тоже «видна» большинству браузеров.

В спецификации 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-ролям (для некоторых — лишь при определенных условиях):

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

Хотя элемент 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. Это тоже может быть интересно:

4 комментария

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

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

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

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

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

  2. Здравствуйте, дайте совет пожалуйста по поводу семантики. У меня сайт вопросов и ответов, в нём сами ответы на отмечены как role=article, а какой атрибут установить для информации об ответов (автор|дата|номер ответа|тревога). Мне известно, что по правилам используют тег <footer>, но беда в том но его не понимает робот Яндекса, а role=»contentinfo», который Яндекс понимает, рекомендуют использовать не более одного раза на странице, а у меня уже отмечен этим атрибутом подвал сайта. Что указать? Сам склоняюсь к contentinfo.

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

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

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