Making our sites easier to use for users who face vision or mobility challenges makes them easier for everyone to use.

1. WEB ACCESSIBILITY:
MAKING WEBSITES
BETTER FOR EVERYONE

5. WHAT IS WEB
ACCESSIBILITY?

6. SCREEN READER
Page has fifty-eight headings and two hundred
seventy-one links BBC dash Homepage Link
Graphic BBC Heading level two Heading level
two BBC navigation List of nine items bullet
Link News bullet Link Sport bullet Link Weather
bullet Link Capital bullet Link Future bullet Link
Shop bullet Link TV bullet Link Radio bullet Link
More… List end

7. HIGH CONTRAST

8. HIGH CONTRAST

9. VOICE RECOGNITION

10. VOICE RECOGNITION

11. VOICE RECOGNITION

12. TRACKBALL

13. KEYBOARD

14. TRY IT YOURSELF
Jaws / ChromeVox
Windows High Contrast Theme
Turn off your mouse
Use your elbows (not fingers)

15. YOU SHOULD CARE ABOUT
ACCESSIBILITY

16. 1: UX
Content
Information Architecture
Interface Design

17. 1: UX
xkcd.com/773

18. 2: HTML

19. 2: HTML
Semantic HTML:
When the HTML markup reinforces the
meaning (aka semantics) of the
information on the page.

20. 2: HTML
WCAG 2.0
(Web Content Accessibility Guidelines)
wave.webaim.org

21. Section508
Rehabilitation Act
Americans with Disabilities Act
Nat’l Federation of the Deaf vs. Netflix Inc
ADA
Department of Justice
Advance Notice Of Proposed Rulemaking
CharterofRightsandFreedoms
Canadian Human Rights Act
Ontarians with Disabilities Act
Schedules I, I.I and II of the Financial Administration Act
Title III

22. 3: CSS
Don’t screw up your HTML
Make small improvements

23. 4: JAVASCRIPT
Don’t screw up your HTML

24. 4: JAVASCRIPT
Don’t screw up your HTML
ARIA Roles and Attributes
(Accessible Rich Internet Applications)

28. <div class="server">Blueberry
<span class="server_button">
DETAILS &#x25B8;</span>
</div>
<div class="server_details">
<div>Hostname: web02.onr.example.com</div>
<div>Service Tag: JCQFZK1</div>
<div>Datacentre: ONR</div>
<div>Rack Location: 104.6, Unit #24</div>
</div>

29. <div class="server">Blueberry
<span class="server_button">
DETAILS &#x25B8;</span>
</div>
<div class="server_details">
<div>Hostname: web02.onr.example.com</div>
<div>Service Tag: JCQFZK1</div>
<div>Datacentre: ONR</div>
</div>

30. <div class="server">Blueberry
<span class="server_button">
DETAILS &#x25B8;</span>
</div>
<dl class="server_details">
<dt>Hostname:</dt><dd>web02.onr.example.com</d
<dt>Service Tag:</dt><dd>JCQFZK1</dd>
<dt>Datacentre:</dt><dd>ONR</dd>
</dl>

31. <div class="server">Blueberry
<span class="server_button">
DETAILS &#x25B8;</span>
</div>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>
</dl>

32. <h3 class="server">Blueberry
<span class="server_button">
DETAILS &#x25B8;</span>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>
</dl>

33. <h3 class="server">Blueberry
<span class="server_button">
DETAILS &#x25B8;
</span>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com<
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>
</dl>

34. $('.server_button').on('click',
function() {
$(this)
.parent().next()
.toggleClass('hide');
});

35. .server_button:hover {
background-color: #000;
color: #fff;
}

36. <h3 class="server">Blueberry
<span class="server_button">
DETAILS &#x25B8;
</span>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com<
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>
</dl>

37. <h3 class="server">Blueberry
<button class="server_button">
DETAILS &#x25B8;
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>
</dl>

38. <h3 class="server">Blueberry
<button class="server_button"
type="button">
DETAILS &#x25B8;
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

39. $('.server_button').on('click',
function() {
$(this)
.parent()
.next()
.toggle();
});

40. .server_button:hover {
background-color: #000;
color: #fff;
}

41. .server_button:hover,
.server_button:focus {
background-color: #000;
color: #fff;
}

42. .server_button:hover,
.server_button:focus {
background-color: #000;
color: #fff;
text-decoration: underline;
}

43. <h3 class="server">Blueberry
<button class="server_button"
type="button">
DETAILS &#x25B8;
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

