5 Things I’ve Learned From the Accessibility Community

By Marcy Sutton / @marcysutton
Senior Front-End Engineer, Deque Systems

Who is Marcy Sutton?

axe-core Web-A11y Slack
Egghead.io Accessibility Seattle

Splitboarding with my dog Rainier

TODAY

  1. People with disabilities deserve equal rights
  2. Accessibility starts with UX
  3. The basics matter
  4. Use development skills for good
  5. You are not your user

Why do you care about accessibility?

I care about people.

In the US,
1 in 5 adults
has a disability.

A 2015 study published by the
Centers for Disease Control and Prevention

TheDisability Spectrum

  • Cognitive: Autism, TBI, learning
  • Hearing: Deafness, hearing loss
  • Motor: Spinal cord injury, Cerebral Palsy, ALS
  • Vision: blindness, low-vision, color
Icons by the Noun Project 1, 2, 3, 4

Your life could change at any time.

Spectrum of disability from permanent to situational

Microsoft Inclusive Design Toolkit
http://bit.ly/microsoft-inclusive-toolkit

1. People with Disabilities Deserve
Equal Opportunities.

Disabled people buy houses, too…

NAR: Real Estate Companies Should Address Website Accessibility to Avoid Lawsuits

Blind Woman Sues TD Ameritrade Over Allegedly Inaccessible Website

Wells Fargo

https://www.ada.gov/beyond_cases_26yrs.html

The ADA and Section 508

Enforcing users’ civil rights in the United States

Structured Negotiation book

2018 Legal Update from Lainey Feingold

Global Accessibility Requirements

  • Australia Disability Discrimination Act
  • Brazil Modelo de Acessibilidade de Governo Eletrônico
  • Equality Act in England, Scotland and Wales
  • European Accessibility Requirements for Public Procurement of Products and Services
  • India Rights of Persons with Disabilities Bill
  • Norway Anti-discrimination Accessibility Act
  • Israeli Standard 5568

Web Content Accessibility Guidelines (WCAG)

WCAG 2.0

  • Perceivable
  • Operable
  • Understandable
  • Robust
Image credit: Michael Gaigg

Zillow homepage run through the aXe extension

Zillow homepage with arrow over WCAG violations in the aXe extension

Understanding WCAG SC 1.1.1: Non-text Content

Understanding WCAG SC 4.1.2: Name, Role, Value

2. Accessibility starts
with UX

Low contrast has a big impact

http://webaim.org/articles/visual/lowvision

Low contrast footer
Low contrast footer with simulated vision impairment

Consider alternate input modalities

Input modalities in an interactive tabletop system

Braille display

Simplicity is intuitive

Book: Don't Make me Think

There are established
UI patterns

https://www.w3.org/TR/wai-aria-practices/

Design annotations foster collaboration

Designing for Accessibility, BBC

Design Annotation Methods

  • Reading, tab order
  • Semantics and structure
  • Interaction states
  • Minimum control size

3. The Basics Matter

HTML

  • Native elements 1st!
  • Form labels
  • Alt text
  • Semantic structure

Safari Voiceover Demo

Zillow homepage with link inspected in accessibility inspector, showing aria-hidden on an ancestor

JavaScript

  • Custom widgets
  • Media controls
  • Single page apps
  • Focus management
  • Notifications

Notes on Client Rendered Accessibility article

CSS

  • Focus styles
  • Hidden vs. Visible
  • Color contrast

Egghead video: How Hidden vs. Visible Elements affect screen reader users

Color contrast ratios

WCAG 2.0 AA

  • Regular text: 4.5:1
  • Large text*: 3:1

*18pt / 24px or 14pt / 19px bold font size

Color Suggestions

4. You can use development skills for good.

Testing for Accessibility

We can achieve digital equality
by making accessibility part of our web design
and development workflow.

Take the no-mouse challenge

Test with Screen Readers

http://webaim.org/articles/screenreader_testing

  • Windows: NVDA & Firefox
  • OSX, iOS: Safari & Voiceover
  • Android: TalkBack & Firefox

aXe Chrome Extension

aXe Chrome extension

aXe Firefox Extension

aXe Firefox extension

Zillow homepage run through the aXe extension showing a violation

axe-core The Open Source Accessibility Engine

https://github.com/dequelabs/axe-core

  • JavaScript API
  • No false positives
  • Highly configurable
  • Great for automated tests
  • Supports Shadow DOM

axe-webdriverjs aXe Selenium Webdriver integration

https://github.com/dequelabs/axe-webdriverjs

  • Robust browser testing
  • aXe injected for you
  • Framework agnostic

5. You are not your user

Test with real users

https://www.access-works.knowbility.org

Knowbility Access Works

Ambiguous visual icons

Check your privilege, age, ability, demographic...

Floppy Disk
Home
Menu
Stats
Save
Home
Menu
Stats

Conflicting gestures

Supporting users

  • Limit custom keyboard shortcuts
  • Provide multiple UI affordances
  • Keep it simple
  • Test early and often

It’s about
User Experience.

Let’s make it better.

Resources

Thank you, Zillow!

Twitter: @marcysutton

Github: @marcysutton