The document outlines the importance of web accessibility for individuals with varying disabilities, highlighting that 3.8 million Canadians report living with a disability. It emphasizes compliance with the Web Content Accessibility Guidelines (WCAG) and the Accessibility for Ontarians with Disabilities Act (AODA), which mandates that all Ontario websites meet specific accessibility standards by 2021. Additionally, it provides practical design and development tips for achieving accessibility and maintaining a consistent user experience across digital platforms.

1. 3/4

2. 02/40
What is
accessibility?

3. 2/4
12/3503/40
The process of making the web usable
for people with varying abilities

4. 04/40
What is
a disability?

5. 2/4
12/3505/40
Blind.
Deaf.

6. 2/4
12/3505/40
That’s only
a small part of the story

7. 2/4
12/3505/40
Disabilites are far more
nuanced and exist across a spectrum

8. 1.
2.
3.
Colour blindness
Monochromacy (seeing in greyscale)
Partial or complete vision loss
06/40
4. Partial or complete hearing loss
5.
6.
Fine motor skill impairment
Cognition disabilities

9. 07/40
Why should we
care?

10. 08/40
1.
2.
3.
3.8 million Canadians report living with a disability
Adherance with best practice of web standards
Better SEO
4. Optimal experience for all users
+ AODA says so.

11. WCAG + AODA
09/40
Web Content Accessibility Guideline
+
Accessibility for Ontarians with Disabilities Act

12. By 2021 all websites in Ontario will
need to meet WCAG 2.0 AA
10/40
+ For organizations with over 50 staff
+ Applies to websites posted after 2011

13. Massive daily fines exist
for having a live, inaccessible site
10/40

14. 3/4
$100,000 per day
11/40

15. WCAG 2.0
Quick Reference
12/40

16. 2/4
12/3513/40
Myth:
Accessibility is hard

17. 14/40
TL;DR

18. Focus States
15/40
Consistency Audio + Video Contrast Readability
The real quick reference:
Designers

19. 2/4
12/3516/40
Focus States
1.
2.
Links, Controls, Buttons and Input fields should be distinctly
visible when on keyboard focus
Avoid relying on colour to convey important meaning. These cues
are lost on many individuals (such as those with colour blindness)

20. 2/4
12/3517/40
Consistency
1.
2.
Maintain a steady document layout between pages,
paying particular attention to the nav bar + other areas
with repetitive links
Keep a consistent style between UI elements: buttons should
look like buttons, links like links

21. 2/4
12/3518/40
Audio + Video
1.
2.
+
Live + Pre-recorded audio need to be accompanied by
captions or transcripts
Pre-recorded video needs to be accompanied by
both transcript and audio description
These features are not included in the 2021 requirements,
but are listed in the WCAG AA spec

22. 2/4
12/3522/40
Contrast
1.
2.
3.
+
Text should have a contrast ratio of 4.5:1
Large text (18pt) can have a contrast ratio of 3:1
Make sure links and controls are easily visible in a body of text
Logos are exempt from the contrast rules

23. 2/4
12/3513/40
Contrast checking
tools will help you spot bugs

24. 2/4
12/3505/40
Fail

25. 2/4
12/3505/40
Pass

26. 12/3523/40

27. 12/3524/40

28. 2/4
12/3525/40
Readability
1.
2.
3.
4.
Use a text justification that’s appropriate for the language
Avoid centre alignments and justified text
Create line lengths that are friendly to the eye (50-75 characters)
Clarify meaning with images when possible

29. Semantic Markup
26/40
Native Elements ARIA Labels Consistency Input Assistance
The real quick reference:
Developers

30. Never use images where you could use text
Keep your documents structured logically + consistently
between pages on the same site
2/4
12/3527/40
Semantic Markup
1.
2.
3.
4.
Make use of HTML5 elements
Use (don’t abuse) attributes + descriptive alt tags

31. 2/4
12/3513/40
What about using turning letters
into SVG for animations?

32. 20/33

33. 2/4
12/3513/40
Now and then, it needs to
happen. Use ARIA tags for clarity

34. 2/4
12/3529/40
<svg role=“img” aria-label=“Learn Code”>

35. 1.
2.
Don’t reinvent the wheel; use native elements instead
of JS hackery
Make sure your site makes sense and is navigable
when the scripts and styles are disabled
2/4
12/3530/40
Native Elements
3. Don’t override the default behaviour of the browser
(zooming, tabbing, right clicking + scrolling)

36. 2/4
12/3531/40
ARIA Labels
1.
2.
3.
Describes the role, state or property of an element when
there isn’t enough semantic markup for Assistive
Technology to understand
Helps AT distinguish changes in dynamic content (very useful
in dynamic JS applications)
ARIA landmarks allow screen reader users to quickly navigate
around the page, skipping repetitive content like menu bars

37. 2/4
12/3532/40
<button aria-label="Close">X</button>
<div role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100" />

38. 2/4
12/3533/40
Input Assistance
1.
2.
3.
Make sure your focus states are clearly visible and don’t
rely on colour to convey meaning
When an error is identified in an input field, provide useful
feedback and offer suggestions for fixing the problem
Allow for a double check or a reversible submission when
dealing with legal or financial transactions

39. 2/4
12/3534/40
Consistency
1.
2.
3.
Maintain a similar code structure between pages in the
same site
Use consistent naming and ARIA conventions across a
website
Keep interactive elements predictable in their behaviour
(buttons, links, drop down menus)

40. 2/4
12/3535/40
We’ve still
got work to do
1.
2.
3.
Mobile devices
Native apps
JS frameworks + the changing nature of the DOM

41. 36/40
What about
AAA?

42. 2/4
12/3537/40
A lofty goal,
but not yet attainable

43. 2/4
12/3538/40
AAA Includes
1.
2.
3.
+
Extended audio description for all pre-recorded video
Sign language videos for audio only recordings
Text with a contrast ratio of 7:1
Many more dreams

44. 2/4
12/3539/40
Accessibility
is everyone’s job.

45. 3/4