Accessibility Training

Robert Jolly

Agenda

• 9:30 - Overview and Intro Exercise
• 10:00 - How People with Disabilities Use Technology
• 10:30 - Accessibility Guidelines Review and What’s Next
• 11:00 - Take a 15-Minute Break
• 11:15 - Leading By Example: Design & Pattern Libraries
• 12:00 - Break for Lunch
• 1:00 - Design Review Sessions
• 2:30 - Take a 15-Minute Break
• 2:45 - Coded Page Review Sessions
• 3:45 - Wrap Up

Three Questions:

1. Who are you?
2. What do you do?
3. What is one thing you want to learn today?

How People with Disabilities Use Technology

General Categories of Disabilities

• Auditory
• Cognitive, Learning, Neurological
• Physical
• Speech
• Visual

General Categories of Disabilities

Notes:

• Some people may have disabilities from birth or as a result of disease, illness, or accident.
• Disabilities can be permanent, temporary, or situational.
• Additionally, people often develop impairments with aging.

Accessibility Perspectives

Accessibility Guidelines

• Review of what we have.
• Preview of what’s new.

Accessibility Guidelines

Existing: WCAG 2.0 

• Four main Principles
  • Perceivable
  • Operable
  • Understandable
  • Robust
• Guidelines and Success Criteria
• Section 508 aligns with WCAG 2.0 Level AA

Accessibility Guidelines

New/Current: WCAG 2.1

• Compatible with WCAG 2.0
• Adds new Success Criteria (17 total, 12 at AA)
• Covers areas WCAG 2.0 did not address well:
  • Low Vision
  • Mobile
  • Cognitive
• Section 508 does not use WCAG 2.1 (yet).

Accessibility Guidelines

What to watch for:

• Section 508 updates  
• California AB 434
• Litigation changes related to guidelines

Break

Leading By Example:
Design & Pattern Libraries

• Style Guides
• Best Practices
• Pattern Libraries
• Accessibility Guidelines

Leading By Example:
Design & Pattern Libraries

You can (and probably should) provide brand, code, usability, and accessibility guidance in one place. 

Notable Examples:
U.S. Web Design System

Notable Examples:
IBM’s Carbon Design System

Notable Examples:
ExxonMobil Unity Design System

Notable Examples:
A11y Style Guide

Lunch Break

Design Review Sessions

Design Review

Let’s take a look at some sites.

Design Review Tips:

• Use good color contrast.
• Don’t use color alone for meaning.
• Provide visible focus (“outlines”).
• Design bypass blocks (“skip navigation”).
• Ensure labels are on all form fields.
• Document and design form error handling.
• Use proximity for related elements.
• Craft appropriate alt text.
• Think about keyboard controls for interactions.

Ask design teams to: 

Design Review How-To:

You can check for color contrast using the Colour Contrast Analyser tool.

Design Review How-To:

You can check for visible focus by using your keyboard to tab to links and other elements.

Design Review How-To:

Here is how you can test for the presence of a visible, keyboard-only skip navigation feature.

Design Review How-To:

You can check for proper form labels by using the WAVE tool in your browser.

Design Review How-To:

How to evaluate proper alt text on images by using the WAVE tool in your browser.

Design Review Tips:

• Accessibility for Teams - Visual Design
• Vox Product Accessibility Guidelines

Want a checklist?

Break

Coded Page Review Sessions

Coded Page Review

Let’s take a look at some sites.

Coded Page Review Tips:

• Use semantic markup—always.
• Keyboard test everything.
• Ensure page titles are descriptive and unique.
• Keep heading levels logical and consistent.
• Use ARIA correctly when needed.
• Test for accessibility at each code commit.
• Assume 3rd-party code libraries are not accessible.
• Keyboard test everything.

Ask development teams to: 

Coded Page Review Tips:

• Accessibility for Teams - Developers
• Vox Product Accessibility Guidelines

Want a checklist?

Wrap Up

Additional  Tools & Resources

• Colour Contrast Analyser (Mac, Windows)
• Accessibility Testing Bookmarklets
• Web Developer Toolbar (Chrome, Firefox, Opera)
• WAVE Browser Extension (Chrome, Firefox)
• W3C How to Meet WCAG 2 (Quick Reference)
• W3C An Alt Decision Tree
• NVDA (Windows Screen Reader - Free)

Thank You!

Robert Jolly