Top Banner
Aaron Gustafson Why ARIA? or Why should I bother to make my website accessible?
80

Why ARIA? [DevChatt 2010]

Jan 27, 2015

ReportDownload

Technology

This session covers why you should pay attention to the accessibility of your web site or application and then walks you through how to do it using WAI-ARIA and JavaScript.

  • 1. Why ARIA? or Why should I bother to make mywebsite accessible? Aaron Gustafson

2. We are creatingricher onlineexperiences 3. ...and the barriers which prohibit them.photo by drcorneilus 4. Accessibility is crucialAaron Gustafsonphoto by TimothyJ 5. Google is a voracious consumer of the web. And its blind.photo by Ed Yourdon 6. But accessibility isnt only aboutsupportingscreen readers. 7. What if you cant use a mouse?photo by lastquest 8. What if you dont see a change?photo by placenamehere 9. We can and must build better. photo by Guillermo 10. Why ARIA?! DevChatt - March 2010 Building better Semantics (markup) convey the underlying meaning of the content... but if poorly applied, meaning can be obscured. (x)HTML 11. Why ARIA?!DevChatt - March 2010 Building better CSS can enhance usability through visual clues... but it can also reduce accessibility if misused. CSS(x)HTML 12. Why ARIA?! DevChatt - March 2010 Building better JavaScript can be used to build more intuitive interfaces... but it cannot be relied on 100% of the time.JS CSS(x)HTML 13. Why ARIA?! DevChatt - March 2010 Building better WAI-ARIA extends the semantics of the document to provide additional insight into the state ofARIA the interface and how to interact with it. JS CSS(x)HTML 14. Why ARIA?!DevChatt - March 2010 Progressive Enhancement User ExperienceARIAJS BASICADVANCED CSSBrowser Capabilities (x)HTML 15. WAI-ARIA is a new(ish) tool photo by Saffanna 16. Semantics+ 17. Map OS concepts to the web photo by steve-uk 18. Why ARIA?!DevChatt - March 2010HTML 19. Why ARIA?! DevChatt - March 2010http://tinyurl.com/cwyvnyhttp://habilis.net/validator-sac/ 20. Call attention to important piecesphoto by Verity Cridland 21. Why ARIA?!DevChatt - March 2010 Structural Rolesrole="banner" 22. Why ARIA?!DevChatt - March 2010 Structural Rolesrole="main" 23. Why ARIA?!DevChatt - March 2010 Structural Rolesrole="navigation" 24. Why ARIA?! DevChatt - March 2010 Structural Roles role="article" 25. Why ARIA?!DevChatt - March 2010 Structural Rolesrole="list"(but hopefully you used a ul or ol) 26. Why ARIA?!DevChatt - March 2010 Structural Rolesrole="form" 27. Why ARIA?!DevChatt - March 2010 Structural Rolesrole="complementary" 28. Why ARIA?!DevChatt - March 2010 Structural Rolesrole="contentinfo" 29. Why ARIA?!DevChatt - March 2010 Structural Rolesrole="list" 30. Why ARIA?!DevChatt - March 2010 Structural Rolesrole="listitem" 31. Why ARIA?!DevChatt - March 2010 Structural Roles Document Structure articleheading presentation columnheader img region definition listrow directorylistitemrowheader document mathseparator groupnoteLandmarks applicationcontentinfo navigation banner formsearch complementarymain 32. Explain what something is& how it works photo by DavePress 33. Why ARIA?!DevChatt - March 2010 Widget Roles OK (of course OK would be better)

Something went wrong.

Something went wrong.

