- Вопрос или проблема
- ПЕРЕЙТИ В виджет bootstrap-select с возможностью поиска
- ПЕРЕЙТИ В обычный виджет bootstrap-select
- ПЕРЕЙТИ В обычный виджет select
- Ответ или решение
- 1. Убедитесь, что используются правильные атрибуты ARIA
- 2. Удалите ненужные пробелы и символы
- 3. Обновите версию bootstrap-select
- 4. Настройка обработчиков событий
- 5. Проверьте поддержку разных экранных считывателей
- 6. Тестирование доступности
Вопрос или проблема
Попробуйте код ниже в браузере с NVDA.
Обычный HTML выпадающий список select работает как ожидалось: экранный считыватель NVDA читает отдельные элементы меню, когда вы перемещаетесь вверх или вниз с помощью клавиш курсора или клавиши TAB и сообщает, сколько элементов в списке и где вы находитесь в списке.
Различные версии bootstrap-select совсем не работают – экранный считыватель читает ПУСТО, ПУСТО, ПУСТО на протяжении всего меню и не говорит, где вы находитесь или сколько элементов в списке.
Я использую Bootstrap-select версии v1.13.18
ПЕРЕЙТИ В виджет bootstrap-select с возможностью поиска
NVDA ГОВОРИТ: ничего не выбрано – комбинированный блок – ничего не выбрано – свернуто – открывает список
КЛАВИША ПРОБЕЛ – ничего не делает
NVDA ГОВОРИТ: пробел
КЛАВИША ВНИЗ – открывает меню
NVDA ГОВОРИТ: поисковый комбинированный блок – свернуто – имеет автозаполнение – редактируемый – пусто
КЛАВИШИ ВВЕРХ/ВНИЗ
NVDA ГОВОРИТ: пусто – пусто – пусто – пусто
ПЕРЕЙТИ В обычный виджет bootstrap-select
NVDA ГОВОРИТ: ничего не выбрано – комбинированный блок – ничего не выбрано – свернуто – открывает список
КЛАВИША ПРОБЕЛ – ничего не делает
NVDA ГОВОРИТ: пробел
КЛАВИША ВНИЗ – открывает меню
NVDA ГОВОРИТ: развернуто
КЛАВИШИ ВВЕРХ/ВНИЗ
NVDA ГОВОРИТ: <никакой речи – не читает ни один элемент меню>
ПЕРЕЙТИ В обычный виджет select
NVDA ГОВОРИТ: комбинированный блок – свернут
КЛАВИША ПРОБЕЛ – открывает меню
NVDA ГОВОРИТ: пробел – комбинированный блок – развернут – список – элемент списка 1 из 13
КЛАВИША ВВЕРХ/ВНИЗ – < текст элемента меню >
NVDA ГОВОРИТ: < текст следующего/предыдущего элемента меню >
КЛАВИШИ ВВЕРХ/ВНИЗ
NVDA ГОВОРИТ: < текст элемента меню > < позиция > из 13
Это никогда не тестировалось с экранными считывателями для обеспечения соответствия требованиям или даже для базовой функциональности или есть что-то, что не хватает в коде, что мне нужно добавить?
<h3>Тест ARIA простого выпадающего списка</h3>
<h4>версия bootstrap-select - с поиском</h4>
<select class="selectpicker" data-container="body" name="area_of_expertise" id="area_of_expertise" multiple="multiple" data-live-search-style="contains" data-live-search-normalize="true" data-live-search-placeholder="Поиск" data-live-search="true" data-width="fit">
<option value="49033"> Науки о жизни </option><option value="49041"> Сельскохозяйственные и биологические науки </option><option value="49042"> Биохимия, Генетика и Молекулярная биология </option><option value="49043"> Иммунология и Микробиология </option><option value="49034"> Науки о здоровье </option><option value="49044"> Медицина </option><option value="49045"> Сестринское дело </option><option value="49046"> Ветеринария </option><option value="49040"> Физические науки </option><option value="49047"> Химическая инженерия </option><option value="49048"> Компьютерные науки </option><option value="49049"> Земля и планетарные науки </option>
</select>
<h4>версия bootstrap-select - без поиска</h4>
<select class="selectpicker" data-container="body" name="area_of_expertise" id="area_of_expertise" multiple="multiple" data-width="fit">
<option value="49033"> Науки о жизни </option><option value="49041"> Сельскохозяйственные и биологические науки </option><option value="49042"> Биохимия, Генетика и Молекулярная биология </option><option value="49043"> Иммунология и Микробиология </option><option value="49034"> Науки о здоровье </option><option value="49044"> Медицина </option><option value="49045"> Сестринское дело </option><option value="49046"> Ветеринария </option><option value="49040"> Физические науки </option><option value="49047"> Химическая инженерия </option><option value="49048"> Компьютерные науки </option><option value="49049"> Земля и планетарные науки </option>
</select>
<h4>Обычная версия HTML</h4>
<select >
<option></option><option value="49033"> Науки о жизни </option><option value="49041"> Сельскохозяйственные и биологические науки </option><option value="49042"> Биохимия, Генетика и Молекулярная биология </option><option value="49043"> Иммунология и Микробиология </option><option value="49034"> Науки о здоровье </option><option value="49044"> Медицина </option><option value="49045"> Сестринское дело </option><option value="49046"> Ветеринария </option><option value="49040"> Физические науки </option><option value="49047"> Химическая инженерия </option><option value="49048"> Компьютерные науки </option><option value="49049"> Земля и планетарные науки </option>
</select>
Ответ или решение
Чтобы обеспечить правильную доступность для экранных считывателей, таких как NVDA, при использовании библиотеки bootstrap-select необходимо выполнить несколько шагов. Давайте рассмотрим возможные решения проблемы, когда элементы select читаются как "BLANK" и не предоставляют пользователю необходимую информацию.
1. Убедитесь, что используются правильные атрибуты ARIA
Bootstrap-select может не всегда автоматически добавлять необходимые атрибуты ARIA, такие как aria-label и role. Убедитесь, что ваш выпадающий список настроен правильно. Пример:
<select class="selectpicker"
name="area_of_expertise"
id="area_of_expertise"
multiple="multiple"
aria-label="Выбор области экспертности"
aria-haspopup="true"
role="combobox">
<option value="49033">Life Sciences</option>
<!-- Другие опции -->
</select>2. Удалите ненужные пробелы и символы
Избегайте использования лишних пробелов и html-сущностей ( ) в значениях option. Это может сбивать с толку экранные считыватели. Правильный код должен выглядеть так:
<option value="49033">Life Sciences</option>
<option value="49041">Agricultural and Biological Sciences</option>
<!-- Другие опции -->3. Обновите версию bootstrap-select
Проверьте, используете ли вы последнюю версию bootstrap-select. Возможно, в новых версиях были исправлены ошибки, связанные с доступностью и поддержкой экранных считывателей.
4. Настройка обработчиков событий
Убедитесь, что обработчики событий правильно обрабатывают клавиши для открытия меню и перемещения по элементам. Добавьте код, который будет активировать соответствующее поведение для экранных считывателей:
$('.selectpicker').selectpicker({
// настройки bootstrap-select
liveSearch: true,
noneResultsText: 'Не найдено результатов',
// другие настройки
}).on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
// Обновление ARIA атрибутов после изменений
});5. Проверьте поддержку разных экранных считывателей
Проблема может зависеть от конкретной реализации и версии экранных считывателей. Проверьте, как ваш элемент ведет себя в других популярных считывателях (например, JAWS, VoiceOver) на разных браузерах.
6. Тестирование доступности
Всегда полезно протестировать реализацию с реальными пользователями, использующими экранные считыватели. Это даст вам больше информации о том, как элементы вашего интерфейса воспринимаются.
Следуя этим шагам, вы сможете улучшить доступность ваших пользовательских интерфейсов, созданных с использованием bootstrap-select, и обеспечить, чтобы они работали должным образом с экранными считывателями, такими как NVDA.