Reputation: 85
Bootstrap-select not accessible to screen readers. Not behaving like standard select dropdowns in any browser. Menu items not being read in Firefox
Try below code in a browser with NVDA.
The plain HTML original select dropdown works as expected with NVDA screenreader reading out the individual menu items when you go up or down with cursor keys or TAB key and telling you how many items is in list and where you currently are in list.
The various bootstrap-select versions of this do not work at all - screenreader reads BLANK, BLANK, BLANK all the way through menu and does not tell you where you are or how long the list is.
I am using Bootstrap-select v1.13.18
TAB INTO the searchable bootstrap-select widget
NVDA SPEAKS: nothing selected - combo box - nothing selected - collapsed - opens list
SPACE KEY - does nothing NVDA SPEAKS: space
DOWN ARROW - opens menu NVDA SPEAKS: search combobox - collapsed - has autocomplete - editable - blank
UP/DOWN ARROWS NVDA SPEAKS: blank - blank - blank - blank
TAB INTO the normal bootstrap-select widget
NVDA SPEAKS: nothing selected - combo box - nothing selected - collapsed - opens list
SPACE KEY - does nothing NVDA SPEAKS: space
DOWN ARROW - opens menu NVDA SPEAKS: expanded
UP/DOWN ARROWS NVDA SPEAKS: <no speech at all - does not read any menu item>
TAB INTO the normal select widget
NVDA SPEAKS: combo box - collapsed
SPACE KEY - opens menu NVDA SPEAKS: space - combo box - expanded - list - list item 1 of 13
UP/DOWN ARROW - < menu item text > NVDA SPEAKS: < next/previous menu item text >
UP/DOWN ARROWS NVDA SPEAKS: < menu item text > < position > of 13
Has this never been tested with screen-readers to ensure compliance or even basic functionality or is there something missing in the code here I need to add?
INSTRUCTIONS FOR SNIPPET TEST HERE
NVDA instructions to test problem and skip all the other stuff on page in screen reader
- Expand the widget to full screen
- Hit key combo INSERT-F7 to open the NVDA "Elements List"
- Go to Headings
- Click Test ARIA plain dropdown
- Click "Move To" button - this closes the NVDA window and put reader on the main heading on test
- Use TAB key and ARROW keys to navigate the top two Bootstrap widgets - notice reader never read out the list item names
- Use SPACE key and ARROW keys to navigate standard HTML dropdown - notice reader reads out the items in list
NOTE: on real system it also announces BLANK all over the place for some reason but not in example here.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<h3>Test ARIA plain dropdown</h3>
<h4>bootstrap-select version - with search</h4>
<select class="selectpicker" data-live-search-style="contains" data-live-search-normalize="true" data-live-search-placeholder="Search" data-live-search="true">
<option value="49033"> Life Sciences </option><option value="49041"> Agricultural and Biological Sciences </option><option value="49042"> Biochemistry, Genetics and Molecular Biology </option><option value="49043"> Immunology and Microbiology </option><option value="49034"> Health Sciences </option><option value="49044"> Medicine </option><option value="49045"> Nursing </option><option value="49046"> Veterinary </option><option value="49040"> Physical Sciences </option><option value="49047"> Chemical Engineering </option><option value="49048"> Computer Science </option><option value="49049"> Earth and Planetary </option>
</select>
<h4>bootstrap-select version - without search</h4>
<select class="selectpicker">
<option value="49033"> Life Sciences </option><option value="49041"> Agricultural and Biological Sciences </option><option value="49042"> Biochemistry, Genetics and Molecular Biology </option><option value="49043"> Immunology and Microbiology </option><option value="49034"> Health Sciences </option><option value="49044"> Medicine </option><option value="49045"> Nursing </option><option value="49046"> Veterinary </option><option value="49040"> Physical Sciences </option><option value="49047"> Chemical Engineering </option><option value="49048"> Computer Science </option><option value="49049"> Earth and Planetary </option>
</select>
<h4>Plain HTML version</h4>
<select >
<option></option><option value="49033"> Life Sciences </option><option value="49041"> Agricultural and Biological Sciences </option><option value="49042"> Biochemistry, Genetics and Molecular Biology </option><option value="49043"> Immunology and Microbiology </option><option value="49034"> Health Sciences </option><option value="49044"> Medicine </option><option value="49045"> Nursing </option><option value="49046"> Veterinary </option><option value="49040"> Physical Sciences </option><option value="49047"> Chemical Engineering </option><option value="49048"> Computer Science </option><option value="49049"> Earth and Planetary </option>
</select>Upvotes: 1
Views: 68