My team faced some issues with recognition of bootstrap 3 drop-down lists (http://getbootstrap.com/components/#dropdowns) by screen readers for visually impaired people. So I'm curious, if bootstrap 3 compatible with 508 compliance section (http://www.section508.gov/)?
If it is not, are there any bootstrap plugins, which make it compatible with 508 section?
I tested the bootstrap dropdown menu using NVDA and they work properly, assuming they are properly tagged. You need to ensure that the element used for the dropdown "button" is a item that can take focus, it can't be a div or a span, and the ul needs to have role="menu".
To use the dropdown with NVDA for example you navigate using ↑ and ↓ and then hit enter to open the menu.
The code should look like:
<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>
According to http://achecker.ca/checker/index.php and checklist from http://webaim.org/standards/508/checklist it seems that bootstrap 3 does not have any major issues with 508 compliance section.
But, unfortunately bootstrap drop-downs are not readable by screen readers in the same way as readers do it for select tags, even with https://github.com/paypal/bootstrap-accessibility-plugin. So it might be a little bit difficult for visually impaired people to select some values in long lists, e.g. select country list.