search

dequelabs / combobo

Accessible combobox
https://dequelabs.github.io/combobo/demo/
MIT License
48 stars 13 forks source link

Accessibility issues #24

Closed dodozhang21 closed 5 years ago

dodozhang21 commented 5 years ago

Hi, I implemented using your script on a pen https://s.codepen.io/dodozhang21/debug/qJmXQJ to be reviewed by our accessibility consultants and they came back with these feedback.

Will you be able to make the corresponding changes to your script?

“Plant Type” simulated combo-box is now accessible with a screen reader on desktop. There are usability and compatibility issues preventing it from being used efficiently on mobile with a screen reader. Remediation recommendations: implement as expandable/collapsible section, e.g.

<a href=”#” aria-expanded=”false/true” aria-controls=”plants_panel”>Select Plant Type</a>
<div id=”checkboxes_panel”>
<fieldset>
<div class=”check”>
<input type=”checkbox”  id=”item1” value=”item1”> <label for=”item1”>Item 1</label>
</div>
….
</fieldset>
</div>

When the link is activated, show/hide the panel with checkboxes, and toggle aria-expanded to true. This will be universally accessible on desktop and mobile.

schne324 commented 5 years ago

with the useLiveRegion option set to false, this lib follows the ARIA spec