44. <h3 class="server">Blueberry
<button class="server_button"
type="button">
Details &#x25B8;
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

45. <h3 class="server">Blueberry
<button class="server_button"
type="button">
Details &#x25B8;
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

46. <h3 class="server">
<button class="server_button"
type="button">
Blueberry
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

48. <h3 class="server">
<button class="server_button"
type="button">
Blueberry
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

49. <h3>
<button class="server"
type="button">
Blueberry
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

51. .server_button
.server:after {
content: 'Details 25B8’;
text-transform: uppercase;
speak: none;
background-color: #fff;
border-radius: 4px;
border: 0px none;
box-shadow: 0px -2px

52. .server_button:hover,
.server_button:focus
.server:hover:after,
.server:focus:after {
/* same styles as before */
}

54. Click here

55. “…the time required to rapidly
move to a target area is a function
of the ratio between the distance
to the target and the width of the
target”
FITTS’ LAW
- Wikipedia FTW

57. <span aria-hidden="true"
class="icon_check"></span>
<span class="offscreen">
This server is up:
</span>

58. <span aria-hidden="true"
class="icon_check"></span>
<span class="offscreen">
This server is up:
</span>

59. .icon_check:before {
content: '2713';
speak: none; }
.icon_times:before {
content: '2715';
speak: none; }

60. <span aria-hidden="true"
class="icon_check"></span>
<span class="offscreen">
This server is up:
</span>

62. <span aria-hidden="true"
class="icon_check"></span>
<span class="offscreen">
This server is up:
</span>

63. .offscreen {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}

66. WHAT JUST HAPPENED?

67. WHAT JUST HAPPENED?
- choose the right element

68. WHAT JUST HAPPENED?
- choose the right element
- use descriptive calls to action

69. WHAT JUST HAPPENED?
- choose the right element
- use descriptive calls to action
- make hit areas bigger

70. WHAT JUST HAPPENED?
- choose the right element
- use descriptive calls to action
- make hit areas bigger
- add visual cues

71. WHAT JUST HAPPENED?
- choose the right element
- use descriptive calls to action
- make hit areas bigger
- add visual cues in the CSS
- don’t just add visual cues

73. <h3>
<button class="server" type="button">
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server is up: <
Blueberry
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>
</dl>

74. <h3>
<button class="server" type="button">
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server is up: <
Blueberry
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>
</dl>

75. <h3>
<button class="server" type="button">
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server is up: <
Blueberry
</button>
</h3>
<dl class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>
</dl>

76. <h3>
<button aria-controls="raspberry" class="serve
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server is up: <
Blueberry
</button>
</h3>
<dl id="raspberry" class="server_details">
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>
</dl>

77. <h3>
<button aria-controls="raspberry"
aria-expanded="false" class="server" t
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server is up: <
Blueberry
</button>
</h3>
<dl id="raspberry" aria-hidden="true" class="ser
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

78. $('[aria-expanded]').on('click',
function() {
var id = $(this)
.attr(aria-contols);
/*
toggle values of
aria-expanded & aria-hidden
*/
});

79. <h3>
<button aria-controls="raspberry"
aria-expanded="false" class="server" t
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server is up: <
Blueberry
</button>
</h3>
<dl id="raspberry" aria-hidden="true" class="ser
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

80. <h3>
<button aria-controls="raspberry"
aria-expanded="true" class="server" ty
<span aria-hidden="true" class="icon_check"
<span class="offscreen">This server is up: <
Blueberry
</button>
</h3>
<dl id="raspberry" aria-hidden="false" class="se
<dt>Hostname:</dt><dd> web02.onr.example.com</
<dt>Service Tag:</dt><dd> JCQFZK1</dd>
<dt>Datacentre:</dt><dd> ONR</dd>

81. .server_details[aria-hidden=true]{
display: none;
}

82. .server[aria-expanded=false]:after{
content: 'Details 25B8';
}
.server[aria-expanded=true]:after{
content: 'Details 25BE';
}

85. DON’T SELL IT, DO IT

86. BETTER FOR EVERYONE

88. I LIKE TO MAKE WEBSITES
EVERYONE CAN USE
@stephaniehobson
stephaniehobson.ca

89. RESOURCES
- webaim.org
- wave.webaim.org
- alistapart.com/article/the-accessibility-of-wai-aria
- 24ways.org/2009/dont-lose-your-focus/
- blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites
- filamentgroup.com/lab/bulletproof_icon_fonts.html
- snook.ca/archives/html_and_css/hiding-content-for-accessibility
- snook.ca/archives/html_and_css/floated-label-pattern-css