Применение 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 не будет опубликован. Обязательные поля помечены *