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

Ария является одним из многочисленных стандарты доступности и руководящие принципы опубликовано Инициативой веб-доступности (WAI). Он обеспечивает дополнительную разметку, которая может быть легко вставлена в документы HTML. WAI-ARIA – это кроссплатформенное решение для кросс-устройств, которое предназначается для открытой веб-платформыпоэтому не только о веб-сайтах, но и об играх, цифровых развлечениях, здравоохранении, мобильных устройствах и других приложениях.

В этом посте мы рассмотрим, как вы можете добавить доступ к своим HTML-документам с помощью стандартов WAI-ARIA.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

ARIA Framework

Синтаксис HTML не всегда позволяет разработчикам правильно описывать элементы, определять их роли и определять отношения между ними. Хотя это редко является проблемой для посетителей, которые полностью владеют своими чувствами, это может помешать пользователям вспомогательных технологий понять, что происходит на экране, и изучить их варианты.

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

Ориентир Роли

Ориентир роли являются наиболее известными формами ARIA Роли Модель (другие – абстрактные роли, роли виджетов и роли структуры документа). Ориентир роли позволяют разработчикам определять на веб-странице большие ощутимые области, к которым пользователи вспомогательных технологий могут стремиться получить быстрый доступ.

Существует 8 типов ролей ARIA, которые необходимо добавить в качестве атрибутов к соответствующим тегам HTML.
Роль =»баннер»
баннер Роль предназначена для использования в основном для контента, который относится ко всему сайту, а не только к отдельным страницам. Обычно он добавляется в качестве атрибута в основной заголовок сайта для логотипа и другой важной информации для всего сайта. Важно, что вы можете использовать роль баннера только один раз в любых HTML-документах или приложениях.
Роль =»основной»
главный Роль ориентира связана с основным содержанием документа. Его нельзя использовать более одного раза на любой HTML-странице. Это обычно следует за

div role=”main”> синтаксис или в HTML5 более семантический

, Последний был добавлен в спецификации W3C с целью сопоставления основной роли ориентира ARIA с семантическим элементом HTML.
Роль =»навигация»
навигация роль предназначена для указания области, содержащей элементы навигации, такие как ссылки и списки на сайте.
Роль =»комплементарный»
дополнительный Роль ориентира описывает дополнительный контент, связанный с основным контентом сайта. Его нужно поместить на уровень, аналогичный иерархии DOM, как role = “main”. Связанные посты, популярные статьи, последние комментарии – типичные примеры автономного дополнительного контента.
Роль =»contentinfo»
contentinfo Роль информирует агентов пользователя о наличии региона, в котором можно найти различные типы метаданных, такие как информация об авторских правах, правовые положения и заявления о конфиденциальности. Обычно используется для нижнего колонтитула сайта.
Роль =»форма»
форма Роль ориентира указывает на форму, ожидающую ввода пользователя. Для поисковых форм вы должны использовать role = “search”.
Роль =»Поиск»
поиск Роль довольно понятна, она предназначена для того, чтобы помочь вспомогательным технологиям определить функциональность поиска на сайте.
Роль =»применение»
Вы можете использовать применение Роль ориентира для региона, который вы хотите объявить как веб-приложение, а не как веб-документ. Не рекомендуется включать его в традиционные веб-сайты, поскольку это намекает на вспомогательные технологии для перехода из обычного режима просмотра в режим просмотра приложений. Вы должны использовать только эту важную роль с большой осторожностью,

ИЗОБРАЖЕНИЕ: Ресурсы доступности Sky.com

Штаты и свойства

Хотя роли позволяют вам определять значение тегов HTML, состояния и свойства предоставить пользователю дополнительную информацию о том, как взаимодействовать с ними. И состояния, и свойства помечаются атрибутами с префиксом aria с синтаксисом aria- *.

Наиболее известные атрибуты ARIA, вероятно, ария-требуется собственность и ария проверено штат. Aria-required – это свойство, поскольку оно является постоянной функцией элемента ввода (т. Е. Пользователь должен заполнить его), в то время как aria-checked является состоянием, поскольку флажок может часто менять свое значение из-за взаимодействия с пользователем.

Синтаксис атрибутов с префиксом Aria

Состояния и свойства иногда принимают значения токенов (ограниченный набор предопределенных значений), например ария-живой свойство может иметь 3 различных значения: от, вежливый, утвердительный, Синтаксис в этом примере выглядит следующим образом:

div id=”some-id” class=”some-class” aria-live=”assertive”>

div>,

В других случаях значения атрибутов с префиксом aria представлены строки, чисел, целые, ID ссылки или истина / ложь ценности.

Как использовать ARIA States и свойства

Построить отношения между элементами с атрибутами отношений
использование атрибуты отношений чтобы указать отношения между различными элементами на вашем сайте, которые нельзя определить иначе из структуры документа. Например, ария-labelledby Свойство идентифицирует элемент, который помечает текущий элемент.

aria-labelledby – среди много других вещей – может привязывать заголовки к знаковым регионам ARIA следующим образом:

Это заголовок

Основное содержание…

Синхронизация состояний и свойств с жизненным циклом элемента
После того, как вы установите роль ориентира ARIA для воспринимаемой области на вашей HTML-странице, она может очень помочь вспомогательным технологиям, если вы измените ARIA-префиксные состояния и свойства дочерних элементов в соответствии с событиями, происходящими на экране. Это может иметь решающее значение, когда пользователям приходится взаимодействовать с сайтом, например, заполняя форму или выполняя поисковый запрос.
Сопоставьте визуальный и доступный интерфейсы
Общее правило дизайна доступности заключается в том, что текущее состояние пользовательского интерфейса всегда должно восприниматься вспомогательными технологиями. Например, если пользователь выбирает параметр в форме, он также должен быть выбран для вспомогательных технологий. Это может быть легко достигнуто с помощью Aria выбранных состояние со следующим синтаксисом:,

W3C, WAI-ARIA Авторские Практики Руководство может дать вам много других отличных идей о том, как правильно согласовать визуальный и доступный интерфейсы вашего сайта.

Не злоупотребляйте ARIA

Использование ролей и атрибутов ARIA иногда может быть излишним. Когда вы используете семантические теги HTML5, такие как или

современные веб-браузеры по умолчанию добавляют соответствующую семантику ARIA. В этом случае нет смысла отдельно устанавливать основные роли ARIA.

Например, нет необходимости использовать роль ориентира формы для определения

form> элемент. Вместо

Синтаксис вполне достаточно использовать просто

, Также излишне использовать собственные атрибуты HTML вместе с соответствующим атрибутом ARIA.

Так что, если вы уже добавили скрытый атрибут HTML в форму ввода, нет необходимости добавлять скрытое состояние арии, так как браузер включает его по умолчанию.