Become an Accessibility BFF
With Your New Friend Pa11y

Serena and Blair photoshoot
Thanks to all our sponsors!

Jennifer Wadella

@likeOMGitsFEDAY

  • JavaScript Developer at Bitovi
  • International Speaker
  • Kombucha brewin' crazy plant lady

This talk may contain strong language, harsh truths, and serious passion.

image/svg+xml
Paul Rudd

Accessibility - why should I care?

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

Visually Impaired Americans

Hearing Impaired Americans

Physically Impaired Americans

Impaired Americans

Data source: National Center for Health Statistics, Summary Health Statistics: National Health Interview Survey, 2015 , https://www.cdc.gov/nchs/fastats/disability.htm.

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.

Setting the Stage for Accessibility Testing

Issues to be aware of:

Visual Impairments

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

webaim.org/resources/contrastchecker/

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

Accessibility Checklist

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

Let's review some standards!

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 (for example simpler layout) 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.

WCAG2A, WCAG2AA, vs WCAG2AAA?

confused Serena
  • Level A – the most basic web accessibility features
  • Level AA – deals with the biggest and most common barriers for disabled users
  • Level AAA – the highest (and most complex) level of web accessibility

Section 508 Standards

https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards

Section 508 is the amendment to the United States Workforce Rehabilitation Act of 1973, a federal law mandating that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities.

  • Published December 21, 2000
  • Part of the Federal Acquisition Regulation (FAR) - address access for people with physical, sensory, or cognitive disabilities
  • Updated on January 17th, 2017 - this integrated WCAG 2.0
  • For all other non-procured ICT, federal agencies and contractors must comply with the updated 508 Standards beginning on January 18, 2018.
  1. A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).
  2. Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
  3. Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
  4. Documents shall be organized so they are readable without requiring an associated style sheet.
  5. Redundant text links shall be provided for each active region of a server-side image map.
  6. Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
  7. Row and column headers shall be identified for data tables.
  8. Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
  1. Frames shall be titled with text that facilitates frame identification and navigation.
  2. Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
  3. A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
  4. When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
  5. When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).
  6. When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
  7. A method shall be provided that permits users to skip repetitive navigation links.
  8. When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Major Changes- Final Update

  • Restructuring provisions by functionality instead of product type due to the increasingly multi-functional capabilities of ICT;
  • Incorporating the Web Content Accessibility Guidelines (WCAG) 2.0 by reference and applying Level A and Level AA Success Criteria and Conformance Requirements to websites, as well as to non-web electronic documents and software;
  • Specifying the types of non-public facing electronic content that must comply;
  • Requiring that operating systems provide certain accessibility features;
  • Clarifying that software and operating systems must interoperate with assistive technology (such as screen magnification software and refreshable braille displays);
  • Addressing access for people with cognitive, language, and learning disabilities; and
  • Harmonizing the requirements with international standards.

https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh/overview-of-the-final-rule

Serena saying 'kill me now'

Not the hero we need

pa11y logo

http://pa11y.org/

but the hero we deserve

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 cli is fun ...

but not super useful in a typical workflow

From the cli

  • Run an accessibility test against a url
  • Use a reporter to output results to a file (csv,tsv,html,json,markdown)
  • Choose the accessibility ruleset
  • Choose to ignore warnings and notices

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.

.pa11yci

Define your fail threshold

How many errors before "failure" is determined

Using the JS Interface

Result output

Async, await

Actions

Sets of instructions to run before accessibility tests are run.

Actions can be verified

hide Elements

ignore

log

page

http://phantomjs.org/api/webpage/property/settings.html

rules/standard

screen Capture

Screen capturing can be really helpful for troubleshooting.

timeout/wait

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

recap

  • we wrote a basic test
  • we used actions to aid tests
  • we output results to html file
  • we created a custom report html file
  • we created a custom 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)

Questions?

Georgina as Gossip Girl

Want to work with me? jennifer@bitovi.com

Slides available at: tehfedaykin.github.io/pa11yBFF

Pre-talk playlist

@likeOMGitsFEDAY #pa11ybff #techorama