Домашняя » кодирование » Взгляд на веб-стандарты ARIA и доступность HTML-приложений

    Взгляд на веб-стандарты 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-странице. Это обычно следует за

    синтаксис, или в HTML5 более семантический
    . Последний был добавлен в спецификации W3C с целью картирования главный Роль ориентира ARIA для семантического элемента HTML.

    роль =”навигация”

    Роль навигации предназначена для указания области, содержащей элементы навигации, такие как ссылки и списки на сайте..

    роль =”дополнительный”

    Дополнительная роль ориентира описывает дополнительный контент, связанный с основным контентом сайта. Его необходимо поместить на уровень, аналогичный иерархии DOM, как Роль = «основной». Связанные посты, популярные статьи, последние комментарии - типичные примеры автономного дополнительного контента.

    роль =”contentinfo”

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

    роль =”форма”

    Роль ориентира формы указывает форму, ожидающую ввода пользователя. Для поисковых форм вы должны использовать Роль = «Поиск» вместо.

    роль =”поиск”

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

    роль =”приложение”

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

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

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

    В то время как роли позволяют вам определять значение тегов 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, такие как или же

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

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

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

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

    © Savtec
    Полезная информация и советы по веб-разработке. Программирование, веб-дизайн, CSS, HTML, JAVASCRIPT. Настройка и переустановка WINDOWS. Создание сайтов и приложений с нуля.