Введение в дерево доступности
Представьте, что вы создаете пользовательский интерфейс только для пользователей программ чтения с экрана. В этом случае вам не нужно создавать визуальный интерфейс, достаточно предоставить информацию, которую сможет использовать программа чтения с экрана.
Вы создадите своего рода API, описывающий структуру страницы, аналогичный DOM API, но вы можете обойтись меньшим количеством информации и меньшим количеством узлов, потому что большая часть этой информации полезна только для визуального представления. Это может выглядеть примерно так.
Это то, что браузер фактически передает программе чтения с экрана. Браузер берет дерево DOM и преобразует его в форму, полезную для технологии специальных возможностей. Такое измененное дерево называется деревом доступности.
Дерево доступности можно представить как старую веб-страницу из 90-х: несколько изображений, много ссылок, возможно, поле и кнопка.
Визуальное сканирование страницы, как в этом случае, дает вам опыт, аналогичный тому, что получит пользователь программы чтения с экрана. Интерфейс есть, но он простой и прямой, очень похожий на интерфейс дерева доступности.
Именно с ним взаимодействует большинство технологий специальных возможностей. Процесс выглядит примерно так.
- Приложение (браузер или другое приложение) предоставляет семантическую версию своего интерфейса технологии специальных возможностей через API.
- Технология специальных возможностей может использовать информацию, которую она считывает через API, чтобы создать альтернативное представление пользовательского интерфейса для пользователя. Например, программа чтения с экрана создает интерфейс, в котором пользователь слышит устное представление приложения.
- Технологии специальных возможностей также могут позволять пользователю взаимодействовать с приложением по-другому. Например, большинство программ чтения с экрана предоставляют хуки, позволяющие пользователю легко имитировать щелчок мыши или касание пальцем.
- Технология специальных возможностей передает намерение пользователя (например, "нажать") обратно в приложение через Accessibility API. Затем приложение должно правильно интерпретировать действие в контексте исходного интерфейса.
Для веб-браузеров в каждом направлении есть дополнительный шаг, поскольку браузер на самом деле является платформой для веб-приложений, которые работают внутри него. Поэтому браузер должен преобразовать веб-приложение в дерево специальных возможностей и убедиться, что в JavaScript запускаются соответствующие события на основе действий пользователя, поступающих от технологии специальных возможностей.
Но это уже задача браузера. Наша задача как веб-разработчиков – знать, как это работает, и создавать веб-страницы, которые используют этот процесс, чтобы обеспечить доступность для наших пользователей.
Для этого мы должны правильно выразить семантику наших страниц: убедиться, что важные элементы на странице имеют правильные доступные роли, состояния и свойства, а также указать доступные названия и описания. Затем браузер может предоставить вспомогательной технологии доступ к этой информации для создания индивидуального опыта.
Семантика в нативном HTML
Браузер может преобразовать дерево DOM в дерево доступности, поскольку большая часть DOM имеет неявное семантическое значение. То есть DOM использует нативные элементы HTML, которые распознаются браузерами и предсказуемо работают на различных платформах. Специальные возможности для нативных элементов HTML, таких как ссылки или кнопки, обрабатываются автоматически. Мы можем воспользоваться этим преимуществом, написав HTML-код, который выражает семантику элементов нашей страницы.
Однако иногда мы используем элементы, которые выглядят как нативные, но не являются таковыми. Например, эта "кнопка" – вовсе не кнопка.
В HTML-коде это можно сделать разными способами, один из которых показан ниже.
<div class="button-ish">Give me tacos</div>
Если мы не используем фактический элемент кнопки, программа чтения с экрана не может узнать, на что она попала. Кроме того, нам пришлось бы проделать дополнительную работу по добавлению tabindex, чтобы сделать его доступным для пользователей, работающих только с клавиатурой, поскольку в текущем виде он может использоваться только с мышью.
Это легко исправить, используя обычный элемент button вместо div.
Использование встроенного элемента также имеет преимущество в том, что он заботится о взаимодействии с клавиатурой за нас. И помните, что вам не нужно отказываться от своих шикарных визуальных эффектов только потому, что вы используете нативный элемент. Вы можете стилизовать нативные элементы, чтобы они выглядели так, как вы хотите, и при этом сохраняли неявную семантику и поведение.
Ранее мы отмечали, что программы чтения с экрана будут объявлять роль, имя, состояние и значение элемента. Используя правильный семантический элемент, мы задаем роль, состояние и значение, но мы также должны убедиться, что название элемента доступно.
В целом существует два типа названий:
- Видимые ярлыки, которые используются всеми пользователями, чтобы связать значение с элементом.
- Текстовые альтернативы, которые используются, только когда нет необходимости в визуальном ярлыке.
Для элементов на уровне текста ничего делать не нужно, поскольку по определению они будут содержать текстовый контент. Однако для элементов ввода или управления, а также визуального контента, например изображений, нам нужно убедиться, что мы указываем имя. Добавление альтернативного текста для нетекстового контента – это первый пункт в контрольном списке WebAIM.
Один из способов сделать это – следовать рекомендации "Поля формы должны иметь связанные текстовые метки". Связать ярлык с элементом формы, например флажком, можно двумя способами. Любой из этих методов также делает текст метки целью клика для флажка, что также полезно для пользователей мыши или сенсорного экрана. Чтобы связать ярлык с элементом, выполните одно из следующих действий:
- Поместите элемент ввода в элемент ярлыка
<label>
<input type="checkbox">Receive promotional offers?
</label>или
- Используйте атрибут
forярлыка и сошлитесь на атрибутidэлемента
<input id="promo" type="checkbox">
<label for="promo">Receive promotional offers?</label>
Если ярлык добавлен правильно, программа чтения с экрана сообщит, что элемент является флажком, он установлен и называется "Получать специальные предложения?".
