Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie ARIA Gone Wild
Ähnlich wie ARIA Gone Wild (20)
Mehr von Jared Smith
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
ARIA Gone Wild
- 1. ARIA Gone Wild! Jared Smith @jared_w_smith webaim.org
- 2. ARIA n. A solo vocal piece with instrumental accompaniment, as in an opera.
- 4. why aria?
- 5. weaknesses in html
- 7. soware-like interactions in web apps
- 8. complex web applications
- 9. aria is sexy and cool
- 10. aria allows us to build accessibility into modern web applications today
- 11. aria does not solve all accessibility issues
- 12. “How do I download aria?”
- 13. aria is simply markup roles, states, and properties <div role=”main”>
- 14. aria does not change browser functionality or visual appearance
- 15. aria changes and enhances native html semantics aria always wins
- 16. most answers are in the specification using WAI-ARIA in HTML
- 18. aria is supported* by nearly all modern browsers, screen readers, and scripting libraries *support varies
- 19. you can only make your content more accessible by using aria you lose nothing by using it now (if done correctly)
- 20. when shouldn’t i use aria?
- 21. when native html will get the job done Bad: <img src="submit.jpg" onclick=...> OK: <a onclick="..."><img src="submit.jpg"... Better: <a role="button" onclick="..."> <img src="submit.jpg"... Best: <button onclick="...">
- 22. aria landmarks
- 23. application, banner, complementary, contentinfo, main, navigation, form, and search <ul role=”navigation”> <div role=”main”> <form role=”search”>
- 24. you can (but don’t have to) label multiple landmarks of the same type to differentiate them <ul role=”navigation” aria-label=”main navigation”> <div role=”navigation” aria-labelledby=”catHeading”> <h2 id=”catHeading”>Categories</h2>
- 25. don’t overdo it
- 26. adding aria just because you can is a slippery slope
- 27. typically only one per page: banner, contentinfo, and main
- 28. avoid orphaned content put everything in a landmark
- 29. the end of “skip” links?
- 30. screen reader “freakout” mode when an element that has focus or is being read is modified or destroyed
- 31. screen reader “freakout” mode can be controlled by allowing manual control of updates, setting focus with javascript, aria live regions, aria alerts, etc.
- 32. learn the power of tabindex=0 and tabindex=-1 learn the dangers of tabindex=1+
- 33. role=”alert” read me right now regardless of focus also alertdialog
- 34. role=”presentation” hides roles of elements and most descendants from assistive technology <table role=”presentation”> will should not hide default roles of navigable elements
- 35. role=”application” forms mode vs. reading mode
- 36. application or forms mode causes screen reader keystrokes to be sent to the browser/application standard screen reader shortcuts are disabled
- 37. <body role=”application”> makes it very difficult to manually move out of application/forms mode
- 38. some aria elements (tree view, slider, table, tabpanel, dialog, toolbar, menus, etc.) have an assumed application role
- 39. test without a mouse ... and test without a mouse in a screen reader screen readers change keyboard interaction behavior
- 40. follow the aria design patterns
- 41. program esc key to cancel dialogs, menus, etc.
- 42. aria-required=”true” not necessary if it’s intuitive that the field is required does not change functionality, only semantics
- 43. aria-invalid=”true” identify broken or errant form fields
- 44. let css do the heavy liing you change semantic attributes, let css handle styling [aria-invalid=true] { border : 2px solid red; }
- 45. aria-disabled=”true” disabled=”disabled” in html removes object from keyboard flow and have extremely poor contrast aria-disabled=”true” allows it to remain in the keyboard flow, but be presented as disabled.
- 46. aria-hidden=”true” hides element and all descendants child elements can’t be unhidden [aria-hidden=true]{ display:none; }
- 47. aria-labelledby overcomes html’s 1-to-1 label to form control limitation
- 48. Name Age Weight Verl 24 145 Ethel aria-labelledby=“row2header ageheader”
- 49. aria-haspopup indicate that a link or button triggers an in-page dialog or sub-menu
- 50. aria-expanded indicate the status of expandable elements should usually be placed on the link or button that controls the expansion
- 51. ... and much, much more... role=”menu” role=”tree” role=”grid” role=”slider” role=”progressbar” role=”tooltip” role=”tabpanel” aria-live aria-grabbed etc. Authoring Practices document provides interaction models and design patterns http://www.w3.org/WAI/PF/aria-practices/
- 52. sometimes things fail, even if you’ve followed the specification screen reader testing is vital support is improving
- 53. wcag 2.0 techniques do not yet include much aria focus on accessibility, not just compliance
- 54. html5 mappings <div> <div role=”main”> <main role=”main”> <main> <input> <input aria-required=”true”> <input required>
- 55. the future is html5
- 56. thank you Jared Smith @jared_w_smith webaim.org