Введение в дерево доступности
Представьте, что вы создаете пользовательский интерфейс только для пользователей программ чтения с экрана . Здесь вам вообще не нужно создавать какой-либо визуальный пользовательский интерфейс, а просто предоставить достаточно информации для использования программой чтения с экрана.
То, что вы создадите, — это своего рода API, описывающий структуру страницы, аналогичный DOM API, но вы можете обойтись меньшим количеством информации и меньшим количеством узлов, поскольку большая часть этой информации полезна только для визуального представления. Это может выглядеть примерно так.
По сути, это то, что браузер фактически представляет программе чтения с экрана. Браузер берет дерево DOM и изменяет его в форму, удобную для вспомогательных технологий. Мы называем это модифицированное дерево деревом доступности .
Вы можете представить себе дерево доступности как старую веб-страницу 90-х годов: несколько изображений, множество ссылок, возможно, поле и кнопка.
Визуальное сканирование страницы, как в этом случае, дает вам опыт, аналогичный тому, который получил бы пользователь программы чтения с экрана. Интерфейс есть, но он простой и понятный, очень похожий на интерфейс дерева доступности.
Дерево доступности — это то, с чем взаимодействует большинство ассистивных технологий. Поток происходит примерно так.
- Приложение (браузер или другое приложение) предоставляет семантическую версию своего пользовательского интерфейса вспомогательным технологиям через API.
- Вспомогательная технология может использовать информацию, которую она считывает через API, для создания альтернативного представления пользовательского интерфейса для пользователя. Например, программа чтения с экрана создает интерфейс, в котором пользователь слышит голосовое представление приложения.
- Вспомогательные технологии также могут позволить пользователю взаимодействовать с приложением по-другому. Например, большинство программ чтения с экрана предоставляют возможность пользователю легко имитировать щелчок мыши или касание пальца.
- Вспомогательная технология передает намерение пользователя (например, «щелчок») обратно в приложение через 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>
Если флажок помечен правильно, программа чтения с экрана может сообщить, что элемент играет роль флажка, находится в отмеченном состоянии и называется «Получать рекламные предложения?».