34. Why ARIA?! DevChatt - March 2010 Widget Roles alertmarqueeslider alertdialogmenuitem spinbutton button menuitemcheckbox status checkbox menuitemradiotab combobox option tabpanel dialog progressbartextbox gridcell radiotimer link radiogroup tooltip logscrollbartreeitemWidget Container Roles grid menubartree listboxtablisttreegrid menu toolbar 35. Why ARIA?! DevChatt - March 2010 Widget Properties aria-activedescendant aria-multiline aria-atomic aria-multiselectable aria-autocomplete aria-orientation aria-controls aria-owns aria-describedbyaria-posinset aria-dropeffect aria-readonly aria-flowto aria-relevant aria-haspopup aria-required aria-labelaria-setsize aria-labelledby aria-sort aria-levelaria-valuemax aria-live aria-valuemin 36. Indicate whats going onphoto by exfordy 37. Why ARIA?! DevChatt - March 2010 Widget States B B(off) (on) 38. Why ARIA?! DevChatt - March 2010 Widget States B B(off) (on) 39. Why ARIA?!DevChatt - March 2010 Widget States B B(off) (on) 40. Why ARIA?!DevChatt - March 2010 Complex Widgetsrole="application" 41. Why ARIA?!DevChatt - March 2010 Complex Widgets role="slider" aria-labelledby="label_handle_valueA" aria-valuemin="0" aria-valuemax="71" aria-valuenow="22" aria-valuetext="Apr 04" 42. Why ARIA?! DevChatt - March 2010 Complex Widgets role="presentation" 43. Why ARIA?! DevChatt - March 2010 Widget States aria-busy aria-checked aria-disabled aria-expanded aria-grabbed aria-hidden aria-invalid aria-pressed aria-selected aria-valuenow (the W3C denes this as a property) aria-valuetext (ditto) 44. Highlight living contentphoto by kevin1024 45. Why ARIA?! DevChatt - March 2010 Live Regions 140 46. Why ARIA?! DevChatt - March 2010 Live Regions 140 47. Why ARIA?! DevChatt - March 2010 Live Regions 140 characters left 48. Why ARIA?!DevChatt - March 2010 Notication Options off change not announcedpolite change announced after user completes her current activityassertive user agent should interrupt the users activity, but not immediatelyrude user agent should interrupt the users activity immediately 49. Manage focus with slight-of-hand photo by cfpg 50. Why ARIA?! DevChatt - March 2010 tabindex helps manage focus

This div can now receive focus using a keyboards tab key. How cool is that?

This div wont be focused by a user via the tab key, but JavaScript can focus() it. Nifty, huh?

51. Piecing it all together photo by Richard Jones 52. Why ARIA?!DevChatt - March 2010 Lets Build a Tabbed Interface 53. Why ARIA?! DevChatt - March 2010 Traditional approach Pumpkin Pie

Overview

Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!

...
...
  • Overview
  • Ingredients
  • Directions
  • Nutrition

54. Why ARIA?! DevChatt - March 2010 Static HTML with no style 55. Why ARIA?! DevChatt - March 2010 A little typography 56. Why ARIA?!DevChatt - March 2010 Typography and color 57. Why ARIA?! DevChatt - March 2010 Taking another look 58. Why ARIA?! DevChatt - March 2010 Taking another look .tabbed 59. Why ARIA?! DevChatt - March 2010 Required source Pumpkin Pie

Overview

Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!

... Ingredients
  • 1 (9in) unbaked deep dish pie crust
  • cup white sugar ...
Directions ...

