Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
В главе 2 и главе 3 мы рассмотрели значительную часть, объясняющую, как наши страницы могут стать более семантическими и потенциально более доступными, используя новые семантические элементы HTML5. Однако одной только улучшенной семантики часто недостаточно, чтобы сделать сложное веб-приложение полностью доступным.
Чтобы контент и функциональность наших страниц были как можно более доступными для наших пользователей, нам необходимо продвижение, которое предоставляет WAI-ARIA, расширяя возможности HTML5. Мы не будем углубляться в подробное обсуждение WAI-ARIA — эта тема может охватить много глав — но мы решили, что важно упомянуть об этом здесь, чтобы вы знали о своих возможностях.
WAI-ARIA расшифровывается как Богатые интернет-приложения, доступные по инициативе веб-доступности Обзор WAI-ARIA на сайте W3C объясняет это так:
[…] Способ сделать веб-контент и веб-приложения более доступными для людей с ограниченными возможностями. Это особенно помогает с динамическим контентом и расширенными средствами управления пользовательским интерфейсом, насыщенными JavaScript, разработанными с использованием Ajax, HTML, JavaScript и связанных технологий
Пользователи, использующие технологию чтения с экрана или неспособные использовать мышь, часто не могут использовать определенные функции веб-сайта и веб-приложения, например ползунки, индикаторы выполнения и интерфейсы с вкладками. С WAI-ARIA вы можете справиться с этими недостатками на своих страницах, даже если контент и функциональность находятся в ловушке сложной архитектуры приложений. Таким образом, части веб-сайта, которые обычно были бы недоступны, могут быть сделаны доступными для пользователей, которые зависят от вспомогательных технологий.
Как WAI-ARIA дополняет семантику
WAI-ARIA назначает роли элементам и присваивает этим ролям свойства и состояния . Вот простой пример:
<li role="menuitemcheckbox" aria-checked="true">Sort by Date</li> Приложение может использовать элемент списка в качестве связанного элемента для сортировки содержимого; однако без роли и атрибутов, aria-checked Одна только семантика (в данном случае элемент списка) ничего не говорит. Добавляя эти атрибуты, вспомогательное устройство может лучше понять, для чего предназначена эта функция.
Для семантических элементов, например headerh1nav Вместо этого их следует использовать для элементов, функциональность и назначение которых нельзя сразу отличить от самих элементов (или для элементов, которые практически не поддерживают доступность в одном или нескольких основных браузерах).
Современное состояние WAI-ARIA
Спецификация WAI-ARIA, как и HTML5, все еще совершенствуется, поэтому эти технологии пока не обеспечивают всех тех преимуществ, которые нам нужны. Хотя мы описали, как WAI-ARIA может расширять семантику элементов нашей страницы, может потребоваться включить роли WAI-ARIA в элементы, которые уже выражают свое значение в своих именах, поскольку вспомогательные технологии не поддерживают все новой семантики HTML5 пока нет. Другими словами, WAI-ARIA может служить своего рода временным промежутком, чтобы обеспечить доступность страниц HTML5, пока программы чтения с экрана догоняют.
Давайте посмотрим на навигацию по сайту, например:
<nav role="navigation"> <ul>… </ul>
</nav>
Казалось бы, здесь мы удваиваемся: элемент nav navigation Во многих случаях такое удвоение часто будет необходимо. В случае элемента nav
Означает ли это, что WAI-ARIA станет избыточной после полной поддержки семантики и доступности HTML5? Нет. В WAI-ARIA есть роли без соответствующих элементов HTML5; например, роль таймера . Хотя вы можете представить таймер, используя элемент time
Чтобы программа чтения с экрана могла получить доступ к ролям WAI-ARIA, браузер должен предоставить их через API специальных возможностей. Это позволяет программе чтения с экрана взаимодействовать с элементами так же, как и при доступе к элементам управления рабочего стола.
Поддержка браузером функций ARIA растет и в настоящее время очень хороша. Все последние версии браузеров поддерживают WAI-ARIA хотя бы частично. На веб-сайте Paciello Group можно найти достаточно современное руководство по поддержке специальных возможностей, таких как WAI-ARIA, в браузерах на некоторых ОС.
Наконец, стоит отметить, что не все пользователи, которые могли бы извлечь выгоду из ролей WAI-ARIA, используют их. В январе 2014 года WebAIM (Web Accessibility In Mind) провела свой пятый опрос пользователей программы чтения с экрана, который показал, что около 28% участников редко или никогда не перемещались по веб-страницам с помощью ориентиров ARIA. Хорошей новостью является то, что количество пользователей, использующих ориентиры ARIA, увеличивается. В 2010 году в аналогичном опросе более 50% либо не использовали, либо не знали о существовании ролей ARIA.
Короче говоря, WAI-ARIA имеет довольно хорошую поддержку, и вы не повредите документам HTML5, включив эти атрибуты. Они проходят проверку разметки в HTML5 и, хотя все преимущества еще предстоит увидеть, со временем они только возрастут.
Как уже упоминалось, полный учебник по всем ролям WAI-ARIA выходит за рамки этой книги, но если вы заинтересованы в получении дополнительной информации, мы рекомендуем в первую очередь официальную спецификацию . W3C также собрал краткое руководство и руководство по авторскому праву .
Вы также можете проверить Введение Стефана Макса в WAI-ARIA на SitePoint. Наконец, вам может пригодиться обзор доступности веб-сайта HTML5, поддерживаемого экспертом по специальностям Стивом Фолкнером, который в виде диаграммы суммирует, как разные браузеры обрабатывают семантические элементы HTML5 с точки зрения доступности.