Доступность библиотеки компонентов: требования к каждому элементу

Прямой ответ

Компонент библиотеки соответствует требованиям доступности на уровне системы, поэтому экран, собранный из компонентов, не требует отдельной правки доступности.

<button aria-pressed="false">…</button>

Проверка выполняется для каждого компонента, поэтому соответствие подтверждается до применения в экране. О ролях и состояниях — в статье про ARIA‑атрибуты.

Роли, состояния и объявление назначения

Компонент объявляет роль и состояние, поэтому назначение элемента определяется без визуального осмотра.

Роль элемента. Определяет назначение компонента, поэтому вспомогательная технология объявляет элемент по назначению.

Состояние компонента. Объявляется явно, поэтому изменение состояния доступно без визуального наблюдения.

Название элемента. Задаётся явно, поэтому элемент объявляется осмысленно, а не по содержимому разметки.

Практическое следствие: компонент без объявленной роли воспринимается как общий элемент, поэтому назначение определяется пользователем по содержимому, а не объявляется технологией.

Отдельный аспект — изменение состояния. Состояние, объявленное только изменением цвета, не доступно без восприятия цвета, поэтому объявление состояния выполняется атрибутом, а не оформлением.

Клавиатурное управление и видимость фокуса

Действие компонента доступно с клавиатуры, поэтому управление не требует указателя.

Доступность действия. Действие выполняется клавишей, поэтому компонент управляется без указателя.

Видимость фокуса. Положение фокуса различимо, поэтому последовательность перемещения видна пользователю.

Порядок перемещения. Соответствует порядку содержимого, поэтому переход не пропускает элемент и не возвращается к пройденному.

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

О перемещении фокуса — в статье про клавиатурную навигацию.

Сочетание цвета и проверка в каждой теме

Сочетание цвета текста и фона в компоненте проверяется, поэтому содержимое различимо при любом варианте оформления.

Порог контрастности. Сочетание цвета соответствует требованию, поэтому содержимое различимо при сниженном зрении.

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

Состояния компонента. Сочетание цвета проверяется для каждого состояния, поэтому различимость сохраняется при отключённом состоянии.

Практическое следствие: соответствие порогу в обычном состоянии не гарантирует соответствия в отключённом, поэтому содержимое в таком состоянии может не различаться.

О требованиях к сочетанию — в статье про контрастность цветов; о составе требований — в статье про доступность интерфейсов.

Проверка при изменении компонента

Проверка доступности выполняется при изменении компонента, поэтому соответствие подтверждается до выпуска версии.

Изменение разметки. Изменение структуры сопровождается проверкой роли, поэтому назначение элемента сохраняется.

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

Новое состояние. Добавление состояния сопровождается проверкой объявления, поэтому изменение доступно без восприятия цвета.

Практическое следствие: изменение компонента без повторной проверки сохраняет прежнее заключение о соответствии, поэтому нарушение появляется в версии, выпущенной после правки.

Практика: проверка доступности компонентов

1. Объявляйте роль и состояние каждого компонента. Назначение определяется без визуального осмотра.

2. Задавайте название элемента явно. Элемент объявляется осмысленно.

3. Обеспечьте клавиатурное выполнение действия. Управление не требует указателя.

4. Сделайте положение фокуса различимым. Последовательность перемещения видна пользователю.

5. Проверяйте сочетание цвета в каждой теме. Соответствие подтверждается для каждого набора значений.

6. Проверяйте состояния компонента отдельно. Различимость сохраняется при отключённом состоянии.

7. Проверяйте компонент до применения в экране. Соответствие подтверждается на уровне системы.

Рекомендации:

1. Не объявляйте состояние только изменением цвета. Состояние недоступно без восприятия цвета.
2. Не проверяйте доступность только на собранном экране. Расхождение в компоненте повторяется на всех экранах, использующих его.
3. Не полагайтесь на соответствие в одной теме. Проверка выполняется для каждого набора значений.
4. Фиксируйте требование доступности в описании компонента. Потребитель знает ожидаемое поведение элемента.
5. Пересматриваем проверку при добавлении компонента. Новый элемент требует отдельной проверки.

Практический сценарий: состояние кнопки не объявлялось технологией

Контекст: кнопка переключения изменяла цвет при включении, но вспомогательная технология объявляла элемент одинаково в обоих состояниях.

1. Диагностика. Проверка показала, что состояние кнопки задавалось только изменением цвета фона. Атрибут состояния не объявлялся, поэтому технология сообщала одно и то же название независимо от включения.
2. Причина. Компонент создавался без объявления состояния, поэтому изменение воспринималось визуально, но не было доступно без восприятия цвета.
3. Действия. (а) Добавили объявление состояния атрибутом, чтобы изменение было доступно без восприятия цвета; (б) задали явное название элемента, чтобы технология объявляла назначение, а не содержимое разметки; (в) проверили выполнение действия клавишей, чтобы управление не требовало указателя; (г) сделали положение фокуса различимым, чтобы последовательность перемещения была видна; (д) проверили сочетание цвета для каждого состояния и каждой темы, чтобы различимость сохранялась при отключённом состоянии.
4. Результат. Технология объявляет состояние кнопки, поэтому изменение доступно без восприятия цвета, а действие выполняется с клавиатуры.

Вывод: состояние, заданное только изменением цвета, недоступно без восприятия цвета, поэтому объявление состояния выполняется атрибутом. Проверка каждого компонента библиотеки подтверждает соответствие до применения элемента на экранах продукта.

FAQ

Зачем проверять доступность на уровне компонента? Расхождение в компоненте повторяется на всех экранах, использующих его. Проверка на уровне системы устраняет причину.

Почему нельзя задавать состояние только цветом? Изменение недоступно без восприятия цвета. Объявление состояния выполняется атрибутом.

Нужно ли проверять сочетание цвета в каждой теме? Да. Соответствие порогу в одном наборе значений не гарантирует соответствия в другом.

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

Источники: W3C WAI-ARIA 1.2, WCAG 2.2 Quickref, W3C WCAG 2.2 — ссылки в шапке.