A Practical Guide to Web Accessibility

3/4

02/40

What isaccessibility?

2/4

12/3503/40

The process of making the web usable

for people with varying abilities

04/40

What isa disability?

2/4

12/3505/40

Blind.

Deaf.

2/4

12/3505/40

That’s only

a small part of the story

2/4

12/3505/40

Disabilites are far more

nuanced and exist across a spectrum

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

07/40

Why should we care?

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.

WCAG + AODA

09/40

Web Content Accessibility Guideline+

Accessibility for Ontarians with Disabilities Act

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

Massive daily fines exist

for having a live, inaccessible site

10/40

3/4

$100,000 per day

11/40

WCAG 2.0

Quick Reference

12/40

2/4

12/3513/40

Myth:

Accessibility is hard

14/40

TL;DR

Focus States

15/40

Consistency Audio + Video Contrast Readability

The real quick reference:

Designers

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)

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

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

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

2/4

12/3513/40

Contrast checking

tools will help you spot bugs

2/4

12/3505/40

Fail

2/4

12/3505/40

Pass

12/3523/40

12/3524/40

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

Semantic Markup

26/40

Native Elements ARIA Labels Consistency Input Assistance

The real quick reference:

Developers

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

2/4

12/3513/40

What about using turning letters

into SVG for animations?

20/33

2/4

12/3513/40

Now and then, it needs to happen.

Use ARIA tags for clarity

2/4

12/3529/40

<svg role=“img” aria-label=“Learn Code”>

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)

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

2/4

12/3532/40

<button aria-label="Close">X</button>

<div role="progressbar"

aria-valuenow="75"

aria-valuemin="0"

aria-valuemax="100" />

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

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)

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

36/40

What aboutAAA?

2/4

12/3537/40

A lofty goal,

but not yet attainable

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

2/4

12/3539/40

Accessibility

is everyone’s job.

3/4