Accessible Widgets 1/4 (Class)

A presentation at John Slatin AccessU 2016 in May 2016 in Austin, TX, USA by Eric Eggert

Slide 1

Slide 1

Accessible Widgets Eric Eggert, Knowbility & W3C AccessU 2016, May 9th

Slide 2

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

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

Slide 4

Date picker, Time field, Combo box, Progress bar

Slide 5

Slide 5

Context

Slide 6

Slide 6

User Experience

Slide 7

Slide 7

Usability

Slide 8

Slide 8

To ARIA or not to ARIA?

Slide 9

Slide 9

  1. 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

Slide 10

  1. Do not change naDve semanDcs, unless you really have to .

Slide 11

Slide 11

Example:

<h1 role="button">

heading button</h1>

Slide 12

Slide 12

Example:

<h1><button>heading

button</button></h1>

Slide 13

Slide 13

All interacDve ARIA controls must be usable with the keyboard.

Slide 14

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

Slide 15

Do not use role="presentaDon" or aria-hidden="true" on a visible focusable element .

Slide 16

Slide 16

All interacDve elements must have an accessible name.

Slide 17

Slide 17

All the Demos! h]p://codepen.io/collecHon/nqBLjL/

Slide 18

Slide 18

Date Picker

Slide 19

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

Slide 20

HTML5 input type="date" <label for=&#34;date&#34;>Date</label

<input type=&#34;date&#34; id=&#34;date&#34;>

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

ARIA Enabled h]p://www.w3.org/TR/wai-aria-pracHces/#datepicker

Slide 29

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

Slide 30

Time Field

Slide 31

Slide 31

HTML5 input type="2me" <label for=&#34;Hme&#34;>Time</label

<input type="Hme" id="Hme ">

Slide 32

Slide 32

Slide 33

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 34

Slide 35

Slide 35

Time Field Example • blog.fastmail.com/2015/12/15/the-anatomy-of- a-good-date-and-Hme-widget/

Slide 36

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

Slide 37

Combo Box aka Autocomplete

Slide 38

Slide 38

Remember?
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 39

Slide 39

Slide 40

Slide 40

Combo box Example • www.oaa-accessibility.org/example/10/

Slide 41

Slide 41

Progress Bar

Slide 42

Slide 42

HTML5 progress element‽ <progress value="0.6" max="1">60%</ progress>

<progress indeterminate>Loading </progress>

Slide 43

Slide 43

Progress bar Example • h]p://getbootstrap.com/components/#progress- label

• www.oaa-accessibility.org/example/27/

Slide 44

Slide 44

Sources: • Font: Lato • Skull: Created by Andrew Cameron, from the Noun Project