The (Near) Future of Web Accessibility - WCAG 2.1

THIS IS OUTDATED!

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

The (Near) Future of Web Accessibility

By Scott Blinch

The (Near) Future of Web Accessibility

Here's a rundown on what to expect from WCAG 2.1, coming as early as Spring 2018. NOTE: THIS IS OUTDATED!

  • 1,210