A presentation at John Slatin AccessU 2016 in in Austin, TX, USA by Eric Eggert
Accessible Widgets Part IV Eric Eggert, Knowbility & W3C AccessU 2016, May 10th
Eric Eggert G e r m a n y 2 0 1 3 – 2 0 1 6 : W 3 C / W A I 2 0 1 6 – t o d a y : K n o w b i l i t y & W 3 C / W A I F e l l o w s h i p T r a n s l a I n g W C A G t o H u m a n .
Times Day & Time Room Presenter Topics May 9th, 10:15-11:45 JBWS 165 Patrick Fox Focus management, Announcing dynamic content, Tool Ips, Modal dialogs, Dynamic table filtering and sorIng May 9th, 4:00-5:30 JBWS 163 Eric Eggert Date picker, Time field, Combo box, Progress bar May 10th, 10:15-11:45 JBWS 163 Eric Eggert Slider, Accordion, Tabs, Alerts May 10th, 2:15-3:45 JBWS 163 Patrick Fox Eric Eggert Wizard progress indicator, File selector and upload, Form validaIon, Search by locaIon, Dynamic applicaIon page elements and flow
Wizard progress indicator, File selector and upload, Form valida=on, Search by loca=on, Dynamic applica=on page elements and flow
Context
User Experience
Usability
To ARIA or not to ARIA?
Example:
<h1 role="button">heading button</h1>
Example:
Example:
<h1><button>headingbutton</button></h1>
All interac=ve ARIA controls must be usable with the keyboard.
Example: I f using role=button the element must be able to receive focus and a user must be able to activate the action associated with the element using both the enter (on WIN OS) or return (MAC OS) and the space key.
Do not use role="presenta=on" or aria-hidden="true" on a visible focusable element .
All interac=ve elements must have an accessible name.
Wizard progress indicator Example: h]ps://github.com/w3c/wcag-em-report-tool/
File selector and upload Example: h]p://codepen.io/yaIl/pen/xVBOdM
Form valida5on h]p://www.w3.org/WAI/tutorials/forms/validaIon/
Search by loca5on
Dynamic applica5on page elements and flow
Sources: • Font: Lato • Skull: Created by Andrew Cameron, from the Noun Project