Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки (Стори, Уолтер) - страница 61

Я ни в коем случае не позиционирую себя как эксперта по стандартам доступности. Но очень постараюсь внятно и серьезно объяснить вам, почему важность стандарта 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 – хороший способ сделать контент и контекст вашего существующего сайта более наглядным. Потом, когда вы решите усовершенствовать сайт, вы сможете прибегнуть к новым тегам.