1. Screen Rea ript aSc A Jav RI ithA w der + Accessible Rich Internet Applica1ons

2. Glenda Sims @goodwitch deque.com knowbility #a11y

3. GeAng to Know ARIA ARIA: What & Why Landmarks Rela1onships Accessible JavaScript Widgets – ARIA Design PaKerns ARIA Golden Rules

4. ARIA: WHAT & WHY

5. The First Web Page hKp://info.cern.ch/hypertext/WWW/TheProject.html

6. Today’s Dynamic Web Applica1ons

7. Screen Readers Get Smart Screen Readers love HTML Originally screen readers could not understand Dynamic Updates to Content -­‐ AJAX JavaScript Custom Widgets -­‐ like… – Collapsible Content – Tabs – Slider ARIA developed so screen readers can love JavaScript too!

8. Is it safe to use ARIA yet?

9. Jump into ARIA

10. Browser Screen Reader Internet Explorer 8+ JAWS Firefox NVDA Safari VoiceOver Browser/Screen Reader Combina1ons

11. Can I Use…ARIA? hKp://caniuse.com/#feat=wai-­‐aria

12. ARIA TO THE RESCUE

13. ARIA Features Roles – describe the structure of the Web page such as headings and regions Roles – describe the type of javascript widget presented "menu," "treeitem," "slider” Proper1es – describe the state javascript widgets are in such as "checked" for a check box Focus – provide keyboard naviga1on for all ac1ve elements

14. Get Your Feet Wet

15. LANDMARKS

16. Document Landmark Roles

17. role=“banner” role=“naviga1on” role=“search” role=“main” role=“conten1nfo” Try Adding These Landmark Roles! 1. Banner – header of the page, for example banner image and the logo. 2. Naviga1on – links to navigate the site and related sites 3. Search – contains search form for the site 4. Main – core content of the page 5. Content Info – child content: footnotes, links to privacy statements…

18. Deque Home Page is Designed with Landmark Roles

19. Deque Home Page Landmakr Roles

20. 1. 2. See ARIA Document Landmarks Install Juice Studio Accessibility Toolbar (for Firefox) addons.mozilla.org/en-­‐us/firefox/addon/juicy-­‐studio-­‐accessibility-­‐too/ From the ARIA menu, select “Document landmarks”

21. ARIA Landmarks in VoiceOver

22. Roll up your pants and wade in a liKle deeper

23. RELATIONSHIPS Form Labeling & Instruc1ons

24. Accessible Form Labeling & Instruc1ons Great ar1cle by Karl Groves (a11y viking) hKp://www.karlgroves.com/2011/10/10/ accessible-­‐form-­‐labeling-­‐instruc1ons/

25. High-­‐Level Form Field Accessibility All form elements should have explicit labels Labels are clear and informa1ve Format requirements are indicated hKp://www.karlgroves.com/2011/10/10/ accessible-­‐form-­‐labeling-­‐instruc1ons/

26. S1ck with the HTML Labeling Basics Date:

27. Use aria-­‐describedby for Instruc1ons Date: <input type=“text” name=“datex” id=“datex” aria-­‐describedby=“instructs1”/> must be mm/dd/yyyy format

28. Time to Jump In!

29. ARIA DESIGN PATTERNS Accessible JavaScript Widgets

30. ARIA Design PaKerns

31. OPEN AJAX ACCESSIBILITY EXAMPLE FOR TAB PANEL

32. ARIA Tab Panel Example Happy Time Pizza On-­‐line Ordering System <li id="tab1" class="tab selected" aria-­‐controls="panel1" aria-­‐selected="true" role="tab" tabindex="0">Crust <li id="tab2" class="tab" aria-­‐controls="panel2" role="tab" aria-­‐selected="false" tabindex="-­‐1">Veggies <li id="tab3" class="tab" aria-­‐controls="panel3" role="tab" aria-­‐selected="false" tabindex="-­‐1">Carnivore <li id="tab4" class="tab" aria-­‐controls="panel4" role="tab" aria-­‐selected="false" tabindex="-­‐1">Delivery Source: hKp://www.oaa-­‐accessibility.org/examplep/tabpanel1/

