5-things-i-learned-from-accessibility

View Github Repository Open presentation in a new window

marcysutton

See all presentation from marcysutton

5-things-i-learned-from-accessibility

0 0

5-things-i-learned-from-accessibility

A talk on what I've learned as an accessibility advocate and web developer

On Github marcysutton / 5-things-i-learned-from-accessibility

5 Things I’ve Learned From the Accessibility Community

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

Who is Marcy Sutton?

Splitboarding with my dog Rainier

TODAY

People with disabilities deserve equal rights Accessibility starts with UX The basics matter Use development skills for good You are not your user

Why do you care about accessibility?

I care about people.

In the US, 1 in 5 adultshas 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.

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

1. People with Disabilities Deserve Equal Opportunities.

In Education:

“Disabled students who can’t access course materials can get behind fast”

Source: US News Experts suggest they make an effort to articulate their needs to instructors before class starts

Louisiana Tech University

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

In July 2013, the Justice Department reached a settlement with Louisiana Tech to remedy alleged violations of the ADA. The settlement resolves allegations that the University violated the ADA by using a version of an online learning product that was inaccessible to a student who is blind. The student’s lack of access to the course materials persisted for nearly one month into the University quarter, at which point the student was so far behind in his coursework that he felt compelled to withdraw from the course. The settlement also resolves allegations that in a subsequent course, the same student was not provided accessible course materials for in-class discussion or exam preparation in a timely manner.

Wells Fargo

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

For 10 years, Joe couldn’t make online mortgage payments on Wells Fargo’s website because he was blind and the site was inaccessible to him. Each month, Wells Fargo directed him to submit his payment by telephone, which required a $25 service fee. Today, because of the Justice Department’s settlement, all customers – including Joe and others with disabilities – can pay their bills and manage their finances without facing discrimination.

The ADA and Section 508

Enforcing users’ civil rights in the United States

ADA: regulations for businesses and State and local governments. Increasing DOJ involvement indicating online businesses as "public accommodations" Section 508 Amendment to the Rehabilitation Act of 1973: requires Federal agencies to make their electronic and information technology accessible to people with disabilities, when they develop, procure, maintain, or use electronic and information technology.

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

Instructure homepage run through the aXe extension showing a violation on the logo

Instructure homepage with arrow over WCAG violations in the aXe extension

Understanding WCAG SC 1.1.1: Non-text Content

PERCEIVABLE

Understanding WCAG SC 4.1.2: Name, Role, Value

ROBUST.

2. Accessibility startswith UX

Low contrast has a big impact

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

Consider alternate input modalities

Braille keyboards Voice interfaces Mobile screen readers Switch control 3D gestures

Braille display

  • Programmatic means of deriving content
  • Multi-modal event handling
  • Application state management

Simplicity matters

There are web patterns

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

Starting here means you are more likely to be successful with minimal changes/compromises in the design to be made accessible. Design within constraints can be absolutely beautiful and accessible

Design annotations foster collaboration

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

Instructure blog in Chrome Accessibility DevTools

JavaScript

  • Keyboard support
  • Focus management
  • Notifications
  • Media controls

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

https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en

4. You can use development skills for good.

Testing for Accessibility

We can achieve digital equalityby 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 Firefox Extension

Instructure homepage run through the aXe extension showing a violation on the logo

axe-core The Open Source Accessibility Engine

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

  • JavaScript API
  • No false positives
  • Highly configurable
  • Great for software tests

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

This leads to a strong bias and often ends in an inefficient design. Design to optimize the user experience for outsiders, not insiders.

Ambiguous visual icons

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

Floppy Disk
Home
Menu
Stats
Save
Home
Menu
Stats

Conflicting gestures

http://ionicframework.com/demos/swipe-cards/

Supporting users

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

It’s aboutUser Experience.

Let’s make it better.

What else?

  • Feedback: hover/focus, updating widget instructions, external links, etc.
  • Tab order
  • Not trapping people in widgets they can’t get out of
  • Touch: make sure your events work
  • A whole other talk: How accessibility and automated testing are BFFs

Resources

Thank you, Instructure!

Twitter: @marcysutton

Github: @marcysutton

5 Things I’ve Learned From the Accessibility Community By Marcy Sutton / @marcysutton Senior Front-End Engineer, Deque Systems