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