Accessible by default

How to get there, and make it last?

Prae tweets at @praesongprasit

🖖 hands up if...

It's ok... I get you

🛠️ Lets fix it

⚠️ Disclaimer

These are my personal views and I’m still learning

😑 😱 🤩

Common reactions to
accessibility project

What is
web accessibility?

Inclusion and access to
information and services

How is
web = accessible?

Hyper Text Markup Language
🤍 HTML

Who is web accessibility for?

🤍 Everyone

“Disabled”
communities

Permanent, temporary, situational

🪄 Assistive tech

Assistive tech

🤍 HTML

						
							import React from 'react';
							import { Button } from '@a-ui-library;

							function App() {
								return <Button color="primary">Shop now</Button>;
							}
						
					

Did you just disable someone?
Check your HTML output

Are you accessible?

  • Ask users 🤑
  • Web Content Accessibility Guidelines (WCAG)

WCAG
POUR principles

Perceivable, Operable, Understandable, and Robust

How to make an accessible web product?

Focus areas

Buy-in, audit, requirements gathering, screen reader training, design and content, test and development, usability testing

1. Buy-in

  • Accessibility 101s
  • User stories
  • Empathy workshop

1. Buy-in

  • Accessibility 101s
  • User stories
  • Empathy workshop

1. Buy-in

  • Accessibility 101s
  • User stories
  • Empathy workshop

2. Audit

internal vs external

2. Audit - What?

  • Highest traffic templates
  • Core user journeys
  • Critical components

2. Audit - Automated

  • Wave (free)
  • Google Lighthouse (free)
  • Accessibility Insights (free)
  • Axe Dev Tools (freemium)

2. Audit - Manual

  • Keyboard testing
  • Color contrast testing
  • Screen reader testing
  • Cognitive testing
  • Mobile testing

2. Audit - Report

  • Blameless debrief session
  • Get stakeholders involved
  • What pass? What fail? How critical?
  • Why? Access needs impacted?

🤯
1.3.1 info and relationships

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

3. Requirements -
User story

  • User goal
  • Impacted user (their access needs)
  • What does best UX look like?

3. Requirements - Which tech?

  • WebAIM’s annual survey
  • Local advocates
  • List ‘Tested with’ devices

4. Screen reader training

  • Everyone in the team
  • Divide and conquer
  • Share and celebrate learnings

4. Screen reader training

  • Everyone in the team
  • Divide and conquer
  • Share and celebrate learnings

4. Screen reader training

  • Everyone in the team
  • Divide and conquer
  • Share and celebrate learnings

5. Design & content

  • What can I do?
  • Isn’t it all technical?
  • Will this restrict my creativity?
  • Do we need to cover all access needs?

UX or Product designer
design experiences

Experiences ≠ visuals only

Design content & mobile first

Focused & linear experience is inclusive

6. Testing & development

  • Isn’t the design system already accessible?
  • I don’t get HTML & CSS!
  • Who tests what?

7. Verify the fixes

  • Focused usability testing!
  • Audit round 2+

Team needs

Empathy, curiosity, patience, consistency, perseverance, inclusion

Thanks

Questions? Feedback?!

Tweet me @praesongprasit