56
Jared Smith @jared_w_smith webaim.org ARIA Gone Wild!

ARIA Gone Wild

Embed Size (px)

Citation preview

  • 1.ARIA Gone Wild!Jared Smith@jared_w_smithwebaim.org

2. ARIAn. A solo vocal piece with instrumental accompaniment, as in an opera. 3. Accessible RichInternet Applications 4. why aria? 5. weaknesses inhtml 6. dynamiccontentupdates 7. soware-like interactions in web apps 8. complexwebapplications 9. aria is sexy and cool 10. aria allows us to buildaccessibility into modern web applications today 11. aria does not solve allaccessibilityissues 12. How do Idownloadaria? 13. aria is simply markup roles, states, and properties

14. aria does not change browserfunctionality or visual appearance 15. aria changesand enhances native htmlsemantics aria alwayswins 16. most answersare in thespecificationusingWAI-ARIA inHTML 17. aria is supported*by nearly allmodern browsers, screen readers,and scriptinglibraries *support varies 18. you can only makeyour content moreaccessible by usingariayou lose nothing by using it now(if done correctly) 19. when shouldnt i use aria? 20. when native htmlwill get the job doneBad:OK: 21. aria landmarks 22. application, banner, complementary, contentinfo, main, navigation, form, and search
23. you can (but dont have to) label multiplelandmarks of the same type to dierentiate them
Categories 24. dont overdo it 25. adding aria just because you canis a slippery slope 26. typically only one per page:banner,contentinfo,and main 27. avoid orphaned contentput everything in a landmark 28. the end ofskip links? 29. screen reader freakout modewhen an element that has focus or is being read ismodified or destroyed 30. screen reader freakout modecan be controlled by allowing manual control of updates, setting focus with javascript, aria live regions, aria alerts, etc. 31. learn the power oftabindex=0 and tabindex=-1learn the dangers oftabindex=1+ 32. role=alertread me right nowregardless of focusalso alertdialog 33. role=presentationhides roles of elementsand most descendants from assistive technology will should not hide default roles of navigable elements 34. role=applicationforms mode vs. reading mode 35. application or formsmode causes screenreader keystrokes to be sent to thebrowser/applicationstandard screenreader shortcuts aredisabled 36. makes it very dicult to manually move out of application/forms mode 37. some aria elements (tree view, slider, table,tabpanel, dialog, toolbar, menus, etc.) havean assumed application role 38. test without a mouse... and test without a mousein a screen readerscreen readers change keyboard interactionbehavior 39. follow the ariadesign patterns 40. program esc keyto cancel dialogs, menus, etc. 41. aria-required=true not necessary if its intuitivethat the field is required does not changefunctionality, onlysemantics 42. aria-invalid=true identify broken or errant form fields 43. let css do the heavy liing you change semantic attributes, let css handlestyling[aria-invalid=true] {border : 2px solid red;} 44. aria-disabled=truedisabled=disabled in html removes object from keyboard flow and have extremely poor contrastaria-disabled=trueallows it to remain in thekeyboard flow, but bepresented as disabled. 45. aria-hidden=truehides element and alldescendantschild elements cant be unhidden[aria-hidden=true]{ display:none;} 46. aria-labelledby overcomes htmls1-to-1 label to form control limitation 47. NameAge Weight Verl24 145 Ethelaria-labelledby=row2header ageheader 48. aria-haspopupindicate that a link orbutton triggers anin-page dialog orsub-menu 49. aria-expandedindicate the status of expandable elementsshould usually be placed on the link or button that controls the expansion 50. ... and much, much more...role=menurole=treerole=gridrole=sliderrole=progressbarrole=tooltip role=tabpanel aria-live aria-grabbed etc. Authoring Practices document providesinteraction models and design patternshttp://www.w3.org/WAI/PF/aria-practices/ 51. sometimes things fail,even if youve followed the specification screen reader testingis vitalsupport is improving 52. wcag 2.0 techniques do not yet include much ariafocus on accessibility, not just compliance 53. html5 mappings
54. the future is html5 55. thank youJared Smith@jared_w_smithwebaim.org