Доступность виджетов автодополнения

Шаблон комбинированного поля WAI-ARIA определяет специальный набор ролей и свойств для виджетов автодополнения. Комбинированное поле — это элемент ввода, связанный со всплывающим списком вариантов. Шаблон гарантирует, что средства чтения с экрана правильно объявляют интерактивное поведение, доступные варианты и текущий выбор пользователям, которые не видят визуальный интерфейс.

Оберните поле ввода в div с атрибутом role="combobox". Это сообщает вспомогательным технологиям, что с полем связан всплывающий список. Установите aria-expanded={isOpen} у этой оболочки, чтобы сообщить средствам чтения с экрана, отображается ли сейчас список предложений или он скрыт.

Сам элемент ввода должен иметь следующие атрибуты: aria-autocomplete="list" (всплывающий список содержит предложения), aria-haspopup="listbox" (щелчок или ввод открывает список вариантов), aria-expanded={isOpen} и aria-controls="suggestion-list-id", указывающий на id элемента списка.

Атрибут aria-activedescendant у поля ввода указывает на id текущего выделенного варианта. Если selectedIndex равен 0, установите aria-activedescendant="option-0". Средства чтения с экрана используют этот атрибут, чтобы объявить активный элемент, не перемещая фактический фокус с поля ввода. Если ни один элемент не выбран, удалите атрибут или задайте ему пустую строку.

Элемент-контейнер раскрывающегося списка должен иметь role="listbox" и уникальный id, совпадающий со значением aria-controls поля ввода. Эта роль сообщает дереву доступности, что элемент является списком выбираемых вариантов. Список вариантов получает фокус косвенно через aria-activedescendant у поля ввода.

Каждый элемент предложения должен иметь role="option" и уникальный id, например option-0, option-1 и т. д. Добавьте aria-selected={index === selectedIndex}, чтобы указать, какой элемент сейчас выделен. При перемещении стрелками средства чтения с экрана объявляют и содержимое варианта, и факт его выбора.

Когда пользователь нажимает ArrowDown и aria-activedescendant обновляется до option-1, VoiceOver произносит примерно: «Хуки React, 2 из 5». Средство чтения с экрана автоматически считывает текст варианта и его позицию в списке из разметки ARIA. Для навигации с клавиатуры дополнительные живые области не нужны.

Проверьте работу с VoiceOver в macOS (нажмите Cmd+F5 для переключения) и с NVDA в Windows (его можно бесплатно скачать). Перейдите к полю ввода и начните печатать. Убедитесь, что средство чтения с экрана объявляет роль комбинированного поля, количество найденных результатов и каждый вариант при перемещении стрелками. Сравните поведение с примерами из руководства по практикам разработки WAI-ARIA.

При асинхронной загрузке предложений добавьте визуально скрытый div с атрибутами aria-live="polite" и aria-atomic="true". Обновляйте его текст после завершения загрузки: «Найдено 5 результатов» или «Результаты не найдены». Средство чтения с экрана объявит это сообщение после завершения текущего озвучивания, поэтому пользователь получит информацию без прерывания.

Руководство по практикам разработки WAI-ARIA (APG) по адресу w3.org/WAI/ARIA/apg содержит отдельную страницу с шаблоном комбинированного поля, рабочими примерами кода и подробными спецификациями взаимодействия с клавиатурой. Всегда обращайтесь к APG при создании интерактивных виджетов, таких как автодополнение, диалоговые окна или вкладки, чтобы обеспечить полное соответствие требованиям доступности.

Укажите aria-label у поля ввода, если видимый элемент метки отсутствует: aria-label="Search suggestions". Не полагайтесь только на placeholder в качестве метки: заполнитель исчезает, когда пользователь начинает печатать, и не всегда одинаково объявляется всеми средствами чтения с экрана. Видимый элемент label с атрибутом htmlFor всегда является лучшим вариантом.

Каково назначение атрибута aria-activedescendant у поля ввода автодополнения?

Используйте role="combobox" у оболочки, aria-autocomplete="list" у поля ввода, а также aria-expanded, aria-controls и aria-activedescendant, чтобы связать поле ввода со списком предложений. Каждый вариант должен иметь role="option", уникальный id и aria-selected. Добавьте живую область aria-live для объявления количества асинхронно загруженных результатов.