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.

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.

9. Accessibility ≠ Usability

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

27. Vision impairments

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

43. Image source: wikipedia

44. Image source: british-stamps.com

49. Colour Contrast
Analyser

50. Colour Contrast
Analyser

53. Infographics

54. Infographics

55. Photoshop

56. Chrometric

57. WAVE

58. Auditory impairments

59. Prime culprit

60. Closed Captions

61. Closed Captions

62. Motor or mobility
di culties

63. Keyboard reliance

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

69. Intellectual Disabilities

70. Dyslexia

71. Dyslexia

72. Code Sample
HTML

73. Code Sample
HTML
JavaScript

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>

95. WAI-ARIA
<button>

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

99. 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>

100. Accessible table
<table summary=”Sale of Apples & Oranges in
March/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>

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