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
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
- Read up on the WCAG 2.1 here: https://www.w3.org/TR/WCAG21/
- Contribute to discussion here: https://github.com/w3c/wcag21/issues
The New State of Web Accessibility
By Scott Blinch
The New State of Web Accessibility
- 1,243