33. ARIA Tab Panel Example -­‐ Roles Happy Time Pizza On-­‐line Ordering System <li id="tab1" class="tab selected" aria-­‐controls="panel1" aria-­‐selected="true" role="tab" tabindex="0">Crust <li id="tab2" class="tab" aria-­‐controls="panel2" role="tab" aria-­‐selected="false" tabindex="-­‐1">Veggies <li id="tab3" class="tab" aria-­‐controls="panel3" role="tab" aria-­‐selected="false" tabindex="-­‐1">Carnivore <li id="tab4" class="tab" aria-­‐controls="panel4" role="tab" aria-­‐selected="false" tabindex="-­‐1">Delivery Source: h*p://www.oaa-­‐accessibility.org/examplep/tabpanel1/

34. ARIA Tab Panel Example -­‐ Rela1onship Happy Time Pizza On-­‐line Ordering System <li id="tab1" class="tab selected" aria-­‐controls="panel1" aria-­‐selected="true" role="tab" tabindex="0">Crust <li id="tab2" class="tab" aria-­‐controls="panel2" role="tab" aria-­‐selected="false" tabindex="-­‐1">Veggies <li id="tab3" class="tab" aria-­‐controls="panel3" role="tab" aria-­‐selected="false" tabindex="-­‐1">Carnivore <li id="tab4" class="tab" aria-­‐controls="panel4" role="tab" aria-­‐selected="false" tabindex="-­‐1">Delivery Source: h*p://www.oaa-­‐accessibility.org/examplep/tabpanel1/

35. ARIA Tab Panel Example -­‐ State Happy Time Pizza On-­‐line Ordering System <li id="tab1" class="tab selected" aria-­‐controls="panel1" aria-­‐selected="true" role="tab" tabindex="0">Crust <li id="tab2" class="tab" aria-­‐controls="panel2" role="tab" aria-­‐selected="false" tabindex="-­‐1">Veggies <li id="tab3" class="tab" aria-­‐controls="panel3" role="tab" aria-­‐selected="false" tabindex="-­‐1">Carnivore <li id="tab4" class="tab" aria-­‐controls="panel4" role="tab" aria-­‐selected="false" tabindex="-­‐1">Delivery Source: h*p://www.oaa-­‐accessibility.org/examplep/tabpanel1/

36. ARIA Widget Roles alert alertdialog buKon checkbox dialog gridcell link log marquee menuitem menuitemcheckbox menuitemradio op1on progressbar radio scrollbar slider spinbuKon status tab tabpanel textbox 1mer tool1p treeitem

37. ARIA Rela1onship AKributes aria-­‐ac1vedescendant aria-­‐controls aria-­‐describedby aria-­‐flowto aria-­‐labelledby aria-­‐owns aria-­‐posinset aria-­‐setsize

38. ARIA Widget AKributes aria-­‐autocomplete aria-­‐haspopup aria-­‐label aria-­‐level aria-­‐mul1line aria-­‐mul1selectable aria-­‐orienta1on aria-­‐readonly aria-­‐required aria-­‐sort aria-­‐valuemax aria-­‐valuemin aria-­‐valuenow aria-­‐valuetext aria-­‐checked (state) aria-­‐disabled (state) aria-­‐expanded (state) aria-­‐hidden (state) aria-­‐invalid (state) aria-­‐pressed (state) aria-­‐selected (state

39. ARIA Design PaKerns www.w3.org/TR/ wai-­‐aria-­‐prac1ces

40. ARIA RULES OF SAFETY

41. Use ARIA Wisely! Build custom controls responsibly Use naJve HTML markup first – Safer – Simpler – Full Accessibility Built-­‐in Use Custom Controls – Only when there is a func1onal advantage – Are you sure you can’t do this with na1ve HTML mark-­‐up? – Make sure check for the following: Did you set the appropriate role? Did you indicated the state(s) and proper1es? Do states and proper1es change correctly when values change? Can you use it with keyboard alone? Can you use it with a screen reader?

42. Deque Digital Equality