Улучшите доступность вашего сайта с помощью WAI-ARIA

Улучшите доступность вашего сайта с помощью WAI-ARIA

От автора: данная статья является выдержкой из книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луи Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру, а также купить цифровую версию.

В главах 2 и 3 мы рассказываем основы того, как сделать страницы более семантическими и потенциально более доступными с помощью новых семантических элементов HTML5. Однако улучшенной семантики зачастую бывает недостаточно, чтобы сделать сложное веб-приложение полностью доступным.

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

WAI-ARIA расшифровывается как Web Accessibility Initiative-Accessible Rich Internet Applications. На сайте W3C о WAI-ARIA пишут следующее: «… способ, как сделать веб-контент и веб-приложения более доступными для людей с ограниченными возможностями. Особенно хорошо работает с динамическим контентом и продвинутыми элементами интерфейса с сильной привязкой к JS, разработанных с помощью Ajax, HTML, JS и сопутствующих технологий

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

Как WAI-ARIA дополняет семантику

WAI-ARIA присваивает элементам роли, а ролям дает свойства и состояния. Простой пример:

<li role="menuitemcheckbox" aria-checked="true">Sort by Date</li>

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

В большинстве случаев для семантических элементов, например, header, h1 и nav атрибуты WAI-ARIA необязательны. Эти теги уже и так передают свое назначение. Данные атрибуты нужно использовать на тех элементах, чей функционал и назначение нельзя определить сразу (или на элементах с небольшой доступностью или вообще без нее в одном или более основных браузеров).

Текущее состояние WAI-ARIA

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

Разберем, например, меню сайта:

<nav role="navigation"> <ul>...</ul>
</nav>

Казалось бы, мы дублируем семантику: тег nav уже говорит, что набор ссылок внутри него выступает в роли меню, однако мы добавили WAI-ARIA роль navigation. Во множестве случаев такой тип дублирования будет обязательным. В случае с тегом nav на данный момент только браузер IE неправильно выставляет роль navigation, поэтому атрибут в данном случае необходим.

Значит ли это, что WAI-ARIA станет ненужным, когда семантика HTML5 и доступность будут полностью поддерживаться? Нет. В WAI-ARIA есть роли, не имеющие аналогов среди HTM5 тегов. Например, роль timer. Для имитации таймера в HTML5 можно использовать тег time и обновлять время через JS, однако это никак не говорит скрин ридеру, что это таймер. Он думает, что это просто статическое время.

Для передачи WAI-ARIA ролей в скрин ридер браузер должен передать их через API доступности. Это позволяет скрин ридеру взаимодействовать с тегами, как с нативными элементами управления компьютера.

Поддержка ARIA в браузерах растет, и на данный момент достигла хороших значений. Все новые версии браузеров, хотя бы частично, поддерживают WAI-ARIA. На сайте Paciello Group можно найти новейшее руководство по поддержке функций доступности наподобие WAI-ARIA в браузерах на определенных ОС.

Стоит также сказать, что не все пользователи, которые могли бы использовать WAI-ARIA, используют данную технологию. В январе 2014 WebAIM (Web Accessibility In Mind) провели свой пятый опрос по скрин ридерам, где выяснили, что 28% опрошенных редко или вообще не пользуются средствами ARIA для навигации по страницам. Среди хороших новостей можно отметить, что число пользователей, использующих WAI-ARIA, выросло. В 2010 году по результатам похожего опроса более 50% либо не использовать ARIA роли, либо не знали о них.

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

Дополнительные источники

Как я писал выше, объяснение всех ролей WAI-ARIA выходит за рамки данной книги, но если вам интересно, в первую очередь можем порекомендовать официальную спецификацию. На W3C есть сокращенный справочник и практическое руководство.

Можете ознакомиться со статьей Стефана Макса знакомство с WAI-ARIA на SitePoint. Также можете зайти на сайт HTML5 Accessibility, которым занимается эксперт по доступности Стив Фолкнер. Он построил таблицы с описанием поддержки семантических HTML5 тегов в браузерах с точки зрения доступности.

Редакция: Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

HTML5 и CSS3 с Нуля до Профи

Научись верстать сайты, используя все возможности HTML5 и CSS3, прямо сейчас

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree