Некоторые вещи, которые сегодня делают с помощью JavaScript, действительно удивительны. Интернет сам по себе еще молод, но за свою короткую историю он пережил несколько эволюций — возможно, наиболее значительным является взрыв невероятных веб-приложений, появившихся после AJAX. Хотя был неудачник, и это была доступность . Но теперь мы достигли точки, когда доступность наверстывает упущенное благодаря разработке Инициативы веб-доступности «Доступные богатые интернет-приложения» (WAI ARIA).
Принципы ARIA
Ядром спецификации ARIA является набор семантики атрибутов для обеспечения доступности интерактивного контента для вспомогательных технологий. В конце концов, как пользователь программы чтения с экрана должен знать, что представляет следующая разметка?
<label>
<button>25%</button>
</label>ARIA добавляет жизненно важную роль и информацию о состоянии, которая делает вещи понятными, как показано ниже.
<label>
<button role="slider"
aria-orientation="horizontal"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="25"
aria-valuetext="25%">25%</button>
</label>
ARIA позволяет создавать динамические интерфейсы, пользовательские виджеты и все различные компоненты современных веб-приложений таким образом, чтобы они были доступны для программ чтения с экрана и других технологий доступа, используя атрибуты данных, которые попадают в следующие три широкие группы.
- Атрибуты, которые описывают роль элемента, например,
dialogprogressbarslider - Атрибуты, которые описывают свойства элемента, такие как
aria-requiredaria-multiselectablearia-valuemax - Атрибуты, которые описывают состояния элемента, такие как
aria-selectedaria-hiddenaria-valuenow
Роль Арии
Для многих из вас, вероятно, вы больше всего знакомы с ARIA с основными ролями , которые можно использовать в любом варианте HTML для описания основных блоков контента:
<div role="main" id="content"></div>
<div role="complementary" id="sidebar"></div>
<div role="navigation" id="menu"></div>
<div role="contentinfo" id="footer"></div>
В HTML5 роли ориентиров ориентируются на основные структурные элементы:
<article role="main" id="content"></article>
<aside role="complementary" id="sidebar"></aside>
<nav role="navigation" id="menu"></nav>
<footer role="contentinfo" id="footer"></footer>
Использование ключевых ролей в дополнение к структурным элементам HTML5 является примером технологии мостового соединения — временного решения в интересах вспомогательных технологий текущего поколения, которые поддерживают роли ARIA, но еще не понимают семантику HTML5. ARIA была специально разработана для предоставления такого рода временного решения, и любой из текущих атрибутов ARIA может в конечном итоге быть заменен чем-то лучшим.
Формальные спецификации, такие как HTML5, занимают очень много времени — значительно дольше, чем разработчики, чтобы придумывать новые идеи. Стандарты могут реагировать только на то, что было сделано в прошлом году , а дальновидные разработчики гораздо больше заинтересованы в том, что мы делаем сейчас . Ария может преодолеть этот разрыв.
Доступно с клавиатуры Перетаскивание
Теперь перейдем к примеру, который использует перетаскивание, чтобы показать, как ARIA может добавить доступную семантику к обычным сценариям поведения. Не так давно считалось, что перетаскивание принципиально недоступно — взаимодействие, основанное на мышах, которое невозможно перевести на клавиатуру. Но ранние нововведения, такие как моя библиотека dbx, показали, что это можно сделать, подумав о том, для чего на самом деле нужны действия перетаскивания, а затем предоставив интерфейс клавиатуры, обеспечивающий тот же результат.
То, что мы называем перетаскиванием, на самом деле представляет собой два разных вида взаимодействия. Первый — это переупорядочение контента, когда элементы можно перемещать вверх и вниз для их сортировки. Второй — это захват и перемещение, например, перетаскивание файлов между папками. Библиотека dbx была разработана с учетом первого взаимодействия, а спецификация ARIA ориентирована на второе.
В следующей демонстрации перетаскивание реализовано тремя различными способами — с использованием атрибута draggabledraggable
Взаимодействие с клавиатурой основано на тех, которые рекомендованы в ARIA :
- Используйте Tab для перемещения между элементами.
- Нажмите пробел, чтобы выбрать элемент.
- Используйте Tab для перемещения между выпадающими целями.
- Нажмите Enter или Ctrl + M, чтобы переместить выбранный элемент в выбранную цель перетаскивания.
- Или нажмите клавишу Esc, чтобы отменить и отменить выбор элемента.
Клавиша пробела имеет смысл, потому что она уже используется для выбора переключателей и флажков. Кроме того, сочетание клавиш Ctrl + M не является интуитивно понятным и конфликтует с сочетанием клавиш « Свернуть до»
в Mac OS X. Мне кажется, что нажатие клавиши « Ввод» гораздо более очевидно и доступно, поэтому для компромисса оба варианта были реализованы. Демонстрация также содержит tabindex — использование динамических значений tabindex Каждая из целей перетаскивания в демонстрации представляет собой список, а каждый из перетаскиваемых объектов — элемент списка. Таким образом, в состоянии по умолчанию только элементы находятся в порядке табуляции:
<ul>
<li tabindex="0">1</li>
<li tabindex="0">2</li>
<li tabindex="0">3</li>
</ul>
<ul>
<li tabindex="0">4</li>
</ul>
После того, как вы выбрали элемент, списки должны располагаться в порядке вкладок, чтобы вы могли выбрать один из них в качестве цели удаления. Но в этот момент другие элементы больше не должны находиться в порядке табуляции, потому что вы не можете выбрать другой элемент, пока не закончите с текущим. В дополнение к установке tabindex="0" Это простая вещь, но это означает, что пользователю нужно всего несколько нажатий клавиш, чтобы найти нужную цель, вместо того, чтобы сначала пролистывать все остальные элементы!
<ul tabindex="0">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul tabindex="0">
<li>4</li>
</ul>
Принцип передвижного tabindexпрямо сейчас .
Добавление семантики ARIA
Как только мы получим поддержку клавиатуры, единственное, что нам нужно сделать для вспомогательных технологий, — это добавить два атрибута ARIA — aria-grabbedaria-droptarget Первый — это логический флаг, который указывает, был ли выбран элемент для перетаскивания, а второй — это логический флаг, который указывает, является ли данный элемент объектом перетаскивания. Таким образом, в состоянии по умолчанию элементы не захвачены, и нет активных целей удаления:
<ul aria-dropeffect="none">
<li aria-grabbed="false">1</li>
<li aria-grabbed="false">2</li>
<li aria-grabbed="false">3</li>
</ul>
<ul aria-dropeffect="none">
<li aria-grabbed="false" tabindex="0">4</li>
</ul>
Как только вы выбрали элемент, он становится захваченным, а родительские списки становятся объектами удаления.
<ul aria-dropeffect="move">
<li aria-grabbed="true">1</li>
<li aria-grabbed="false">2</li>
<li aria-grabbed="false">3</li>
</ul>
<ul aria-dropeffect="move">
<li aria-grabbed="false">4</li>
</ul>
Чтобы проиллюстрировать эти изменения, демоверсия включает версию с плавающими подсказками, которая показывает, как атрибуты меняются при каждом взаимодействии. В этом случае значение aria-droptargetmove Другие возможные значения включают в себя copylink
Ария ничего не делает
Хотя для атрибута aria-droptargetинформация для вспомогательных технологий, чтобы они могли сообщить пользователю, что произойдет. Сам атрибут вообще ничего не делает. Таким образом, ARIA не меняет способ создания веб-приложений, она просто предоставляет семантические атрибуты для их описания.
Еще один яркий пример того, где ARIA может (и должна) использоваться, — при динамическом обновлении страницы через AJAX, чего не понимали программы чтения с экрана до ARIA. Программы чтения с экрана используют своего рода виртуальный буфер , который является временным снимком текущей страницы, которую устройство фактически читает. Когда AJAX используется для загрузки нового контента и добавления его в DOM, виртуальный буфер не обновляется, и поэтому приложения AJAX первого поколения были недоступны для программ чтения с экрана.
ARIA решает эту проблему с помощью своего атрибута aria-live Например, если вы установите aria-live="assertive" Или, если вы установите aria-live="polite" Эти приоритеты основаны на том, что в данный момент делает пользователь, поэтому assertivepolite Считыватель экрана должен определить, как эти приоритеты проявляются в рабочем процессе пользователя.
С точки зрения разработчика, вам просто нужно подумать о том, насколько важно обновление. polite assertive
Вывод
ARIA не идеальна и еще не полностью реализована, но, тем не менее, я рекомендую вам попробовать использовать ее, когда это применимо. Все пользовательские виджеты и веб-приложения должны иметь как минимум базовую поддержку ARIA, потому что это делает разницу между некоторой доступностью и отсутствием вообще.
Если вы хотите узнать больше об использовании WAI ARIA, я бы порекомендовал Введение в WAI ARIA . JuicyStudio Gez Lemon и блог Paciello Group Стива Фолкнера также являются полезными закладками. В конце концов, вы обнаружите, что читаете спецификацию ARIA и практикуете авторинг (удачи в этом!)
Вы также можете скачать демо из этой статьи: