Accessibility API и доступность
Какую роль играет Accessibility API для доступности.
Доступность, c одной стороны, это подход к разработке интерфейсов, которыми может пользоваться каждый. С другой стороны, это конкретные технические решения, которые не видят обычные пользователи. Accessibility API является важной технической составляющей доступности. Благодаря ему вспомогательные технологии знают о том, что происходит на экранах у пользователей.
Разберёмся со всем по порядку и начнём со вспомогательных технологий.
Вспомогательные технологии
В широком смысле вспомогательные технологии (assistive technologies) — это собирательный термин. Он обозначает технологии, которые используют люди с инвалидностью или с другими проблемами со здоровьем для того, чтобы улучшить функциональные возможности. Это могут быть протезы, слуховые аппараты, экзоскелеты, инвалидные кресла, пандусы, зрительные импланты, субтитры.
Для веба вспомогательные технологии — это аппаратное или программное обеспечение, которое упрощает взаимодействие пользователей с веб-контентом. Эти технологии взаимодействуют с User-Agent: браузерами, поисковыми роботами, мобильными телефонами, и переводят контент с языка графического интерфейса на язык, понятный пользователям.
Представим страницу с изображениями. Незрячий человек не сможет их увидеть, но может услышать. Поэтому скринридер, которым он пользуется, прочтёт содержание изображения, которое описано в атрибуте alt.
Выбор вспомогательной технологии зависит от того, какие трудности испытывает пользователь. Есть ли у него проблемы со зрением или слухом, может ли он пользоваться руками или только двигает головой. В зависимости от этого вспомогательные веб-технологии делят на разные виды:
- экранные лупы, которые увеличивают текст и изображения;
- скринридеры, основанные на принципах синтезированной речи или брайлевских дисплеях;
- программное обеспечение для преобразования текста в речь;
- программное обеспечение для распознавания речи, которое используется для голосового управления и диктовки;
- альтернативные технологии ввода, имитирующие клавиатуру: экранные клавиатуры, головные указатели, SNP-устройства;
- альтернативные указатели, которые имитируют курсор мыши и клики.
Для того, чтобы вспомогательные технологии понимали графические интерфейсы, нужен Accessibility API. Это особенно важно для людей с визуальными нарушениями.
Accessibility API
Accessibility API (Accessibility Application Programming Interface) — это часть операционной системы или другой платформы, которая предоставляет вспомогательным технологиям информацию об объектах и событиях на странице.
Объект — это один или несколько HTML-элементов, которые видят пользователи, а событие — это программное сообщение об изменении его состояния.
Пример: пользователь нажал на кнопку. В этом случае кнопка — объект, а клик по кнопке — событие.
Во все операционные системы встроены одна или несколько конкретных реализаций Accessibility API. Вот некоторые из них:
- Microsoft Active Accessibility — MSAA.
- IAccessible и IAccessible2.
- Microsoft User Interface Automation — UI Automation.
- The IAccessibleEx Interface — UIA-EXPRESS.
- The NSAccessibility Protocol — AXAPI.
- UIAccessibility.
- Linux/Unix Accessibility Toolkit — ATK.
Каждая из реализаций API работает совместно с браузерами. Firefox, Chrome, Opera и Yandex поддерживают MSAA, IAccessible и IAccessible2, Internet Explorer — MSAA, IAccessible и UIA-EXPRESS. Safari и Chrome — AXAPI на OS X и UIAccessibility на iOS.
Когда Accessibility API ищут в браузерах и других User-Agent нужную пользователю информацию, то они берут её из DOM и CSSOM, а не с самой страницы сайта.
DOM и CSSOM
Пользователь зашёл на сайт. В этот момент браузер начинает проделывать невидимую для него работу. Сначала он парсит HTML и CSS-файлы, то есть переводит на понятный ему машинный язык. Он разбивает интерфейс сайта на отдельные элементы, которые объединяются в DOM и CSSOM.
CSSOM (Cascading Style Sheets Object Model) или объектная модель таблицы стилей — это вид API, который представляет документ, страницу, в виде правил. Правила описывают стили, которые применяются к элементам.
DOM (Document Object Model) или объектная модель документа — это разновидность API, представление страницы в виде иерархии HTML или XML-элементов.
Элементы, теги, атрибуты и текст, состоят из данных и метаданных и объединяются в узлы. А совокупность таких узлов образует DOM-дерево.
Больше всего данных, которые нужны Accessibility API, сдержится в DOM, меньше в CSSOM. API собирает их и строит дерево доступности.
Дерево доступности
Дерево доступности (accessibility tree) — это совокупность узлов объектов доступности (accessible objects).
Сюда попадают данные об элементах из DOM-дерева, которые либо не заданы явно, либо описаны с помощью ARIA (Accessible Rich Internet Applications). Это набор специальных правил и атрибутов, которые могут быть добавлены в разметку.
Объекты доступности содержат разную информацию:
- описание: роль, имя, их значение;
- состояние;
- события;
- действия, которые пользователи могут совершать с элементами;
- связь с другими элементами;
- текстовое содержимое.
Кроме этих данных Accessibility API собирает информацию об используемых User-Agent, то есть о названиях браузеров и их версиях.
Роль (role) — это указание на то, какую функцию выполняет элемент. Роли могут быть заданы явно при помощи атрибута role="", но в большинстве случаев они неявны и заданы элементам по умолчанию. У тега a неявная роль link, у тега body — document.
Имя (name) — название объекта, которое задано в атрибуте name="". Имя может содержаться в разных местах. В примере имя тега input содержится в соседнем теге label:
<input type="radio" id="otter" name="animals">
<label for="otter">Выдра</label>В этом случае имя чекбокса — «выдра».
Состояние (transient state) — это временная характеристика поведения элемента. В примере у чекбокса по умолчанию стоит атрибут checked:
<input type="radio" id="otter" name="animals" checked>
<label for="otter">Выдра</label>Скринридер прочтёт: «Выдра. Переключатель выделен». То есть состояние выключателя — checked, он выбран. Если атрибут не задан явно, то его состояние «не выбран».
События (events) связаны с изменениями состояний объектов прямо сейчас. В этом случае Accessibility API проанализирует изменения, которые произошли с элементом, и сообщит об этом пользователю. К примеру о том, что пользователь поставил чекбокс или перешёл в поле и ввёл текст.
Информация о действиях (actions), которые пользователи могут совершать с объектами, помогает понять, можно ли кликнуть по элементу, переместить его.
Для дерева доступности также важна иерархия элементов: родительские они или дочерние. За это отвечает характеристика связей между элементами (relationships).
Содержимое элемента (textual content)— это его текстовое содержание. В примере содержимое тега p — «капибары»:
<p>Капибары</p>Представим, что у нас на странице есть ссылка:
<p>
<a href="https://www.capybara.com/" target="_blank" rel="noopener noreferrer">Сайт про капибар
</a>
</p>Accessibility API опишет в дереве доступности этот элемент так: на странице есть родительский элемент — параграф, у которого роль text. У его дочернего элемента роль link, это интерактивный элемент. Он содержит текст «Сайт про капибар». Ссылка пока не нажата.
После того, как скринридер получить эту информацию от Accessibility API через дерево доступности, он прочтёт: «Сайт про капибар. Ссылка».
Ещё один пример с заголовком:
<h2 class="NewsInfo-title">
<a class="NewsTitle NewsTitle--MediaBlock NewsTitle--isInMediaBlock1to4" href="/shapito/2018/07/02/pes-pokazal-fokus-drugomu-psu-poluchilos-ne-huzhe-chem-u-lyudey">
<span class="NewsTitle-first NewsTitle-first--MediaBlock NewsTitle-first--isInMediaBlock1to4">Пес показал фокус другому псу. Получилось не хуже, чем у людей!
</span>
</a>
</h2>Скринридер представит элементы так: «Пёс показал фокус другом псу. Получилось не хуже, чем у людей. Ссылка. Заголовок второго уровня».
Выводы
Сначала User Agent загружает страницу, парсит содержимое и строит DOM-дерево и CSSOM. Затем он собирает из них нужные данные и метаданные и создаёт дерево доступности.
В этом процессе Accessibility API играет важную роль посредника между графическими интерфейсами сайтов и вспомогательными технологиями. Он отбирает нужную информацию, обрабатывают её и создаёт альтернативную версию страницы, которая доступна пользователям, использующим вспомогательные технологии.
И ещё более краткий пересказ в виде схемы:
Полезные ссылки
- Core Accessibility API Mappings 1.1. Рекомендации W3C.
- «Accessibility APIs: A Key To Web Accessibility», Леони Уотсон.
- Заметка ВОЗ о вспомогательных технологиях.
