Совместим ли Bootstrap 3 с разделом соответствия 508?
Моя команда столкнулась с некоторыми проблемами при распознавании выпадающих списков bootstrap 3 ( http://getbootstrap.com/components/) программами чтения с экрана для людей с нарушениями зрения. Поэтому мне любопытно, совместим ли начальный загрузчик 3 с разделом соответствия 508 ( http://www.section508.gov/)?
Если это не так, есть ли плагины начальной загрузки, которые делают его совместимым с разделом 508?
2 ответа
Согласно http://achecker.ca/checker/index.php и контрольному списку от http://webaim.org/standards/508/checklist кажется, что у bootstrap 3 нет серьезных проблем с разделом соответствия 508.
Но, к сожалению, выпадающие меню начальной загрузки не читаются программами чтения с экрана так же, как читатели делают это для выбранных тегов, даже с https://github.com/paypal/bootstrap-accessibility-plugin. Поэтому людям с нарушениями зрения может быть немного сложно выбрать некоторые значения в длинных списках, например, выбрать список стран.
Я протестировал выпадающее меню начальной загрузки, используя NVDA, и они работают правильно, предполагая, что они правильно помечены. Вы должны убедиться, что элемент, используемый для выпадающего "кнопки", является элементом, который может фокусироваться, он не может быть div или span, а ul должен иметь role="menu".
Чтобы использовать раскрывающийся список с NVDA, например, вы перемещаетесь с помощью ↑ и ↓, а затем нажимаете ввод, чтобы открыть меню.
Код должен выглядеть так:
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Menu Button <span class="fa fa-caret-down"> </span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="https://www.google.com/" target="_blank" title="Link to Google">Link to Google</a></li>
<li>Just some Text</li>
<li><a href="http://www.stackoverlow.com/" target="_blank" title="Stack Overflow">Stack Overflow</a></li>
</ul>