Я ни в коем случае не позиционирую себя как эксперта по стандартам доступности. Но очень постараюсь внятно и серьезно объяснить вам, почему важность стандарта WAI-ARIA не ограничивается только вопросами доступности. Если вы когда-нибудь пользовались блочными элементами, которые описаны в этом разделе, то, скорее всего, встречались с чем-то вроде этого:
>
>
>Тракторы: Интерактивное руководство
>
>
>
>Обслуживание тракторов
>
>
>
>Заметили? У документа два тега header, и оба использованы правильно. Вся проблема в CSS:
>hheader {
>margin: 0 2em;
>}
Этот селектор элемента описывает оба тега header. Мы могли бы использовать селектор наследования (т. е. >body
> >header
), но это кажется немного тяжеловесным, не говоря уже о том, что верхний заголовок может стать «шапкой» целого сайта. Здесь мы можем выгодно использовать роль WAI-ARIA, просто добавив >role=”banner”
в HTML:
>
>
>Тракторы: Интерактивное руководство
>
>
>
>Обслуживание тракторов
>
>
>
Этот ролевой атрибут говорит о том, что элемент >
– «глобальный» и его содержимое лучше применять ко всему сайту, а не только к текущей странице. А благодаря простому селектору атрибутов, несложно задать стиль:
>header [role=”banner”] {
>margin: 0 2em;
>}
Из-за того, что теги >header
и >footer
могут использоваться во многих местах, пожалуй, мы бы остались без тега для основного контента. И снова спасибо ролям ARIA, которые предоставляют богатый выбор.
Добавляя роль >“main”
к >article
(таким образом, получаем >
), мы можем легко определить, что основной контент для текущего документа расположен внутри article. (В примерах выше вы могли заметить, что тег >h1
используется в верхнем заголовке (корневом), а >h2
– во вложенном.) В сочетании они в лучшем виде описывают иерархию документа).
Вы, вероятно, уже отметили изящество этого подхода. Описание контента становится более детальным, и мы можем применять стили к нашим новым тегам, не особо напрягаясь. Третья из ролей ARIA – это >contentinfo
, которая часто применяется для конфиденциальных заявлений, уведомления об авторских правах и общей информации о текущей странице сайта. (Некоторые называют это «метаинформацией»).
И, наконец, четвертая и очень полезная роль ARIA, про которую нужно знать, – это navigation. Она легко отличает навигационный раздел от обычного старого списка ссылок. Добавление ролей ARIA – хороший способ сделать контент и контекст вашего существующего сайта более наглядным. Потом, когда вы решите усовершенствовать сайт, вы сможете прибегнуть к новым тегам.