Accessible Widgets Eric Eggert, Knowbility & W3C AccessU 2016, May 9th
Slide 1
Slide 2
Eric Eggert G e r m a n y 2 0 1 3 – t o d a y : 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 T r a n s l a H 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 Hps, Modal dialogs, Dynamic table filtering and sorHng 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 control, Tabs, Alerts May 10th, 2:15-3:45 JBWS 163 Patrick Fox Eric Eggert Wizard progress indicator, File selector and upload, Form validaHon, Search by locaHon, Dynamic applicaHon page elements and flow
Slide 4
Date picker, Time field, Combo box, Progress bar
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 naDve HTML5 element or aJribute with the semanDcs 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 naDve semanDcs, unless you really have to .
Slide 11
Example:
<h1 role="button">heading button</h1>
Slide 12
Example:
<h1><button>headingbutton</button></h1>
Slide 13
All interacDve ARIA controls must be usable with the keyboard.
Slide 14
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 15
Do not use role="presentaDon" or aria-hidden="true" on a visible focusable element .
Slide 16
All interacDve elements must have an accessible name.
Slide 17
All the Demos! h]p://codepen.io/collecHon/nqBLjL/
Slide 18
Date Picker
Slide 19
HTML5 input type="date" The input element with a type a]ribute whose value is "date" represents a control for secng the element’s value to a string represenHng a date.
Slide 20
HTML5 input type="date" <label for="date">Date</label
<input type="date" id="date">Slide 21
Slide 22
Slide 23
Slide 24
Slide 25
Slide 26
Slide 27
Slide 28
ARIA Enabled h]p://www.w3.org/TR/wai-aria-pracHces/#datepicker
Slide 29
Date Picker Examples • www.oaa-accessibility.org/examplep/datepicker1/
• freqdec.github.io/datePicker/demo/#demo-1
• whatsock.com/tsg/Coding%20Arena/ARIA %20Date%20Pickers/ARIA%20Date%20Picker %20%28Basic%29/demo.htm
• blog.fastmail.com/2015/12/15/the-anatomy-of- a-good-date-and-Hme-widget/
Slide 30
Time Field
Slide 31
HTML5 input type="2me" <label for="Hme">Time</label
<input type="Hme" id="Hme ">
Slide 32
Slide 33
Or: HTML5 input w/ datalist <label for="time">Time</label> <input type="text" id="time" list="times"> <datalist id="times">
<option value="1pm">1pm</option> <option value="2pm">2pm</option> <option value="3pm">3pm</option> </datalist>Slide 34
Slide 35
Time Field Example • blog.fastmail.com/2015/12/15/the-anatomy-of- a-good-date-and-Hme-widget/
Slide 36
Select <label for="time">Time</label> <select id="time">
<option value="1pm">1pm</option> <option value="2pm">2pm</option> <option value="3pm">3pm</option> </select >Slide 37
Combo Box aka Autocomplete
Slide 38
Remember?
HTML5 input w/ datalist
<label for="time">Time</label>
<input type="text" id="time" list="times">
<datalist id="times">
Slide 39
Slide 40
Combo box Example • www.oaa-accessibility.org/example/10/
Slide 41
Progress Bar
Slide 42
HTML5 progress element‽ <progress value="0.6" max="1">60%</ progress>
<progress indeterminate>Loading </progress>
Slide 43
Progress bar Example • h]p://getbootstrap.com/components/#progress- label
• www.oaa-accessibility.org/example/27/
Slide 44
Sources: • Font: Lato • Skull: Created by Andrew Cameron, from the Noun Project