60. Why ARIA?!DevChatt - March 2010 Understanding the ow Split the content & make Page some tabsJS?YesNo 61. Why ARIA?! DevChatt - March 2010 Mouse-based interaction 62. Why ARIA?!DevChatt - March 2010 Assigning ARIA Roles role="application" aria-activedescendant="folder-1" 63. Why ARIA?!DevChatt - March 2010 Assigning ARIA Roles role="tabpanel" aria-hidden="false" aria-labelledby="folder-1-tab" 64. Why ARIA?!DevChatt - March 2010 Assigning ARIA Roles role="tablist" 65. Why ARIA?! DevChatt - March 2010 Assigning ARIA Roles role="tab" aria-selected="false" aria-describedby="folder-4" 66. Why ARIA?!DevChatt - March 2010 Assigning ARIA Rolesrole="tab"aria-selected="true"aria-describedby="folder-1" 67. Why ARIA?! DevChatt - March 2010 Updating states and properties tab.onclick= swap;// ...function swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); // ... tab.setAttribute( 'aria-selected', 'true' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); // ... _cabinet.setAttribute( 'aria-activedescendant', _active ); } 68. Why ARIA?! DevChatt - March 2010 Enabling the keyboard tab.onclick = swap; tab.onkeydown = moveFocus; tab.onfocus = swap; 69. Why ARIA?!DevChatt - March 2010 Enabling the keyboard tabindex="0" 70. Why ARIA?! DevChatt - March 2010 Enabling the keyboard tabindex="-1" 71. Why ARIA?!DevChatt - March 2010 Enabling the keyboard function moveFocus( e ) { e = ( e ) ? e : event; var tab = e.target || e.srcElement, key = e.keyCode || e.charCode, pass = true; tab = getTab( tab );// keyboard handling goes hereif ( ! pass ) { return cancel( e ); } } 72. Why ARIA?! DevChatt - March 2010 Enabling the keyboard function getTab( tab ) { while ( tab.nodeName.toLowerCase() != 'li' ) { tab = tab.parentNode; } return tab; } 73. Why ARIA?!DevChatt - March 2010 Enabling the keyboard function moveFocus( e ) { // ... switch ( key ) { case 37: // left arrow case 38: // up arrow move( tab, 'previous', false ); pass = false; break; // down (39), right (40), home (36), end (35) // should be added here case 27: // escape tab.blur(); pass = false; break; } // ... } 74. Why ARIA?! DevChatt - March 2010 Enabling the keyboard function move( tab, direction, complete ) { if ( complete ) { if ( direction == 'previous' ) { tab.parentNode.childNodes[0].focus(); } else { tab.parentNode.childNodes[tab.parentNode .childNodes.length-1].focus(); } } else { var target = direction == 'previous' ? tab.previousSibling: tab.nextSibling; if ( target ) { target.focus(); } } } 75. Why ARIA?! DevChatt - March 2010 Enabling the keyboard function swap( e ){ // ... old_tab.setAttribute( 'aria-selected', 'false' ); old_tab.setAttribute( 'tabindex', '-1' ); // ... tab.setAttribute( 'aria-selected', 'true' ); tab.setAttribute( 'tabindex', '0' ); // ... old_folder.setAttribute( 'aria-hidden', 'true' ); old_folder.setAttribute( 'tabindex', '-1' ); // ... new_folder.setAttribute( 'aria-hidden', 'false' ); new_folder.setAttribute( 'tabindex', '0' ); // ... } 76. Why ARIA?!DevChatt - March 2010 The Fruit (Pie) of Our Labor 77. Why ARIA?!DevChatt - March 2010 Who is Supporting WAI-ARIA? 78. Why ARIA?!DevChatt - March 2010 For More WAI-ARIA Spec w3.org/TR/wai-aria/ WAI-ARIA Support in Browsers paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF.html TabInterface easy-designs.github.com/tabinterface.js/ 79. Why ARIA?! DevChatt - March 2010 Slides available athttp://slideshare.net/AaronGustafsonThis presentation is licensed under Creative CommonsAttribution-Noncommercial-Share Alike 3.0 ickr Photo Credits ferris wheel? not yet... by drcorneilus Hunter Museum by TimothyJ No, I don't need any help - I'm by Ed Yourdon The almighty mouse by lastquest wii browser - zoomed in by placenamehere Legospective by Guillerm I love my toolbox 15 July Scavenger Hunt by Saffanna Dual Samsung Monitors by steve-ukKeystone of the Monumental Arch, by Verity Cridland Lego by DavePressiFlickr touch screen by exfordy Green Plant by kevin1024Cartas by cfpg Lego Millenium Falcon by Richard Jones

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.