Let's get accessible!
1 like1,057 views
Tady Walsh discusses the importance of web accessibility, emphasizing that accessible websites are vital for users of all abilities. He addresses common myths about accessibility, highlighting that it can be achieved without sacrificing aesthetics when using proper semantic markup. Walsh encourages continuous conversation and proactive measures to maintain accessibility standards, referencing various guidelines and tools to assist in the process.
![Let’s stop talking about making websites accessible. Instead,
let’s talk about keeping websites accessible. I’m not saying
that HTML is a magic bullet but as long as you are using
the most semantically appropriate elements to mark up
your content, you are creating something [that] is, by
default, accessible. It’s only afterwards, when we start
adding the bells and whistles, that the problems can begin.
Jeremy Keith, 2008](https://image.slidesharecdn.com/refreshaccessibility-110429093536-phpapp01/85/Let-s-get-accessible-6-320.jpg)
Let's get accessible!
- 1. Let’s get accessible! @RefreshDublin Tady Walsh
- 2. Preface
- 3. Tady Pronounced Tay-dee Spelled T - A - D - Y
- 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. 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. Let’s stop talking about making websites accessible. Instead, let’s talk about keeping websites accessible. I’m not saying that HTML is a magic bullet but as long as you are using the most semantically appropriate elements to mark up your content, you are creating something [that] is, by default, accessible. It’s only afterwards, when we start adding the bells and whistles, that the problems can begin. Jeremy Keith, 2008
- 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. 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.
- 10. Accessibility Usability
- 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. NDA Code of Practice
- 13. Client RFT clauses · Accessibility The website must conform to at least AAA (Triple A)/WCAG 2.0 standards...
- 14. Web Accessibility Bodies & Standards · W3C WAI · WCAG 2.0 · NDA · ATAG · WebAIM · ARIA
- 15. WCAG · Web Content Accessibility Guidelines · Version 1.0 released in May 1999 · Version 2.0 released in December 2008
- 16. Checklists
- 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. Project Time Breakdown Design Build PM Testing Accessibility Projected Actual
- 19. Project Time Breakdown Design Build PM Testing Accessibility Projected Actual
- 20. Who’s responsibility? · Project Manager · User Experience/Interface expert · Information Architect · Designer · Backend Developer · Front end Developer
- 21. Think about accessibility all the time. ALL THE TIME!
- 22. Project Time Breakdown Design Build PM Testing Ideally
- 23. The idea that “if it can’t be measured, it doesn’t count” is one of the most damaging delusions of our time. It gives us a world that rewards quantity, not quality. Cennydd Bowles, 2011
- 24. Make metrics the core goal of your design and you’ll just end up with design that optimises those numbers, at the expense of other important qualities. Cennydd Bowles, 2011
- 25. Levels of Tolerance · Checklists should be used as a guide · Viewed with subjectivity · Viewed with understanding · Viewed with common sense
- 26. Schmidt Trigger 5 4.5 4 3.5 3 Voltage 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
- 29. Screen Readers · Jaws · NVDA · VoiceOver (Mac)
- 30. How screen readers work Video source: ThinkVitamin.com
- 32. How to structure content
- 33. Code Sample <h1> <img src=”logo.jpg” title=”Welcome to the Company” alt=”Company Name” /> </h1>
- 34. Code Sample <h1> <img src=”logo.jpg” title=”Welcome to the Company” alt=”Company Name” /> </h1>
- 35. Code Sample
- 36. Code Sample
- 37. Code Sample
- 38. 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
- 39. WebAIM survey · One first level heading 12.5% that contains the site name 50.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
- 49. Colour Contrast Analyser
- 50. Colour Contrast Analyser
- 53. Infographics
- 54. Infographics
- 55. Photoshop
- 56. Chrometric
- 57. WAVE
- 59. Prime culprit
- 60. Closed Captions
- 61. Closed Captions
- 62. Motor or mobility di culties
- 64. Target areas
- 65. Code Sample a:hover, a:focus {background: rgba(200,200,200,0.5;}
- 66. Seizures
- 67. Scrolling banner
- 68. You’re doing it wrong
- 70. Dyslexia
- 71. Dyslexia
- 72. Code Sample HTML
- 74. Cognitive disabilities Quick question... Statistic source: wikipedia
- 75. Previous Next
- 76. Wordpress Codex http://codex.wordpress.org/Template_Tags/posts_nav_link
- 78. Chronological order Previous Next Older Newer
- 79. HTML5 Markup · Header · Article · Footer · Figure · Nav · Aside · Section · Time
- 80. HTML5 Markup <img src=”image.jpg” alt=”Photo of a cow of a field” />
- 81. HTML5 Markup <figure> <img src=”image.jpg” alt=”Photo of a cow of a field” /> <figcaption>A Jersey cow grazing in a field beside a wood</figcaption> </figure>
- 82. HTML5 Markup <abbr>etc</abbr> Definitions: Camen Design
- 83. HTML5 Markup <abbr title=”et cetera”>etc</abbr> Definitions: Camen Design
- 84. HTML5 Markup <abbr>HTML</abbr> Definitions: Camen Design
- 85. HTML5 Markup <dfn title=”HyperText Markup Language”><abbr>HTML</abbr></dfn> Definitions: Camen Design
- 86. CSS3 · Rounded corners and background gradients
- 87. CSS3 · Rounded corners and background gradients · Text and box shadows
- 88. CSS3 · Rounded corners and background gradients · Text and box shadows · Transforms
- 89. CSS3 · Rounded corners and background gradients · Text and box shadows · Transforms · Transitions
- 90. WAI-ARIA · Add roles to elements <nav>
- 91. WAI-ARIA · Add roles to elements <nav role=”navigation”>
- 92. 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”>
- 93. WAI-ARIA <figure> <img src=”image.jpg” alt=”Photo of a cow of a field”/> <figcaption>A Jersey cow grazing in a field beside a wood</figcaption> </figure>
- 94. WAI-ARIA <figure> <img src=”image.jpg” alt=”Photo of a cow of a field” aria-describedby=”fig1”/> <figcaption id=”fig1”>A Jersey cow grazing in a field beside a wood</figcaption> </figure>
- 96. WAI-ARIA <button aria-label=”Update” aria-busy=”false”>
- 97. One final myth Tables are inaccessible
- 98. Basic table March April Apples 60 70 Oranges 30 50
- 100. Accessible table <table summary=”Sale of Apples & Oranges in March/April this year”> <caption> Fruit sales Q1 2011 </caption> <thead> <tr> <th> </th><th id=”march” scope=”col”>March</th><th id=”april” scope=”col”>April</th> </tr> </thead>
- 101. 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>
- 102. Be proactive · Research more · Attempt more · Know more · Think more
- 103. Interwebs · http://www.nda.ie · http://www.universaldesign.ie/ · http://www.webaim.org · http://www.w3c.org/WAI
- 104. 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
- 105. Shout outs! · Alan Dalton (NDA) · Stu and all at Refresh Dublin · The Science Gallery · Brandon Grotesque
- 106. Questions
- 107. Thank you! @RefreshDublin http://www.tadywalsh.com @tadywankenobi