snapappointments
Bootstrap-select is not accessible to screenreaders like NVDA...
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?
<h3>Test ARIA plain dropdown</h3>
<h4>bootstrap-select version - with search</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="Search" data-live-search="true" data-width="fit">
<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" data-container="body" name="area_of_expertise" id="area_of_expertise" multiple="multiple" data-width="fit">
<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>
I had to create a special accessibilty/screenreader mode in product in the end that users can turn on with a hidden link (like the skip header link) which basically turns off bootstrap-select completely in this mode and goes back to plain old HTML selects - which do work with screen readers.
Last update is from 3 years ago. Maybe it's time to look for an alternative, especially with accessibility becoming a big issue for most companies in Europe.
