The (Near) Future of Web Accessibility - WCAG 2.1

THIS IS OUTDATED!

Front End Web Developer,

Race Roster

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

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

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

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!

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

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

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!

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

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

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