Become an Accessibility BFF
With Your New Friend Pa11y
- Lead Angular Dev at Bitovi
- Community organizer
- Kombucha brewin' crazy plant lady
When talking in a group of people, instead of a circle create a Pacman shape.
Accessibility - why should I care?
Setting the Stage for Accessibility Testing
Issues to be aware of:
- color blindness(Deuteranopia, Protanopia, Tritanopia)
- Deafness or partial deafness
- Needing to rely on subtitles & text
- Physical impairments - ex. loss of limbs
- Age - affecting coordination
- Diseases - affecting motor control
- Struggles using mouse or keyboard
- Mobile devices
- Slow internet connectivity
- Enlarged/zoomed in text
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.
- ✅ 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
- 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.
- Provide alternatives for time-based media.
- Create content that can be presented in different ways without losing information or structure.
- Make it easier for users to see and hear content including separating foreground from background.
- Info & relationships
- Meaningful sequence
- Orientation - works both ways
- Identify purpose - inputs, icons, and regions
- Non-Text Contrast
- Text Spacing
- Content on Hover or Focus
- Make all functionality available from a keyboard.
- Provide users enough time to read and use content.
- Do not design content in a way that is known to cause seizures.
- Provide ways to help users navigate, find content, and determine where they are.
- Make text content readable and understandable.
- Make Web pages appear and operate in predictable ways.
- Help users avoid and correct mistakes.
- Maximize compatibility with current and future user agents, including assistive technologies.
It is OUR responsibility as engineers to build accessible products.
How Can I Become an Accessibility BFF?
Know Your A11y Accessories
Pa11y is your automated accessibility testing pal. It runs HTML CodeSniffer from the command line for programmatic accessibility reporting.
Pa11y + Puppeteer
Let's test some websites!
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!
Ugh, that seems like a lot of work
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.