Accessible Widgets 4/4 (Class)

Slide 1

Accessible Widgets Part IV Eric Eggert, Knowbility & W3C AccessU 2016, May 10th

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

Wizard progress indicator, File selector and upload, Form valida=on, Search by loca=on, Dynamic applica=on page elements and flow

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 aMribute 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:

heading button</h1>

Slide 12

Example:

Slide 13

Example:

<h1><button>heading

button</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.