Accessible Widgets Part III Eric Eggert, Knowbility & W3C AccessU 2016, May 10th
Slide 1
Slide 2
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 .
Slide 3
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
Slide 4
Slider, Accordion, Tabs, Alerts
Slide 5
Context
Slide 6
User Experience
Slide 7
Usability
Slide 8
To ARIA or not to ARIA?
Slide 9
- If you can use a na?ve HTML5 element or aEribute with the seman?cs and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible , then do so.
Slide 10
- Do not change na?ve seman?cs, unless you really have to .
Slide 11
Example:
<h1 role="button">heading button</h1>
Slide 12
Example:
Slide 13
Example:
<h1><button>headingbutton</button></h1>
Slide 14
All interac?ve ARIA controls must be usable with the keyboard.
Slide 15
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.
Slide 16
Do not use role="presenta?on" or aria-hidden="true" on a visible focusable element .
Slide 17
All interac?ve elements must have an accessible name.
Slide 18
Slider
Slide 19
W3C WAI Tutorial w3.org/WAI/tutorials/carousel
Slide 20
Accordion
Slide 21
Slide 22
Accordion Example • h^p://www.oaa-accessibility.org/example/35/
• h^p://codepen.io/yaIl/full/PNVvLw/
Slide 23
Ta b s
Slide 24
ARIA Tabs h^p://codepen.io/jeffsmith/pen/YqrzOa/
Slide 25
non-ARIA Tabs h^p://codepen.io/jeffsmith/pen/mPByya/
Slide 26
Danger! ARIA tabs h^p://simplyaccessible.com/arIcle/danger-aria-tabs/
Slide 27
Alerts see h^ps://www.w3.org/WAI/tutorials/forms/ noIficaIons/
Slide 28
Sources: • Font: Lato • Skull: Created by Andrew Cameron, from the Noun Project
