The (Near) Future of Web Accessibility - WCAG 2.1

THIS IS OUTDATED!

• WCAG 2.1 has changed since this presentation
• See my new slide deck: https://slides.com/scottblinch/wcag-2-1

Scott Blinch

Front End Web Developer,

Race Roster

    @scottblinch

The Scoop

• Updating all 3 levels (A, AA, AAA)
• Backwards compatible
• Updates focus on cognitive disabilities, new emerging technology
• Its 'final' draft (7th)
• Last call for final comments
• Will be made a Candidate Recommendation soon
• Could become the new standard as early as spring
• Laws will likely lag a bit to update
• Potential for minor updates/changes

A

• Required now!
• Define language
• Text alternatives for all media
• Logical structure in a meaningful order
• Go beyond colour
• Keyboard navigable, controllable
• Limit flashes
• Skip links
• Link purpose
• Accessible forms

AA

• Required by 2021
• Live video captions
• Audio description of video
• Contrast (4.5:1)
• Zoom/resizing
• No images of text
• Navigation alternatives
• Clear headings/labels
• Consistent menus, icons, buttons
• Error suggestion, prevention

WCAG 2.0 Review

Accessible Authentication (A)

• Need a method of authentication that does not require transcribing information
  • Like username/password - uh oh
• Providing a reset option satisfies this requirement
  • As long as it doesn't require transcribing information
• Exceptions are if the information being described is basic and easily accessible by the user
  • Name, address, SIN, etc
• Or if there are legal requirements

Keyboard Shortcuts (A)

• 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
• To avoid potential conflicts with accessibility technology like screen readers which rely heavily on character key keyboard shortcuts

Pointer Accessible (A)

• 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
• 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

Motion (A)

• 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

Zooming (AA)

• Content can be zoomed up to width of 320px
• 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%
  • Websites intended to scroll horizontally should take 320px as height
• Luckily, if your site is already responsive down to phone sizes, 95% of your work is already done! 

Colour Contrast (AA)

• 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 (AA)

• Large blocks of text need the following (figures are relative to font size)
  • 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 (AA)

• If hover or focus causes 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!

Interruptions (AA)

• Any automatic interruptions or changes to content needs to be pausable
  • Add a pause button to your sliders (or better yet, don't auto-slide them!)
  • Exceptions: if the user started them, or if they contain emergencies

Target Size (AA)

• Target sizes for pointer inputs must be 44px by 22px (44x44 in AAA), except...
  • Equivalent target of appropriate size exists elsewhere
  • Inline
  • Essential to the information

AAA

• Content cannot be restricted to a specific orientation (like portrait and landscape)
  • Unless essential, like bank check, piano application, etc
• If data can be lost due to user inactivity, warn them about how long they can be inactive before that happens
  • Unless >20 hours of inactivity
• All non-essential animations need to be able to be disabled by the user without causing any essential functionality to also be disabled

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