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», Леони Уотсон.
- Заметка ВОЗ о вспомогательных технологиях.