If you came to my 7 September presentation - a 101 to WCAG 2.1, you can get the presentation right here!
A 101 to WCAG v2.1
Welcome back Brisbane!
Welcome!
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 :-)
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
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
My personal example
In summary
Definitive article, hidden in a PDF, potentially lost knowledge: http://museum.wa.gov.au/research/records-supplements/records/food-resources-aborigines-south-west-western-australia
Turned into accessible and consumable information: http://museum.wa.gov.au/research/records-supplements/records/food-resources-aborigines-south-west-western-australia/accessible-version
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.
https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines
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
Let’s start with WCAG 2.0
Four major areas:
Perceivable
Operable
Understandable
Robust
Three levels: A; AA; and AAA. A (except 1.1.1) easy, AAA quite hard.
https://s3-ap-southeast-2.amazonaws.com/ds24osr/HIGH-LEVEL_accessibility-audit_Template.xlsx
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
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: http://hollier.info/wcag21draft/
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.”
New success criteria in 2.1 - Level A
This: http://adrianroselli.com/2017/08/whats-new-in-wcag-2-1.html - 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.
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
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
New success criteria in 2.1 - More coming
WCAG 2.1 is still in draft, so more coming.
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
What resources can help?
WebAim - http://webaim.org/
Media Access Australia - https://mediaaccess.org.au/
AccessIQ - http://accessiq.org/
WAVE - http://wave.webaim.org/
Tools listed by W3C: https://www.w3.org/WAI/ER/tools/
Cute new resources with colours
Simple for checking colour contrast: http://webaim.org/resources/contrastchecker/
Generating colour schemes: http://colorsafe.co/
Colour combinations: http://clrs.cc/a11y/
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?
Cheers mate!
Morgan Strong
@mostrorec
Mstrong.info