Применение WAI-ARIA Landmarks — 2013

Перевод статьи: Using WAI-ARIA Landmarks — 2013.
Автор: Steve Faulkner.

То, на что мы зачастую не обращаем внимание.

Внедрение ARIA Landmarks, (*так называемых «маркеров», «ориентиров» или «меток») в ваш, уже функционирующий сайт или проект, который находится в стадии разработки, наделит его расширенными навигационными возможностями и сделает структуру его контента более понятной для пользователя. Со временем необходимость в детальном сопровождении исходного кода ARIA метками будет снижаться в связи с тем, что в браузерах улучшится поддержка новых HTML элементов, в семантику которых включен функционал меток. На данный момент ARIA ориентиры достаточно широко поддерживаются браузерами и экранными дикторами.

Как именно роли ARIA Landmark помогают пользователям специализированных программ чтения с экрана.

В демонстрационном видео Леони Ватсон показывает, как в действительности предусмотренные технологией ARIA Landmark роли дают возможность пользователям программ чтения с экрана понять назначение различных областей веб-страницы, таких, например, как навигационный блок или секция основного контента документа.

Роли ARIA Landmark.

Спецификацией WAI ARIA вводится атрибут role («роль»), выполняющий функции меток landmark (или «маркеров», «ориентиров»), которые в зависимости от применяемого в качестве их значения ключевого слова по разному идентифицируют области документа. Так называемые роли представляют собой метод программной и кроссбраузерной идентификации общепринятых в веб-разработке разделов контента страницы. На данный момент их использование не ограничено и допустимо в любом существующем виде (X) HTML разметки. Это позволяет технологиям обеспечения доступности (AT — Accessible Technologies) предоставлять их пользователям возможность быстрого и однозначного определения разделов контента веб-страницы и навигации по ней с их же помощью.

Следующие разъяснения и определения взяты из Рекомендаций по практическому использованию WAI-ARIA (WAI-ARIA Best Practices / Редакционная версия спецификации от 6 августа 2010):

Так называемые метки (landmarks) являются ни чем иным как революционным усовершенствованием примитивного метода прямого доступа к основному контенту, который применялся до появления WAI-ARIA. И по возможности именно они должны использоваться с целью идентификации разделов.


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

Благодаря предоставлению навигационных landmarks меток открывается также ряд ключевых преимуществ. Вы, к примеру, можете назначить дополнительные комбинации клавиш для перемещения фокуса непосредственно к интересующим вас разделам веб-страницы, и это будет работать на всех сайтах, содержащих разметку с поддержкой WAI-ARIA ролей. Навигационные возможности, предоставляемые этой технологией, будут доступны на любом устройстве. Так допустим, на PDA (Personal Digital Assistant) (*Карманный персональный компьютер — КПК) вы можете назначить имеющиеся на устройстве клавиши для перехода к требуемому разделу документа.

Способы применения landmark ролей.

Добавление Landmark ролей в уже существующие либо новые веб-страницы является абсолютно безболезненным процессом. Просто добавьте в элемент-контейнер атрибут role и присвойте ему значение, максимально соответствующее контенту данного контейнера. Вот так, например:

<main role="main">

Взгляните на пример страницы, размеченной с использованием landmark ролей.

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

Рич Швердфегер

Добавление Landmark ролей в WordPress.

Процедура добавления ролей в функционирующий на WordPress блог у меня лично заняла около 20 минут времени. В ходе которой я внес небольшие изменения в следующие WP файлы:

  • sidebar.php – включил в него три типа меток: complementary, navigation (дважды) и search;
  • header.php – добавил метку banner;
  • single.php – добавил метку main;
  • footer.php – добавил метку contentinfo;
  • index.php – добавил метку main.

Результаты произведенных изменений можно увидеть с помощью такого инструмента как Juicy Studio Accessibility Toolbar, позволяющего визуализировать имеющиеся в документе landmarks маркеры:

Поддержка Landmark ролей.

Landmark роли поддерживаются следующими приложениями: JAWS, NVDA, ORCA, Chromevox, Window Eyes, VoiceOver, а также расширением Firefox для пользователей отдающих предпочтение клавиатуре.

Метки Landmark поддерживаются в JAWS начиная с десятой версии в виртуальном режиме навигации, предусматривающем управление с помощью клавиатуры вот таким образом:

  • Следующая метка – клавиша ; — (точка с запятой).
  • Предыдущая метка — shift + ;.
  • Список меток — ctrl + ins + ;.

При перемещении по меткам с использованием клавиши ;, программа озвучивает значение атрибута role, то есть имя метки с последующим словом «landmark». Достигнув таким образом требуемого маркера, пользователь может перейти к контенту этого раздела, нажав для этого клавишу (перемещение вниз). Если выбранный маркер представляет раздел, содержащий в себе другие промаркированные области (то есть метка содержит в себе дочерние метки), то он не задействуется при циклическом перемещении по внешним маркерам документа (осуществляемого путем нажатия клавиш ; и shift + ; ), а включается в список, доступ к которому производится с помощью комбинации клавиш ctrl + ins + ;.

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

Тестирование ARIA Landmark ролей.

Детальная информация касательно поддержки ролей со стороны технологий обеспечения доступности документов (AT) содержится в сопроводительном к стандарту документе "ARIA Landmark Role Tests" (Ноябрь 2011 года).

А на что способны секционные элементы HTML5 стандарта.

