Убедитесь, что все настраиваемые элементы управления имеют соответствующую role и все необходимые атрибуты ARIA, которые определяют их свойства и состояние. Например, для пользовательского флажка требуется role="checkbox" и aria-checked="true|false" чтобы правильно передать его состояние. См. раздел «Введение в ARIA» , где представлен общий обзор того, как ARIA может предоставить недостающую семантику для пользовательских элементов управления.
Как проверить вручную
Чтобы убедиться, что все пользовательские интерактивные элементы управления имеют соответствующие роли ARIA, протестируйте страницу с помощью панели специальных возможностей Chrome DevTools или программы чтения с экрана. JAWS и NVDA — две наиболее популярные программы чтения с экрана для Windows. VoiceOver — это программа чтения с экрана, встроенная в MacOS.
Используя CSS, можно стилизовать элементы <div> и <button> так, чтобы они передавали одинаковые визуальные возможности, но при использовании программы чтения с экрана эти два опыта сильно различаются. <div> — это всего лишь общий элемент группировки, поэтому программа чтения с экрана только объявляет текстовое содержимое <div> . <button> объявляется как «кнопка», что является гораздо более сильным сигналом для пользователя о том, что с ним можно взаимодействовать. См. также Семантика и программы чтения с экрана .
Как исправить
Самое простое и часто лучшее решение этой проблемы — вообще отказаться от пользовательских интерактивных элементов управления. Например, замените <div> , который действует как кнопка, на настоящую <button> .
Если вам необходимо сохранить <div> , добавьте role="button" и aria-pressed="false" в <div> .
Теперь программы чтения с экрана будут объявлять роль и интерактивное состояние <div> .
Почему это важно
Единственный способ по-настоящему понять, как пользователи вспомогательных технологий воспринимают ваш контент, — это самостоятельно проверить этот контент с помощью программы чтения с экрана. Использование программы чтения с экрана из первых рук даст вам четкое представление о том, как помечен ваш контент, и есть ли какие-либо препятствия для вспомогательных технологий навигации. Если вы не знакомы с тем, как семантическая разметка интерпретируется вспомогательными технологиями, для повышения квалификации см. Введение в семантику .
См. также «Как провести проверку доступности» .
Ресурсы
Исходный код для пользовательских элементов управления имеет аудит ролей ARIA.