Making the Web Work for Everyone

Hey! I'm Jason Webb

Developer Advocate @ Accessible360

  jasonwebb
  jwebb@accessible360.com

  • 1. What is digital accessibility?
  • 2. Why does it matter?
  • 3. How do I build accessible stuff?
  • 4. Live demos!
  • 5. Testing for accessibility
  • 6. How can you make things better?
  • 7. Learning more

Accessibility is about empathy

Reducing and removing barriers to access for people who experience the web differently

Physical

  • Muscle control limitations
  • Joint disorders
  • Missing limbs

Auditory

Partial or complete loss of hearing in one or both ears

Visual

  • Partial loss ("low vision")
  • Complete loss ("blindness")
  • Reduced or increased sensitivity to certain colors ("color blindness")

Cognitive

Learning, memory, perception, and problem solving. May also include behavioral and mental health disorders.

Temporary

Broken limbs, vertigo or fatigue after medical procedures, recovery from accidents, undergoing physical therapy.

Situational

High-stress environments like disaster/accident scenarios, distraction, broken mouse / trackpad forcing keyboard use, screen glare, ESL users.

Why does it matter?

Its the right thing to do!

Legal

  • Rehabilitation Act of 1973

  • Section 508 and 504

    Government agencies and orgs receiving federal aid (public schools, health care, etc)

  • Americans with Disabilities Act (ADA)

    Federal civil rights law prohibiting discrimation based on disability. Web + mobile as "public accommodations"

Businesses

  • Reduce risk of legal action (demand letters, lawsuits, etc)
  • Building in accessibility throughout SDLC is much easier and cheaper than trying to hack it in during a crisis.
  • Reach a larger market share, potentially cornering market segments that have been underserved.
  • Improve company image by engaging in objectively positive, socially responsible activity.

Spend money on talent, not lawyers!

Developers

  • Because it relies heavily on using native tech as intended, it naturally encourages better code quality.
  • Sought after skill in modern market, and is increasing in value right now
  • Personal and professional growth. Learning new things is important.

How do I build accessible stuff?

WCAG to the rescue!

This slide has GIF background image of a chihuahua wearing a Superman costume walking on a treadmill

12 guidelines based on 4 principles

  • Perceivable - everyone can access the content
  • Operable - everyone can interact with it
  • Understandable - UI and content is clear
  • Robust - works with many user agents + AT

Use HTML the way it was designed

Use semantic, native, and valid markup as much as possible

Use ARIA, but only when absolutely necessary

( don't over-do it! )

Demo: page structure

Demo: forms

Testing for accessibility

Automated tools only catch about 40% of issues
According to research from GOV.UK

Good for:

  • Identifying simple, clear syntax issues like invalid or bad markup use
  • Flagging potential issues for investigation by testers
  • Regression testing to alert devs about potential issues to check

Bad for:

  • Checking for overuse of ARIA
  • Misuse of semantic elements given context
  • Accurate, useful image descriptions
  • UX for people with disabilities - do they enjoy your site?
  • Use only your keyboard to get a decent idea of operability, focus indicators, and focus management.
  • Use mobile devices (phones and tablets) - they are very popular as assistive devices.
  • Use extreme zoom and check for content overflows and touch operability.
  • Use a checklist like the Vox Product Accessibility Guidelines

In court, nothing beats real human feedback!

What can
you do?

  • Advocate for accessibility as a core feature during requirements gathering and planning
  • Provide accessibility guidance and best practices in your pattern library or design framework
  • Make it impossible for content creation tools to produce bad markup
  • Create and use personas of people with disabilities
  • Make a "Wheel O' Empathy Prompts" and challenge co-workers once a week as team-building exercise.
  • Set up Keyboard Only or Screen Reader Only days
  • Collaborate with people with disabilities - user testing, lunch and learns, demo days, pairing sessions
  • Empower accessibility champions in multiple areas - start with informal SMEs, grow from there
  • Reach out to companies like Accessible360 for advice and testing!

Hire more people with disabilities!

WAI-ARIA Working Group official site
w3.org/WAI
WAI-ARIA Authoring Practices
w3.org/TR/wai-aria-practices-1.1
ARIA 1.1 specification
w3.org/TR/wai-aria-1.1
How to Meet WCAG (Quick Reference)
w3.org/WAI/WCAG21/quickref/?versions=2.0
The A11y Project
a11yproject.com
Empathy Prompts
empathyprompts.net
Google Accessibility
google.com/accessibility
Vox Product Accessibility Guidelines
accessibility.voxmedia.com
GOV.UK Design System
design-system.service.gov.uk
US Web Design System
designsystem.digital.gov
Accessibility for Teams
accessibility.digital.gov
Plain Language
plainlanguage.gov
QR code linked to this talk

bit.ly/2VQKCbY

kthxbai!