Accessibility

Master Class @ SXSW

#a11yMaster

Agenda

• 9:30 - Overview and Introductions
• 9:35 - How We Define Accessibility
• 9:50 - The Case for Accessibility
• 10:15 - Role Based Accessibility
• 10:45 - Tools to Use
• 10:55 - Quick Stretch Break 
• 11:00 - Accessibility in Action
  • Designer Review
  • Developer Review
• 12:15 - Wrap Up & Questions
• 12:30 - Go Forth and Prosper

Introductions

Robert Jolly

• Technology Director - Knowbility
• W3C contributor - WAI Education and Outreach
• Formerly with Happy Cog

Introductions

Becky Gibson

• Sr. Accessibility Strategist - Knowbility
• W3C contributor - ARIA, APA, WCAG and more
• Formerly with IBM, Dojo

• Austin-based non-profit organization
• Formed in 1999

Knowbility’s mission is to create a more inclusive digital world for all.

How We Define Accessibility

We define accessibility in terms of

• get the same information,
• perform the same interactions, and
• function as others

Can people with disabilities…

Why it Matters:

• Employment
• Independence
• Equality

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.

Assistive Technologies

• Speech Input
• Zoom/Magnification
• High Contrast
• Screen Readers
• Switch Devices

Assistive Technologies

Internal Knowbility Demo Video (uncaptioned version)

The Straw Test

• Simulates screen magnification
• Simulates reduced vision
• You only need your hand or a straw!

Accessibility Perspectives Videos

The Business Case for Accessibility

• Increase Revenue
• Boost Market Share
• Improve Efficiency
• Drive Innovation
• Reduce Legal Risks

Increase Revenue

• 1.3 Billion people with disabilities worldwide
  • 56 million in the US 
• 53% of consumers when including friends & family
• 8 Trillion $US disposable income

“If you do not intentionally include, you unintentionally exclude.”

Neil Lenane

Talent Acquisition/Diversity and Inclusion Leader
 Progressive Insurance 

Boost Market Share

• Digital technologies are equalizers.
• People with disabilities are vocal.
• People with disabilities are loyal.
• People with disabilities influence family & friends.
• Socially Responsible and Ethical Consumers pay attention to accessibility and inclusion.

What companies openly include PwD?

Improve Efficiency

• People with disabilities are the original innovators
• Design and Build Once

• easier to include all users from the beginning
• more cost effective to find and fix issues earlier 

• 6 times more costly during development than at design 
• 15 times more costly during testing

Drives Innovation

• People with disabilities are the original innovators
• Studies show groups of diverse problem solvers outperform groups of recognized, repeatable problem solvers​
• Accessibility enhances Usability

What are some benefits of accessible technologies? 

Reduce Legal Risk

• Many countries have digital accessibility laws
• Some US courts interpreting the ADA to include a company's entire presence - buildings and web
  • Winn-Dixie, 2016
• Number of lawsuits is increasing
  • Number Of Federal Website Accessibility Lawsuits Nearly Triple, Exceeding 2250 In 2018, January 2019
  • 177% increase over 814 2017
• Litigation is expensive and damaging to reputation

It’s the right thing to do!

Accessibility Principles

Guidelines

The Principles of Accessibility

P.O.U.R.

• get the same information,
• perform the same interactions, and
• function as others

Can people with disabilities…

Accessibility Guidelines

Since 2008: WCAG 2.0 

• Principles (4)
  • Perceivable
  • Operable
  • Understandable
  • Robust
• Guidelines (12)
• Success Criteria (61) ... 38 at Levels A & AA 

Accessibility Guidelines

New (current): WCAG 2.1

• Compatible with WCAG 2.0
• Adds new Success Criteria (17 total, 12 at A & AA)
• Covers areas WCAG 2.0 did not address well:
  • Low Vision
  • Mobile
  • Cognitive

Standards and guidelines help measure and document the use of recommended techniques.

But, ultimately, the measure is how well our sites and apps work for people.

Essential Components of Web Accessibility

Role-Based Accessibility 

• Designers
• Developers
• Project/Product Managers
• Quality Assurance
• Who else?

Designer Role

• Color (contrast, meaning)
• Structure & hierarchy
• Interactions (states, errors, confirmations)
• Proximity
• Controls for motion (video, animation)
• What else?

Developer Role

• Operability (mouse, touch, keyboard, voice)
• Meaningful structure
• Interaction support (element states, errors, confirmations, focus management)
• Parsing
• What else?

PM Role

• Understand the overall project/product picture related to accessibility
• Think POUR throughout process
• Provide team support & represent users 
• Escalate, when needed
• What else?

QA Role

• Develop test plans with accessibility built-in
• Use automated tools where practical
• Use manual testing for full coverage 
• Reduce false positives
• Act as accessibility safety net
• What else?

Tools to Use

• Colour Contrast Analyser (Mac + Windows)
• Stark (Sketch + Adobe XD plugin)
• your keyboard
• axe
• Accessibility Bookmarklets
• Web Accessibility Evaluation Tool (WAVE)
• Web Developer
• Dynamic Accessibility Plugin (DAP)
• Siteimprove Accessibility Checker

Stretch 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 Tips:

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

Want a checklist?

Developer Review Tips:

• Implement keyboard support & skip link(s).
• Make visual focus order match source code order. 
• Use semantic HTML.
• Include page landmarks.
• Properly associate labels with form fields.
• Force proper alt text.
• Use ARIA wisely.
• Test with a screen reader.

Ask developer teams to: 

Dev Review How-To:

You can check for keyboard support by using your keyboard to tab to links and other controls.

• Can you tell where your focus is?
• Do elements work as expected with the keyboard?

Keyboard basics:

Dev Review How-To:

Here is how you can test for a functioning  visible, keyboard-only skip navigation feature using axe.

Dev Review How-To:

How to evaluate use of tabindex by using the tabindex bookmarklet.

Dev Review How-To:

You can check for semantic structure by using the WAVE tool in your browser.

Dev Review How-To:

You can check for landmarks by using the Landmarks bookmarklet.

• header / banner
• nav / navigation
• main
• form
• footer / content info
• aside / complementary info

Dev Review How-To:

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

Dev Review How-To:

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

<img srcX="valid-img.jpg" alt="NO ALT TEXT">

Will surely get someone's attention

(src attribute is broken, image won't  load)

Dev Review How-To:

How to evaluate ARIA by using the WAVE tool in your browser.

In-Browser Page

Review Sessions

In-Browser 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!

Becky Gibson

Robert Jolly

#a11yMaster