Взгляд на веб-стандарты ARIA и доступность HTML-приложений
Действительно открытому и инклюзивному вебу нужны технологии, которые позволяют пользователям с ограниченными возможностями, опирающимся на вспомогательные технологии, наслаждаться динамическим веб-контентом и современными веб-приложениями. Веб-стандарты доступности W3C нацелены на то, чтобы наполнить Интернет доступными многофункциональными интернет-приложениями (ARIA), которые пользователи с ограниченными возможностями могут эффективно использовать.
ARIA является одним из многочисленных стандартов и руководств по доступности, опубликованных Web Accessibility Intitiative (WAI). Он обеспечивает дополнительную разметку, которая может быть легко вставлена в документы HTML. WAI-ARIA - это кроссплатформенное решение для нескольких устройств, ориентированное на открытую веб-платформу, поэтому нужно думать не только о веб-сайтах, но и об играх, цифровых развлечениях, здравоохранении, мобильных устройствах и других видах приложений..
В этом посте мы рассмотрим, как вы можете добавить доступ к своим HTML-документам с помощью стандартов WAI-ARIA..
ARIA Framework
Синтаксис HTML не всегда позволяет разработчикам правильно описывать элементы, определять их роли и определять отношения между ними. Хотя это редко является проблемой для посетителей, которые полностью владеют своими чувствами, это может помешать пользователям вспомогательных технологий понять, что происходит на экране, и изучить их варианты..
Это тот момент, когда ARIA приходит к нам на помощь, так как позволяет определить назначение различных элементов с помощью основные роли, и опишите их природу атрибуты с префиксом арии. Атрибуты с префиксом Aria имеют два типа: свойства которые описывают функции, которые менее вероятно изменятся в течение жизненного цикла страницы, и состояния которые предоставляют информацию о вещах, которые могут часто меняться из-за взаимодействия с пользователем.
Ориентир Роли
Ориентир роли являются наиболее известными формами модели ролей ARIA (другими являются абстрактные роли, роли виджетов и роли структуры документа). Роли ориентир позволяют разработчикам идентифицировать большие воспринимаемые регионы на веб-странице, что пользователи вспомогательных технологий могут захотеть получить быстрый доступ.
Существует 8 типов ролей ARIA, которые необходимо добавить в качестве атрибутов к соответствующим тегам HTML..
роль =”баннер”
Роль баннера предназначена для использования в основном для контента, который относится ко всему сайту, а не только к отдельным страницам. Обычно он добавляется в качестве атрибута в основной заголовок сайта для логотипа и другой важной информации для всего сайта. Важно, что вы можете использовать роль баннера только один раз в любых HTML-документах или приложениях..
роль =”главный”
Основная роль ориентира связана с основным содержанием документа. Его нельзя использовать более одного раза на любой HTML-странице. Это обычно следует за
роль =”навигация”
Роль навигации предназначена для указания области, содержащей элементы навигации, такие как ссылки и списки на сайте..
роль =”дополнительный”
Дополнительная роль ориентира описывает дополнительный контент, связанный с основным контентом сайта. Его необходимо поместить на уровень, аналогичный иерархии DOM, как Роль = «основной». Связанные посты, популярные статьи, последние комментарии - типичные примеры автономного дополнительного контента.
роль =”contentinfo”
Роль contentinfo информирует пользовательских агентов о наличии региона, в котором можно найти различные виды метаданных, такие как информация об авторских правах, правовые положения и заявления о конфиденциальности. Обычно используется для нижнего колонтитула сайта.
роль =”форма”
Роль ориентира формы указывает форму, ожидающую ввода пользователя. Для поисковых форм вы должны использовать Роль = «Поиск» вместо.
роль =”поиск”
Роль поиска довольно очевидна, она предназначена для того, чтобы помочь вспомогательным технологиям определить поисковую функциональность сайта..
роль =”приложение”
Вы можете использовать роль ориентира приложения для региона, который вы хотите объявить как веб-приложение, а не как веб-документ. Не рекомендуется включать его в традиционные веб-сайты, так как это намекает вспомогательным технологиям на переключение из обычного режима просмотра в режим просмотра приложений. Вы должны использовать эту важную роль только с большой осторожностью.
Штаты и свойства
В то время как роли позволяют вам определять значение тегов HTML, состояния и свойства предоставляют пользователю дополнительную информацию о том, как с ними взаимодействовать. Оба состояния и свойства помечены атрибуты с префиксом арии с синтаксисом aria- *.
Наиболее известные атрибуты ARIA - это, вероятно, обязательное свойство aria и проверенное состояние aria. Ария требуется имущество потому что это постоянная особенность элемента ввода (то есть пользователь должен заполнить его), в то время как проверенный aria является государство потому что флажок может часто менять свое значение из-за взаимодействия с пользователем.
Синтаксис атрибутов с префиксом арии
Состояния и свойства иногда принимают значения токенов (ограниченный набор предопределенных значений), например, свойство aria-live может иметь 3 различных значения: от, вежливый, утвердительный. Синтаксис в этом примере выглядит следующим образом:
В других случаях значения атрибутов с префиксом aria представлены строки, чисел, целые, Идентификационные ссылки или же истина / ложь ценности.
Как использовать ARIA States и свойства
1. Постройте отношения между элементами с атрибутами отношений
Используйте атрибуты отношений, чтобы указать отношения между различными элементами на вашем сайте, которые нельзя определить иначе из структуры документа. Например, ария-labelledby свойство идентифицирует элемент, который маркирует текущий элемент.
ария-labelledby - среди прочего - можно привязать заголовки к знаковым регионам ARIA следующим образом:
Это заголовок
Основное содержание…
2. Синхронизация состояний и свойств с жизненным циклом элемента
После того, как вы установите роль ориентира ARIA для воспринимаемой области на вашей HTML-странице, она может очень помочь вспомогательным технологиям, если вы измените ARIA-префиксные состояния и свойства дочерних элементов в соответствии с событиями, происходящими на экране. Это может иметь решающее значение, когда пользователи должны взаимодействовать с сайтом, например, заполнив форму или выполнив поисковый запрос..
3. Сопоставьте визуальный и доступный интерфейсы
Основное правило разработки специальных возможностей заключается в том, что текущее состояние пользовательского интерфейса всегда должно восприниматься вспомогательными технологиями. Например, если пользователь выбирает параметр в форме, он также должен быть выбран для вспомогательных технологий. Это может быть легко достигнуто путем использования выбранного состояния арии со следующим синтаксисом: .
Рекомендации W3C WAI-ARIA Authoring Practices могут дать вам много других замечательных идей о том, как правильно согласовать визуальный и доступный интерфейсы вашего сайта..
Не злоупотребляйте ARIA
Использование ролей и атрибутов ARIA иногда может быть излишним. Когда вы используете семантические теги HTML5, такие как или же
Например, нет необходимости использовать форма определяющая роль, чтобы определить
Так что, если вы уже добавили скрытый HTML-атрибут для ввода формы, нет необходимости добавлять ария-скрытый состояние, так как браузер включает его по умолчанию.
