Become an Accessibility BFF
With Your New Friend Pa11y

Serena and Blair photoshoot

Jennifer Wadella

@likeOMGitsFEDAY

  • Lead Angular Dev at Bitovi
  • Community organizer
  • Kombucha brewin' crazy plant lady
image/svg+xml
Paul Rudd

Pacman Rule

Pacman shape

When talking in a group of people, instead of a circle create a Pacman shape.

Accessibility - why should I care?

I don't need friends, I need more champagne - Blair

An estimated
1 billion people
(15% of the world)
live with disabilities

- World Health Organization

Setting the Stage for Accessibility Testing

Issues to be aware of:

Visual Impairments

  • blindness
  • color blindness(Deuteranopia, Protanopia, Tritanopia)

Auditory Impairments

  • Deafness or partial deafness
  • Needing to rely on subtitles & text

Motor Impairments

  • Physical impairments - ex. loss of limbs
  • Age - affecting coordination
  • Diseases - affecting motor control
  • Struggles using mouse or keyboard

Other Considerations

  • Mobile devices
  • Slow internet connectivity
  • Enlarged/zoomed in text

a11y

Accessibility (a11y) is a measure of a computer system's accessibility is to all people, including those with disabilities or impairments. It concerns both software and hardware and how they are configured in order to enable a disabled or impaired person to use that computer system successfully.

Accessibility Checklist

  • ✅ Landmark Roles
  • ✅ Language Attribute
  • ✅ Semantic Headings
  • ✅ Links - :focus state and recognizable
  • ✅ Image alt text
  • ✅ Forms - labels, placeholders, and fieldsets
  • ✅ Audio/video - provide transcripts/subtitles
  • ✅ Color & Contrast
  • ✅ Screen Reading/Keyboard Testing

Let's review some standards!

Section508, WCAG2A, WCAG2AA, or WCAG2AAA

WCAG 2.1 Guidelines

(updated as of June 5, 2018)

§ 1194.22 Web-based intranet and internet information and applications.

https://www.w3.org/WAI/standards-guidelines/wcag/

Perceivable

  1. Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  2. Provide alternatives for time-based media.
  3. Create content that can be presented in different ways without losing information or structure.
  4. Make it easier for users to see and hear content including separating foreground from background.

(2.1) Adaptable

  1. Info & relationships
  2. Meaningful sequence
  3. Orientation - works both ways
  4. Identify purpose - inputs, icons, and regions

(2.1) Distinguishable

  1. Reflow
  2. Non-Text Contrast
  3. Text Spacing
  4. Content on Hover or Focus

Operable

  1. Make all functionality available from a keyboard.
  2. Provide users enough time to read and use content.
  3. Do not design content in a way that is known to cause seizures.
  4. Provide ways to help users navigate, find content, and determine where they are.

Understandable

  1. Make text content readable and understandable.
  2. Make Web pages appear and operate in predictable ways.
  3. Help users avoid and correct mistakes.

Robust

  1. Maximize compatibility with current and future user agents, including assistive technologies.

Change Is The Only Const

It is OUR responsibility as engineers to build accessible products.

How Can I Become an Accessibility BFF?

Blair & Serena Laughing

Know Your A11y Accessories

pa11y logo

http://pa11y.org/

https://github.com/pa11y/pa11y

Pa11y is your automated accessibility testing pal. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting.

Pa11y + Puppeteer

Pa11y uses Puppeteer to launch a browser instance to run tests defined using the JavaScript interface. Puppeteer allows us to crawl SPA pages and take screenshots.

Let's test some websites!

Blair and Chuck judging

pa11y-ci

CI runs accessibility tests against multiple URLs and reports on any issues. This is best used during automated testing of your application and can act as a gatekeeper to stop a11y issues from making it to live.

For when "Code" change is the only const

Let's test some more websites!

Blair drinking champagne

Example Code Here:

https://github.com/tehfedaykin/GossipGirlNG

Ugh, that seems like a lot of work

Blair annoyed

pa11y Dashboard

https://github.com/pa11y/pa11y-dashboard

Arguing the business side

  • Minimal effort to implement
  • Immediate improvements available
  • Audience retention
  • Build customer loyalty
  • Help improve SEO
  • Avoid lawsuits(federal orgs & projects)

Go forth and
become an A11y BFF!

Let's make the web a more accessible place.

Questions?

Find me to chat during breaks!

Georgina as Gossip Girl

Need help? jennifer@bitovi.com

Slides available at: tehfedaykin.github.io/pa11yBFF

#pa11ybff #revoJS@likeOMGitsFEDAY