Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

of

The 5 Layers of Web Accessibility Slide 1 The 5 Layers of Web Accessibility Slide 2 The 5 Layers of Web Accessibility Slide 3 The 5 Layers of Web Accessibility Slide 4 The 5 Layers of Web Accessibility Slide 5 The 5 Layers of Web Accessibility Slide 6 The 5 Layers of Web Accessibility Slide 7 The 5 Layers of Web Accessibility Slide 8 The 5 Layers of Web Accessibility Slide 9 The 5 Layers of Web Accessibility Slide 10 The 5 Layers of Web Accessibility Slide 11 The 5 Layers of Web Accessibility Slide 12 The 5 Layers of Web Accessibility Slide 13 The 5 Layers of Web Accessibility Slide 14 The 5 Layers of Web Accessibility Slide 15 The 5 Layers of Web Accessibility Slide 16 The 5 Layers of Web Accessibility Slide 17 The 5 Layers of Web Accessibility Slide 18 The 5 Layers of Web Accessibility Slide 19 The 5 Layers of Web Accessibility Slide 20 The 5 Layers of Web Accessibility Slide 21 The 5 Layers of Web Accessibility Slide 22 The 5 Layers of Web Accessibility Slide 23 The 5 Layers of Web Accessibility Slide 24 The 5 Layers of Web Accessibility Slide 25 The 5 Layers of Web Accessibility Slide 26 The 5 Layers of Web Accessibility Slide 27 The 5 Layers of Web Accessibility Slide 28 The 5 Layers of Web Accessibility Slide 29 The 5 Layers of Web Accessibility Slide 30 The 5 Layers of Web Accessibility Slide 31 The 5 Layers of Web Accessibility Slide 32 The 5 Layers of Web Accessibility Slide 33 The 5 Layers of Web Accessibility Slide 34 The 5 Layers of Web Accessibility Slide 35 The 5 Layers of Web Accessibility Slide 36 The 5 Layers of Web Accessibility Slide 37 The 5 Layers of Web Accessibility Slide 38 The 5 Layers of Web Accessibility Slide 39 The 5 Layers of Web Accessibility Slide 40 The 5 Layers of Web Accessibility Slide 41 The 5 Layers of Web Accessibility Slide 42 The 5 Layers of Web Accessibility Slide 43 The 5 Layers of Web Accessibility Slide 44 The 5 Layers of Web Accessibility Slide 45 The 5 Layers of Web Accessibility Slide 46 The 5 Layers of Web Accessibility Slide 47 The 5 Layers of Web Accessibility Slide 48 The 5 Layers of Web Accessibility Slide 49 The 5 Layers of Web Accessibility Slide 50 The 5 Layers of Web Accessibility Slide 51 The 5 Layers of Web Accessibility Slide 52 The 5 Layers of Web Accessibility Slide 53 The 5 Layers of Web Accessibility Slide 54 The 5 Layers of Web Accessibility Slide 55 The 5 Layers of Web Accessibility Slide 56 The 5 Layers of Web Accessibility Slide 57 The 5 Layers of Web Accessibility Slide 58 The 5 Layers of Web Accessibility Slide 59 The 5 Layers of Web Accessibility Slide 60 The 5 Layers of Web Accessibility Slide 61 The 5 Layers of Web Accessibility Slide 62 The 5 Layers of Web Accessibility Slide 63 The 5 Layers of Web Accessibility Slide 64 The 5 Layers of Web Accessibility Slide 65 The 5 Layers of Web Accessibility Slide 66 The 5 Layers of Web Accessibility Slide 67 The 5 Layers of Web Accessibility Slide 68 The 5 Layers of Web Accessibility Slide 69 The 5 Layers of Web Accessibility Slide 70 The 5 Layers of Web Accessibility Slide 71 The 5 Layers of Web Accessibility Slide 72 The 5 Layers of Web Accessibility Slide 73 The 5 Layers of Web Accessibility Slide 74 The 5 Layers of Web Accessibility Slide 75 The 5 Layers of Web Accessibility Slide 76 The 5 Layers of Web Accessibility Slide 77
Upcoming SlideShare
Accessible Javascript with and without WAI ARIA
Next
Download to read offline and view in fullscreen.

48 Likes

Share

Download to read offline

The 5 Layers of Web Accessibility

Download to read offline

In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility.
Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone.
Get more information about the event here:
http://skillsmatter.com/event/ajax-ria/web-accessibility

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

