search

w3c / tr-pages

Work on the w3.org/TR index page (not specs themselves)
https://www.w3.org/TR/
26 stars 12 forks source link

Disclosure widgets are inaccessible #11

Open LJWatson opened 7 years ago

LJWatson commented 7 years ago

The filter/disclosure widgets on the mockup1 page are not keyboard or screen reader accessible because they're created with <div> and <span> elements.

<li class="ft-field">
<span class="ft-label">versions</span>
<div class="ft-panel ft-hidden">
<ul class="ft-selected" style="display:none;"></ul>
...
</div>
</li>

The widget needs to be keyboard focusable, to have semantic information polyfilled with ARIA, and for keyboard interaction to be provided. Use this <span> based pattern to extend the existing code. If possible, use this <button> based pattern instead (because most of the missing information/interaction is handled by the browser.