This week's exciting topic:

This week's exciting topic:

This week's exciting topic:

The new state of Web Accessibility - WCAG 2.1

Scott Blinch

Front End Web Developer, One-Trick Pony

Race Roster

    @scottblinch

The Scoop on WCAg 2.1

• It's W3C Recommendation (this means it's now the real deal)
• Doesn't replace 2.0, but sits alongside
  • But they still recommend everyone move to 2.1
  • 2.1 is backwards compatible, contains everything from 2.0
• Updates all 3 levels (A, AA, AAA)
• Updates to focus on mobile, low vision, and cognitive and learning provisions
• Adds new support for touch, complex gestures, and avoiding unintended activation of an interface
• Extends contrast requirements to graphics, adds requirements for text/layout customization
• Laws will likely lag a bit to update, but expect updates to AODA, 508, ADA (and other laws) in the future

Wait, What are you even talking about?

WCAG

• Stands for Web Content Accessibility Guidelines
• Maintained by W3C (World Wide Web Consortium)
• 1.0 was released in 1999
  • It was meh
• 2.0 came in 2008
  • Expanded focus from HTML to all web tech
  • Established 4 principles: perceivable, operable, understandable, robust
• You'd think we'd be at 3.0 at this rate
• But nah, 2.1
  • 2.0 was/is pretty bomb, bro, so we'll just fill in the little gappy-doos instead
• Apparently there is a 3.0 in the works called Silver, but that's another story

WCAG 2.0 Review

WCAG 2.1 - What's new

A

Character Key Shortcuts

• Keyboard shortcuts consisting of entirely character keys need to be disable-able or remappable
  • Letters, number, punctuation, symbols
  • Quick win is to combine with non-character key
• Shortcuts for a component should only be active when that component has/contains focus
• To avoid potential conflicts with accessibility technology like screen readers which rely heavily on character key keyboard shortcuts

Pointer Gestures & Cancellation

• All multipoint or path-based gestures need to be operable with a single pointer
  • E.g. pinch to zoom can be done with double-tap then drag
• Click, tap, touch (etc) events
  • Don't bind to the "down" event, bind to the "up" event so user can move away from element if mistakenly clicked
• Destructive/important/meaningful actions require either a confirmation or an undo method

Motion actuation

• Anything activated by user motion or device motion needs to also be able to be activated by mouse, keyboard, or pointer
  • E.g. shaking phone can sometimes bring up a support contact box, make sure a component exists to bring it up with traditional input
• The motions to activate things must be able to be disabled by the user

AA

Orientation

• Don't restrict the view of your content to landscape/portrait/whatever
  • Let em have both
  • Unless it's "essential"

Identify input purpose

• The purpose of each input collection user info can be programmatically determined when:
  • It serves a purpose identified in the input purposes section (it pretty much just says if there's an autofill/autocomplete property for it, it meets the criteria)
  • There is expected meaning to be gained by the user's input
• This allows AT to attach recognizable icons or landmarks to these inputs for people who have trouble understanding forms
• Also allows for autofill to occur which is a huge help

Reflow

• Content can be zoomed up to width of 320px or height of 256px
• Without loss of content or functionality
• Without requiring scrolling on more than one axis
  • Unless part of the presentation (images, maps, diagrams, videos, data tables, etc)
• This is an update over the previous 200% zoom requirement
• Equivalent width of 1280px zoomed to 400%
• Luckily, if your site is already responsive down to phone sizes, 95% of your work is already done! 

Non-Text Contrast

• In addition to 4.5:1 for normal text and 3:1 for large text (or 7:1 and 4.5:1 in AAA)
• Essential graphical objects and UI components (anything essential to understanding content and functionality) must have 3:1 ratio against adjacent colours
  • Exceptions: decorative, logos, etc

Text Spacing

• Large blocks of text need to have the following customizable to the user without loss of function:
  • Minimum line height of 1.5
  • Minimum spacing beneath paragraphs of 2
  • Letter spacing at least 0.12
  • Word spacing at least 0.16

Content on Hover or Focus

• If hover or focus causes essential content to be visible it needs to be...
  • Dismissible without moving hover or focus away
  • Hoverable without the content being dismissed by the mouse movement
  • Persistent and not be dismissed until explicitly done so by the user
• Play it safe by using click events instead!
• Exceptions are tooltips or anything else that can be categorized as "additional content"

What now?

• At the very least, update your websites and content to comply with the upcoming A standards as soon as possible
• Start considering steps to comply with AA standards, knowing that they will become law in Ontario in just a few years
• AAA goes above and beyond and can be timely/costly to implement, but if there are quick wins, go for them

tHANK YOU

• Read up on the WCAG 2.1 here: https://www.w3.org/TR/WCAG21/
• Contribute to discussion here: https://github.com/w3c/wcag21/issues