The 5 Layers of Web Accessibility

  1. Hi there! :-)
  2. Ogres = Onions = Web Standards?
  3. LAYERS!
  4. Common Frontend Development knows 3 Layers
  5. The 5 Layers of Web Accessibility YDN Tuesday 5.5.2009 Dirk Ginader http://ginader.com http://twitter.com/ginader
  6. The Markup is the most important Layer of all
  7. Source order = tab order
  8. Best matching HTML Element for the job?
  9. Is the page understandable and usable without CSS?
  10. Interaction using links, forms and reloads
  11. CSS can make inaccessible too
  12. display:none and visibility:hidden hide from everyone
  13. :hover only works for a mouse
  14. :focus to the rescue!
  15. always use them combined: a:hover, a:focus{ /*awesome CSS*/ }
  16. CSS is for Design not for Interaction
  17. Javascript is the icing on the cake
  18. Does anything, you need the user to do, work without Javascript?
  19. then we can add some Magic
  20. hijack existing interaction elements
  21. create new buttons for JS only interactions
  22. Screenreaders do know JS. They often just don’t know what happens...
  23. focus() to the rescue!
  24. mind the tab order
  25. focus() to the rescue!
  26. tabindex=0 makes even divs keyboard accessible
  27. tabindex=-1 for JS only tab access
  28. yeah focus()
  29. Ajax = delays = tricky to communicate
  30. inform about what happens!
  31. you guessed it: focus()
  32. Screenreaders update their Virtual Buffer “regularly”
  33. while in Forms Mode they update in realtime
  34. use the Forms Mode to update the Buffer when you need to
  35. another layer: different CSS if Javascript is available
  36. Change the interface for the JS version
  37. CSS is much faster than Javascript
  38. Tell CSS that there’s JS: document.documentElement.className += ” js”;
  39. .module{ /* nice CSS for the non JS Layout */ } .js .module{ /* awesome CSS for the JS Layout*/ }
  40. How does your CSS react when the text size changes?
  41. Screen Magnifier only show a very small part of the screen
  42. make sure everybody knows what happens right now
  43. yellow fades + focus() help to find and understand
  44. the last Layer the new Hotness
  45. WAI-ARIA maps existing and well known OS concepts to custom Elements in the Browser
  46. Adds semantics to non semantic Markup
  47. provides instant updates and notifications
  48. Roles
  49. • alert • banner • button • menuitem • slider
  50. Document Landmark Roles
  51. • application • banner • complementary • contentinfo • main • navigation • search
  52. States and Properties
  53. • aria-valuemin • aria-valuemax • aria-valuenow • aria-valuetext • aria-labelledby
  54. Live Regions informing about changes
  55. • off • polite • assertive • (rude)
  56. You can use it today
  57. • it does no validate • you can simply add the properties using Javascript as it depends on it anyway
  58. • everybody can add Landmark roles now • aria-required=”true” makes a dream come true
  59. Don’t rely on it
  60. • There are no stats but we know that still a lot of Screenreader users are stuck on old versions without ARIA support • Progressive Enhancement all over again...
  61. Examples
  62. without Javascript http://finance.yahoo.com/currency-converter
  63. without Javascript http://finance.yahoo.com/currency-converter
  64. without Javascript http://finance.yahoo.com/currency-converter
  65. with Javascript http://finance.yahoo.com/currency-converter
  66. with Javascript http://finance.yahoo.com/currency-converter
  67. with Javascript http://finance.yahoo.com/currency-converter
  68. http://uk.tv.yahoo.com/
  69. more • http://cli.gs/wai-aria • http://cli.gs/accessible-tabs • http://cli.gs/accessibilitytips • http://cli.gs/wai-aria-video
  70. http://ginader.com http://twitter.com/ginader
  • YaobinDong

    Oct. 13, 2017
  • evawesterhoff

    Sep. 9, 2017
  • msales

    Jun. 11, 2017
  • midorichan2

    Feb. 18, 2017
  • johnmdsilva

    Dec. 9, 2016
  • praveenkanoji1

    Jun. 6, 2016
  • sunyoungjang1

    Nov. 20, 2014
  • blkdykegoddess

    Nov. 12, 2013
  • mattprice94

    Oct. 5, 2013
  • chinglongsu

    Dec. 26, 2012
  • veeliam

    Nov. 30, 2012
  • rameshvr1

    Feb. 23, 2012
  • jalbertbowden

    Nov. 18, 2011
  • jameschandler

    Nov. 15, 2011
  • wojciechzajac

    Nov. 15, 2011
  • sejoska

    Nov. 2, 2011
  • sbustelo

    Oct. 31, 2011
  • gman81

    Jul. 17, 2011
  • JerryBraccia

    May. 11, 2011
  • webeforei

    Oct. 13, 2010

In this month's YDN Tuesday Dirk Ginader, Web Developer and part of the Accessibility Task Force at Yahoo!, will talk about Web Accessibility. Starting with basic markup and ending with accessible javascript and WAI ARIA he'll cover best practices and lots of tips and tricks to make your websites and web applications accessible to everyone. Get more information about the event here: http://skillsmatter.com/event/ajax-ria/web-accessibility

Views

Total views

40,957

On Slideshare

0

From embeds

0

Number of embeds

9,226

Actions

Downloads

249

Shares

0

Comments

0

Likes

48

×