Bootstrap-select is not accessible to screenreaders like NVDA...

[a1ms1]

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&nbsp;&nbsp;</option><option value="49041"> &nbsp;&nbsp;&nbsp;&nbsp; Agricultural and Biological Sciences&nbsp;&nbsp;</option><option value="49042"> &nbsp;&nbsp;&nbsp;&nbsp; Biochemistry, Genetics and Molecular Biology&nbsp;&nbsp;</option><option value="49043"> &nbsp;&nbsp;&nbsp;&nbsp; Immunology and Microbiology&nbsp;&nbsp;</option><option value="49034">  Health Sciences&nbsp;&nbsp;</option><option value="49044"> &nbsp;&nbsp;&nbsp;&nbsp; Medicine&nbsp;&nbsp;</option><option value="49045"> &nbsp;&nbsp;&nbsp;&nbsp; Nursing&nbsp;&nbsp;</option><option value="49046"> &nbsp;&nbsp;&nbsp;&nbsp; Veterinary&nbsp;&nbsp;</option><option value="49040">  Physical Sciences&nbsp;&nbsp;</option><option value="49047"> &nbsp;&nbsp;&nbsp;&nbsp; Chemical Engineering&nbsp;&nbsp;</option><option value="49048"> &nbsp;&nbsp;&nbsp;&nbsp; Computer Science&nbsp;&nbsp;</option><option value="49049"> &nbsp;&nbsp;&nbsp;&nbsp; Earth and Planetary&nbsp;&nbsp;</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&nbsp;&nbsp;</option><option value="49041"> &nbsp;&nbsp;&nbsp;&nbsp; Agricultural and Biological Sciences&nbsp;&nbsp;</option><option value="49042"> &nbsp;&nbsp;&nbsp;&nbsp; Biochemistry, Genetics and Molecular Biology&nbsp;&nbsp;</option><option value="49043"> &nbsp;&nbsp;&nbsp;&nbsp; Immunology and Microbiology&nbsp;&nbsp;</option><option value="49034">  Health Sciences&nbsp;&nbsp;</option><option value="49044"> &nbsp;&nbsp;&nbsp;&nbsp; Medicine&nbsp;&nbsp;</option><option value="49045"> &nbsp;&nbsp;&nbsp;&nbsp; Nursing&nbsp;&nbsp;</option><option value="49046"> &nbsp;&nbsp;&nbsp;&nbsp; Veterinary&nbsp;&nbsp;</option><option value="49040">  Physical Sciences&nbsp;&nbsp;</option><option value="49047"> &nbsp;&nbsp;&nbsp;&nbsp; Chemical Engineering&nbsp;&nbsp;</option><option value="49048"> &nbsp;&nbsp;&nbsp;&nbsp; Computer Science&nbsp;&nbsp;</option><option value="49049"> &nbsp;&nbsp;&nbsp;&nbsp; Earth and Planetary&nbsp;&nbsp;</option>
</select>

<h4>Plain HTML version</h4>

<select >
  <option></option><option value="49033">  Life Sciences&nbsp;&nbsp;</option><option value="49041"> &nbsp;&nbsp;&nbsp;&nbsp; Agricultural and Biological Sciences&nbsp;&nbsp;</option><option value="49042"> &nbsp;&nbsp;&nbsp;&nbsp; Biochemistry, Genetics and Molecular Biology&nbsp;&nbsp;</option><option value="49043"> &nbsp;&nbsp;&nbsp;&nbsp; Immunology and Microbiology&nbsp;&nbsp;</option><option value="49034">  Health Sciences&nbsp;&nbsp;</option><option value="49044"> &nbsp;&nbsp;&nbsp;&nbsp; Medicine&nbsp;&nbsp;</option><option value="49045"> &nbsp;&nbsp;&nbsp;&nbsp; Nursing&nbsp;&nbsp;</option><option value="49046"> &nbsp;&nbsp;&nbsp;&nbsp; Veterinary&nbsp;&nbsp;</option><option value="49040">  Physical Sciences&nbsp;&nbsp;</option><option value="49047"> &nbsp;&nbsp;&nbsp;&nbsp; Chemical Engineering&nbsp;&nbsp;</option><option value="49048"> &nbsp;&nbsp;&nbsp;&nbsp; Computer Science&nbsp;&nbsp;</option><option value="49049"> &nbsp;&nbsp;&nbsp;&nbsp; Earth and Planetary&nbsp;&nbsp;</option>
</select>

[metalocator]

Seeing the same behavior. This is a big issue for us.

[a1ms1]

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.

[saitho]

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.