Let's get accessible!

1,318 views
833 views

Published on

Web accessibility is a crucial component of how we construct our websites today, some with legal requirements to ensure our websites cater to clients of all abilities and disabilities. But how much do we actually know about web accessibility, it's implications and it's implementation? How much do we know about the accessibility of the latest technologies like HTML5 and WAI-ARIA? And can we use these now? Once you begin to think about web accessibility and accessibility in general, you start to see the world in a very different way.

In this talk, Tady Walsh, will take us through website accessibility, starting at the very beginning and will continue up to and including today's technologies. He will discuss, not only how to cater for the various types of disabilities our website visitors may have, but also the way we as developers and designers should be thinking about website accessibility, in every step of our work.

Bio: Tady is a project manager and information architect with Arekibo Communications. With a background in front-end development, he has been working and thinking about web site design and development for the past 15 years. He's a vocal supporter of cool design, good user experience and considerate development methods. His thoughts and opinions can be found on twitter as @tadywankenobi, on his website at http://www.tadywalsh.com and also on Arekibo's blog http://blog.arekibo.com.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,318
On SlideShare
0
From Embeds
0
Number of Embeds
184
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Let's get accessible!

  1. 1. Let’s get accessible! @RefreshDublin Tady Walsh
  2. 2. Preface
  3. 3. TadyPronounced Tay-deeSpelled T - A - D - Y
  4. 4. Who am I?I am:· A HTML, CSS and PHP developer· A Project Manager for Arekibo Communications· An Information Architect (UX/UI)· An Accessibility Jedi· A co-curator on HTML5 Gallery· A Purple Netscape survivor of the first Browser Wars
  5. 5. The Myths· Accessibility is di cult to add/comply with· Accessible websites are ugly websites· New technology is already outdated· New technology isn’t ready· Making websites accessible is a pain in the ass
  6. 6. Let’s stop talking about making websites accessible. Instead,let’s talk about keeping websites accessible. I’m not sayingthat HTML is a magic bullet but as long as you are usingthe most semantically appropriate elements to mark upyour content, you are creating something [that] is, bydefault, accessible. It’s only afterwards, when we startadding the bells and whistles, that the problems can begin. Jeremy Keith, 2008
  7. 7. Web Accessibility· The practice of designing, building and maintaining websites so that they may be used by people of all abilities and disabilities.
  8. 8. Web Usability· By contrast, web usability is the practice of designing, building and maintaining websites that are easy and intuitive to understand by the user without the requirement for prior knowledge or experience.
  9. 9. Accessibility ≠ Usability
  10. 10. Accessibility Usability
  11. 11. Disability Act 2005· Subsection 28: Access to information - (2) Where a public body communicates in electronic form with one or more persons, the head of the body shall ensure, that as far as practicable, the contents of the communication are accessible to persons with a visual impairment to whom adaptive technology is available. - (3) The head of a public body shall ensure, as far as practicable, that information published by the body, which contains information relevant to persons with intellectual disabilities, is in clear language that is easily understood by those persons.
  12. 12. NDA Code of Practice
  13. 13. Client RFT clauses· Accessibility The website must conform to at least AAA (Triple A)/WCAG 2.0 standards...
  14. 14. Web AccessibilityBodies & Standards· W3C WAI · WCAG 2.0· NDA · ATAG· WebAIM · ARIA
  15. 15. WCAG· Web Content Accessibility Guidelines· Version 1.0 released in May 1999· Version 2.0 released in December 2008
  16. 16. Checklists
  17. 17. A/AA/AAA/Wha?· A - Basic support· AA - Better support. Minimum for Govt/ Public bodies.· AAA - Best support. Most di cult to implement completely
  18. 18. Project Time Breakdown Design Build PM Testing AccessibilityProjected Actual
  19. 19. Project Time Breakdown Design Build PM Testing AccessibilityProjected Actual
  20. 20. Who’s responsibility?· Project Manager· User Experience/Interface expert· Information Architect· Designer· Backend Developer· Front end Developer
  21. 21. Think about accessibility all the time. ALL THE TIME!
  22. 22. Project Time Breakdown Design Build PM TestingIdeally
  23. 23. The idea that “if it can’t be measured, it doesn’t count” isone of the most damaging delusions of our time. It gives us a world that rewards quantity, not quality. Cennydd Bowles, 2011
  24. 24. Make metrics the core goal of your design and you’ll justend up with design that optimises those numbers, at the expense of other important qualities. Cennydd Bowles, 2011
  25. 25. Levels of Tolerance· Checklists should be used as a guide· Viewed with subjectivity· Viewed with understanding· Viewed with common sense
  26. 26. Schmidt Trigger 5 4.5 4 3.5 3Voltage 2.5 2 1.5 1 0.5 0 12.5 13 13.5 14 14.5 15 15.5 16 16.5 17 17.5 Temperature (°C) Heating Cooling
  27. 27. Vision impairments
  28. 28. Screen Readers· Jaws· NVDA· VoiceOver (Mac)
  29. 29. How screen readers work Video source: ThinkVitamin.com
  30. 30. How to structure content
  31. 31. Code Sample<h1> <img src=”logo.jpg”title=”Welcome to the Company”alt=”Company Name” /> </h1>
  32. 32. Code Sample<h1> <img src=”logo.jpg”title=”Welcome to the Company”alt=”Company Name” /> </h1>
  33. 33. Code Sample
  34. 34. Code Sample
  35. 35. Code Sample
  36. 36. WebAIM survey· JAWS is still the primary screen reader.· The perception of free or low-cost screen readers is improving.· 98.4% of respondents had JavaScript enabled.· Two-thirds of the respondents use a screen reader on a mobile device· Most respondents find longdesc useful.· Social media use has increased.· 12.8% use screen mag with their screen reader.· Use of headings for page navigation continues to increase while use of “skip” links and access keys has decreased
  37. 37. WebAIM survey · One first level heading 12.5% that contains the site name50.4% ·One first level heading that contains the document title 37.1% ·Two first level headings, one for the site name and one for the document title
  38. 38. Image source: wikipedia
  39. 39. Image source: british-stamps.com
  40. 40. Colour Contrast Analyser
  41. 41. Colour Contrast Analyser
  42. 42. Infographics
  43. 43. Infographics
  44. 44. Photoshop
  45. 45. Chrometric
  46. 46. WAVE
  47. 47. Auditory impairments
  48. 48. Prime culprit
  49. 49. Closed Captions
  50. 50. Closed Captions
  51. 51. Motor or mobility di culties
  52. 52. Keyboard reliance
  53. 53. Target areas
  54. 54. Code Samplea:hover, a:focus{background: rgba(200,200,200,0.5;}
  55. 55. Seizures
  56. 56. Scrolling banner
  57. 57. You’re doing it wrong
  58. 58. Intellectual Disabilities
  59. 59. Dyslexia
  60. 60. Dyslexia
  61. 61. Code SampleHTML
  62. 62. Code SampleHTMLJavaScript
  63. 63. Cognitive disabilities Quick question... Statistic source: wikipedia
  64. 64. Previous Next
  65. 65. Wordpress Codex http://codex.wordpress.org/Template_Tags/posts_nav_link
  66. 66. Chronological order Previous Next Older Newer
  67. 67. HTML5 Markup· Header · Article· Footer · Figure· Nav · Aside· Section · Time
  68. 68. HTML5 Markup<img src=”image.jpg” alt=”Photo of a cowof a field” />
  69. 69. HTML5 Markup<figure><img src=”image.jpg” alt=”Photo of a cowof a field” /><figcaption>A Jersey cow grazing in afield beside a wood</figcaption></figure>
  70. 70. HTML5 Markup <abbr>etc</abbr> Definitions: Camen Design
  71. 71. HTML5 Markup<abbr title=”et cetera”>etc</abbr> Definitions: Camen Design
  72. 72. HTML5 Markup <abbr>HTML</abbr> Definitions: Camen Design
  73. 73. HTML5 Markup <dfn title=”HyperText MarkupLanguage”><abbr>HTML</abbr></dfn> Definitions: Camen Design
  74. 74. CSS3· Rounded corners and background gradients
  75. 75. CSS3· Rounded corners and background gradients· Text and box shadows
  76. 76. CSS3· Rounded corners and background gradients· Text and box shadows· Transforms
  77. 77. CSS3· Rounded corners and background gradients· Text and box shadows· Transforms· Transitions
  78. 78. WAI-ARIA· Add roles to elements <nav>
  79. 79. WAI-ARIA· Add roles to elements <nav role=”navigation”>
  80. 80. WAI-ARIA <nav role=”navigation”> <header role=”banner”><aside role=”complimentary”><footer role=”contentinfo”> <section role=”main”> <form role=”form”> <form role=”search”> <div role=”application”>
  81. 81. WAI-ARIA<figure><img src=”image.jpg” alt=”Photo of a cowof a field”/><figcaption>A Jersey cow grazing in afield beside a wood</figcaption></figure>
  82. 82. WAI-ARIA<figure><img src=”image.jpg” alt=”Photo of a cowof a field” aria-describedby=”fig1”/><figcaption id=”fig1”>A Jersey cow grazingin a field beside a wood</figcaption></figure>
  83. 83. WAI-ARIA <button>
  84. 84. WAI-ARIA<button aria-label=”Update” aria-busy=”false”>
  85. 85. One final mythTables are inaccessible
  86. 86. Basic table March AprilApples 60 70Oranges 30 50
  87. 87. Basic table<table><tr><td>&nbsp;</td><td>March</td><td>April</td></tr><tr><td>Apples</td><td>60</td><td>70</td></tr><tr><td>Oranges</td><td>30</td><td>50</td></tr></table>
  88. 88. Accessible table<table summary=”Sale of Apples & Oranges inMarch/April this year”><caption> Fruit sales Q1 2011 </caption><thead><tr><th>&nbsp;</th><th id=”march”scope=”col”>March</th><th id=”april”scope=”col”>April</th></tr></thead>
  89. 89. Accessible table<tbody><tr><th id=”apples” scope=”row”>Apples</th><td headers=”march apples”>60</td><td headers=”april apples”>70</td></tr><tr><th id=”oranges” scope=”row”>Oranges</th><td headers=”march oranges”>30</td><td headers=”april oranges”>50</td></tr></tbody></table>
  90. 90. Be proactive· Research more· Attempt more· Know more· Think more
  91. 91. Interwebs· http://www.nda.ie· http://www.universaldesign.ie/· http://www.webaim.org· http://www.w3c.org/WAI
  92. 92. Tweeters· Jeremey Keith @adactio· Je erey Zeldman @zeldman· Derek Featherstone @feather· Christian Heilmann @codepo8· Molly Holzschlag @mollydotcom· Tom Coates @tomcoates· Luke Wroblewski @lukew· Robin Christopherson @usa2day
  93. 93. Shout outs!· Alan Dalton (NDA)· Stu and all at Refresh Dublin· The Science Gallery· Brandon Grotesque
  94. 94. Questions
  95. 95. Thank you! @RefreshDublinhttp://www.tadywalsh.com @tadywankenobi

×