I am blue buttons and you can too

This week's exciting topic:

...just kidding.

And other ways to artificially extend the life of a joke

why PHP is a complete and utter waste of time

This week's exciting topic:

...just kidding.

the UNEXPECTED and  INEXPLICABLE beautiful nuance of mixed indentation

This week's exciting topic:

...just kidding.

Tabs!

Spaces!

The new state of Web Accessibility - WCAG 2.1

Surprised?

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?

what's all this nerd crap?

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

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 now for large organizations, or by 2021 for smaller
  • Live video captions
  • Audio description of video
  • Contrast (4.5:1)
  • Zoom/resizing
  • Navigation alternatives
  • Clear headings/labels
  • Consistent menus, icons, buttons
  • Error suggestion, prevention

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"

AAA

  • 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
  • Target sizes for pointer inputs must be 44px by 44px
  • People can use and switch between different modes of input when interacting with web content (e.g. a user may pair keyboard/mouse with their touchscreen phone - keep that in mind before attempting to restrict action to touch)

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 New State of Web Accessibility

By Scott Blinch

The New State of Web Accessibility

  • 159
Loading comments...

More from Scott Blinch