Meetup presentation

If you came to my 7 September presentation - a 101 to WCAG 2.1, you can get the presentation right here!

Download WCAG 2.1 presentation

Plain text alternative

Slide 1

A 101 to WCAG v2.1
Welcome back Brisbane!

Slide 2

We’re back and thank you for coming along!
Thank you to Gaia Resources for my time, and the Console Group for the venue, catering, drinks and help getting this group off the ground.
Let’s say thank you to Console :-)

Slide 3

Who am I?
My name is Morgan I’m from Gaia Resources.
I specialise in making web-based software for Museums and Environmental Companies.
My access background:
Ran the Perth Meetup group from 2013-2015
Organised (at the time) Australia’s largest accessibility conference - 1 August 2014 - 2nd Website Accessibility Camp
Frequently got in the marketing department’s face for inaccessible ideas

Slide 4

My two cents (not guideline based at all)
Accessibility is more of a mindset than a compliance exercise
Things that are not compliant can still be accessible if done in good faith (next slide for an example)
If the problem is too big, start somewhere, do something
Don’t use it as excuse to not do something

Slide 5

My personal example

In summary
Definitive article, hidden in a PDF, potentially lost knowledge:
Turned into accessible and consumable information:

Slide 6

What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet.
Released WCAG v2.0 in December 2008
Ratified as an ISO Standard in October 2012
Public draft for WCAG v2.1 in March 2017, latest draft August 2017

Slide 7

Let’s start with WCAG 2.0
Four major areas:
Three levels: A; AA; and AAA. A (except 1.1.1) easy, AAA quite hard.

Slide 8

1.1 Provide Text alternatives

1.1.1 Non-text Content A
1.2 Alternatives for Time based media (eg captions)

1.2.1 Audio and video A
1.2.2 Captions A
1.2.3 Audio description A
1.2.4 Captions (live) AA
1.2.5 Audio description (pre-recorded) AA
1.2.6 Sign Language Preferred AAA
1.2.7 Extended Audio Description AAA
1.2.8 Media Alternative (pre-recorded) AAA
1.2.9 Audio-only (live) AAA

1.3 Adaptable (meaningful sequence, works without style)

1.3.1 Info and relationships A
1.3.2 Meaningful sequence A
1.3.3 Sensory Characteristics A
1.4 Distinguishable (contrast, resized)

1.4.1 Use of colour A
1.4.2 Audio control A
1.4.3 Contrast (minimum) A
1.4.4 Resize text AA
1.4.5 Images of text AA
1.4.6 Contrast (enhanced) AAA
1.4.7 Low or no background audio AAA
1.4.8 Visual presentation AAA
1.4.9 Images of text (no exception) AAA

2.1 Functionality accessible via keyboards

2.1.1 Keyboard A
2.1.2 No Keyboard A
2.1.3 Keyboard (no keyboard) A
2.2 Enough time to perform functions
2.2.1 Timing Adjustable A
2.2.2 Pause, Stop, Hide A
2.2.3 No timing AAA
2.2.4 Interruptions AAA
2.2.5 Re-authenticating AAA
2.3 Seizure free content

2.3.1 Three flashes (red/green) A
2.3.2 Three flashes AAA

2.4 Navigable - help users find content, headings are semantic, location in the site visible.

2.4.1 Bypass blocks A
2.4.2 Pages Titled A
2.4.3 Focus Order A
2.4.4 Link Purpose in context A
2.4.5 Multiple ways AA
2.4.6 Headings and labels AA
2.4.7 Focus visible AA
2.4.8 Location AAA
2.4.9 Link purpose AAA
2.4.10 Section headings AAA

3.1 Readable and understandable

3.1.1 Language A
3.1.2 Content sections in EN AA
3.1.3 Unusual words defined AAA
3.1.4 Abbreviations AAA
3.1.5 Accessible to lower secondary education AAA
3.1.6 Pronunciation guides AAA
3.2 Predictable (eg consistent navigation)

3.2.1 On Focus does not change context A
3.2.2 On Input does not change context A
3.2.3 Consistent navigation AA
3.2.4 Consistent identification AA
3.2.5 Mechanism to turn off context changes AAA

3.3 Input assistance
3.3.1 Error messages A
3.3.2 Labels provided A
3.3.3 Error suggestion AA
3.3.4 Error Prevention on legal, financial pages AA
3.3.5 Content-specific help AAA
3.3.6 Error prevention on general pages AAA

4.1 Compatible with assistive technology
4.1.1 Parsing code A
4.1.2 Name, Role, Value A

Slide 9

Why WCAG 2.1?
Long time between v2.0 (2008) and now.
2.1 more of a incremental change than rework, in fact 2.0 does not change; plug holes in 2.0, rework later. This means:
There is some overlap
Compliance with 2.1 means you are compliant with 2.0
More focus on new devices and accessible behaviours on those devices
Thoughts from Dr Scott Hollier:

Slide 10

What’s new WCAG 2.1
Three brand new guidelines in WCAG 2.1:
Guideline 2.5 - Pointer Accessible
Guideline 2.6 - Additional Sensor Inputs
Guideline 2.7 - Speech
Make point (cursor area) at least 44 x 44px
Make application orientation agnostic
“Where an active control has a visible label, the accessible name for the control includes the text string used for its visible label.”

Slide 11

New success criteria in 2.1 - Level A
This: - this is the best overview I found researching this talk.
New Level A success criteria:
2.2.7 Accessible Authentication (recalling information)
2.4.11 Character Key Shortcuts (keyboard shortcuts do not rely on characters)
2.7.1 Accessible Name (as above)
3.2.6 Accidental Activation (accidental activation, e.g up keys, and being able to reverse that activation process.

Slide 12

New success criteria in 2.1 - Level AA
1.4.10 Zoom content - zoom to 320px without site degrading functionality
1.4.11 Graphics Contrast - more refined definitions on graphic elements
1.4.12 User Interface Component Contrast - more refined definitions
1.4.13 Adapting Text - more refined definitions of loss of content when refining controls
1.4.14 Content on Hover or Focus - definition of activities that occur on hover, tap and keyboard focus
2.2.6 Interruptions (minimum) - easily reversible
2.5.1 Target Size - pointer is 44 x 44px (special exceptions allowed)
2.6.1 Orientation - works in any orientation
3.2.7 Change of Content - programmatic notification of change of content

Slide 12

New success criteria in 2.1 - Level AAA
1.3.4 Contextual Information - “In content implemented using markup languages, contextual information for controls, symbols, and regions can be programmatically determined using a publicly available vocabulary.”
2.5.2 Target Size (no exception) - no exceptions

Slide 13

New success criteria in 2.1 - More coming
WCAG 2.1 is still in draft, so more coming.

Slide 14

What’s a common sense approach?
If you don’t feel like reading lots of documentation here’s a few tests you can run without referencing the guidelines:
Unplug mouse / trackpad and use your keyboard
Turn off images
Turn off CSS
Turn on high contrast mode via the OS
Click on field labels in forms
Look for full-text alternatives

Slide 15

What resources can help?
WebAim -
Media Access Australia -
AccessIQ -
Tools listed by W3C:

Slide 16

Cute new resources with colours
Simple for checking colour contrast:
Generating colour schemes:
Colour combinations:

Slide 17

Over to the crowd
What are your experiences?
Tips and tricks? Favourite tools? Authors / Bloggers?
What do you want to hear about in future Meetups?
What format do you want?
Speakers and topics?

Slide 18

Cheers mate!
Morgan Strong