Введенные в новой HTML5 спецификации секционные элементы лишь частично перекрывают функционал ARIA Landmark ролей, и в большинстве случаев HTML5 стандарт не содержит эквивалента предусмотренным в WAI-ARIA спецификации ролям. А если такой эквивалент все же имеет место и поддержка определенного функционала обеспечена со стороны обеих стандартов, то для реализации семантической идентификации разделов документа рекомендуется дублировать семантику секционных элементов путем включения в их состав соответствующих ARIA ролей, которые на данный момент реально поддерживаются.

Если, например, вы хотите использовать HTML5 элемент <nav>, то поместите в него атрибут role="navigation", который будет гарантом семантически корректного предоставления информации AT технологиями своим пользователям. В дальнейшем, когда в этих технологиях будет включена поддержка новых секционных элементов (подобных <nav>), из него можно будет удалить метку, так как она больше не понадобится.

<nav role="navigation">

Пример совместного использования структурных HTML5 элементов и ARIA маркеров можно увидеть в разметке сайта Брюса Лоусона.

Сравнение возможностей ARIA Landmark ролей и секционных HTML5 элементов.

ARIA Landmark рольHTML5 секционный элемент

role="application" представляет область страницы, в которой находится элемент программного обеспечения, выполняющий ряд задач, предусмотренных включенным в документ функционалом. Находясь на маркере application технологии обеспечения доступности AT должны предоставить пользователю набор навигационных клавиш, при помощи которых он смог бы перемещаться по разделу и при необходимости управлять приложением.

Примечание: Настоятельно рекомендуется использовать атрибут role="application" только в исключительных случаях. Подробности смотри в документе «Using role="application"».

Эквивалентных HTML5 элементов нет.
Рекомендуется использовать семантически нейтральный элемент, такой как <div>.

role="banner" — определяет область, содержащую основной заголовок или внутреннее заглавие документа. В большинстве случаев, контент элемента с маркером banner рассматривается в масштабе всего сайта, а не в рамках отдельной страницы. Данный контент, зачастую содержит такие вещи как логотип спонсора сайта, заглавие страницы и инструмент поиска по сайту. Обычно этот раздел занимает верхнюю область страницы по всей ее ширине.
Примечание: В рамках документа или приложения разработчики должны использовать не более одного элемента с меткой banner.

Нет аналога среди HTML5 элементов.
Атрибут role="banner" рекомендуется применять только для одного элемента <header>, используемого в соответствии с требованиями, предъявляемыми к атрибуту role="banner".

role="complementary" — вспомогательный раздел документа, который не теряет своего смыслового назначения даже после его отделения от основного контента документа. В роли такого контента может выступать различного рода информация. Так, допустим, применительно к веб-ресурсу типа портал, такой раздел может содержать данные о погоде, времени, биржевых сводках, ссылки на тематические статьи, а также другую сопутствующую и релевантную основному контенту информацию. Если же контент раздела является абсолютно независимым, то к нему необходимо применять атрибут role с маркером более общего назначения.

<aside> — элемент, представляющий раздел документа, контент которого имеет то или иное отношение к окружающей его информации, но может рассматриваться отдельно от нее в качестве самостоятельного элемента. В печатных изданиях подобные секции представляют собой различные врезки.

role="contentinfo" — метаданные, относящиеся к родительскому документу. Примером таких метаданных могут быть сноски из текста, авторская информация, ссылки на документы о правах собственности и тому подобная информация.
Примечание: В рамках документа или приложения только один элемент может иметь маркер contentinfo.

Аналога в HTML5 спецификации нет.
Можно применять только к одному элементу <footer> на странице, полностью отвечающему требованиям, предъявляемым к использованию атрибута role="contentinfo".

role="form" — область документа, в которой представлен набор элементов пользовательских форм, часть которых может предназначаться для ввода данных и дальнейшей отправки их на сервер для обработки.

Этот маркер рекомендуется применять к семантически нейтральным элементам типа <div> или к элементу формы <form>.

role="main" — основное содержимое документа. Этот атрибут маркирует раздел, в котором находится контент, напрямую относящийся к основной теме документа, либо отталкивающийся от нее с целью ее дальнейшего развития. Применительно к приложению, таким образом представляется основная функциональность. В рамках документа или приложения разработчиком должно быть предусмотрено не более одного элемента с атрибутом role="main".
Примечание: В пределах любого документа или приложения может применяться лишь один элемент с атрибутом role="main".

Элемент <main> представляет основной документ, находящийся в рамках тела (элемента <body>) документа или приложения. Контент, относящийся к элементу <main>, напрямую относится к основной теме документа, либо отталкивается от нее с целью ее дальнейшего развития. Применительно к приложению, данный элемент представляет основную функциональность.

role="navigation" — представляет ряд навигационных элементов (обычно ссылок), предназначенных для навигации по странице или ведущих на тематические статьи.

Элемент <nav> образует секцию документа, ведущую на другие страницы или в другие области текущей страницы. Это, как правило, раздел, содержащий навигационные ссылки.

role="search" — предусмотренный на странице поисковый инструмент. Обычно этой меткой маркируется форма, используемая для ввода поискового запроса в рамках веб-ресурса или в масштабах Интернета, посредством определенной поисковой системы.

Нет эквивалентов среди HTML5 элементов.
Рекомендуется применять к семантически нейтральному элементу, такому как <div> или элемент формы, если он включает исключительно поисковый функционал и пояснения к нему.

* Примечание переводчика.

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

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