Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Accessibility: It's More Than Just Screen Readers
Search
Fen Slattery
April 17, 2018
Programming
130
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Accessibility: It's More Than Just Screen Readers
As presented at Indy.Code() on April 17, 2018
Fen Slattery
April 17, 2018
More Decks by Fen Slattery
See All by Fen Slattery
Differentiate yourself using empathy
sublimemarch
0
210
Accessibility: What You Should Know
sublimemarch
0
75
Sass for Fun and Profit
sublimemarch
0
140
Why Won't You Take My Money
sublimemarch
0
50
CSS Isn't Scary
sublimemarch
0
160
Accessibility: It's More Than Just Screen Readers
sublimemarch
0
160
Accessibility: It's Not Just a Client Side Problem
sublimemarch
0
310
CSS Isn't Sccary
sublimemarch
0
230
No, You Don't Need to Know My Sex: Gender Bias in Form Design
sublimemarch
0
260
Other Decks in Programming
See All in Programming
20260722_microCMSで考える、AI時代のコンテンツ運用設計
yosh1
0
390
Claude Code全社展開のためにやったことn選~プラグイン302個・コミッター271人を支えるために~
kenchan
5
1.5k
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
sumihiro3
1
680
freeeにおけるEvalsの実践例の紹介
freee
PRO
0
110
今さら聞けない .NET CLI
htkym
0
190
PHP に部分適用が来るぞ!……ところで何それ?おいしいの? #phpcon / phpcon-2026
shogogg
0
630
これって Effect でできたのでは? / TSKaigi Mashup Kansai #2
susisu
0
150
【やさしく解説 設計編・中級 #4】ルールの寿命と、システムの年輪
panda728
PRO
2
180
運用ダッシュボードの設計を誰も教えてくれないのだけどみなさんどうしてるんですか? - チームに監視するという文化を根付かせるための第一歩を踏みたい -
satoshi256kbyte
1
110
ビデオ通話が繋がる0.2秒で何が起きているのか
supurazako
2
190
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
4
1.6k
Android CLI
fornewid
0
220
Featured
See All Featured
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
590
The Invisible Side of Design
smashingmag
301
52k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
2
3.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.6k
Between Models and Reality
mayunak
4
390
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.1k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
250
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1.2k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.7k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
400
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
360
Transcript
Accessibility It's More Than Just Screen Readers @sublimemarch
Stephanie Slattery @sublimemarch @sublimemarch
What is accessibility? @sublimemarch
The design of products, devices, services, or environments for people
who experience disabilities. @sublimemarch
It's the practice of removing barriers that might prevent people
with disabilities from accessing something. @sublimemarch
Accessibility is about inclusion. @sublimemarch
Technology is exists to make our lives easier, not harder.
@sublimemarch
Let's talk about disability. @sublimemarch
Disability can be the result of disease, trauma, or genetics.
@sublimemarch
Disability can be permanent, chronic, or temporary. @sublimemarch
Categories of Disability • @sublimemarch
Categories of Disability •visual @sublimemarch
Categories of Disability •visual •hearing @sublimemarch
Categories of Disability •visual •hearing •motor @sublimemarch
Categories of Disability •visual •hearing •motor •cognitive @sublimemarch
People with disabilities are using the technology you create. @sublimemarch
Assistive Technology •screen readers •magnifiers (hardware and software) •large print
and tactile keyboards •eye gaze and head mouse systems •speech recognition @sublimemarch
@sublimemarch
@sublimemarch
@sublimemarch
1 in 5 Americans have a disability @sublimemarch
56.7 million people @sublimemarch
1 in 10 Americans have a disability that impacts computer
use @sublimemarch
Accessibile design helps everyone! @sublimemarch
@sublimemarch
@sublimemarch
Ability is temporary. @sublimemarch
Why would we make something accessible? @sublimemarch
To improve the lives of people with disabilities @sublimemarch
We are responsible for what we create. @sublimemarch
To capitalize on a wider audience or consumer base @sublimemarch
$175 billion in discretionary income @sublimemarch
It's the law. @sublimemarch
Rehabilitation Act of 1973 @sublimemarch
Americans with Disabilities Act (1990) @sublimemarch
Lawsuits •MIT and Harvard - no captions •Scribd - inaccessible
to screen readers •Netflix - no captions •H&R Block - inaccessible site and app •Reebok - inaccessible to screen readers @sublimemarch
How do I know if what I'm making is accessible?
@sublimemarch
Listen to people with disabilities. @sublimemarch
Follow best practices. @sublimemarch
Web Content Accessibility Guidelines 2.0 @sublimemarch
Conformance Levels •A - minimum, not quite enough @sublimemarch
Conformance Levels •A - minimum, not quite enough •AA -
addresses most common issues @sublimemarch
Conformance Levels •A - minimum, not quite enough •AA -
addresses most common issues •AAA - highest level, but not always possible @sublimemarch
Four Principles of the WCAG @sublimemarch
1. Perceivable • @sublimemarch
1. Perceivable •text alternatives @sublimemarch
1. Perceivable •text alternatives •captions @sublimemarch
1. Perceivable •text alternatives •captions •doesn't rely on sensory characteristics
@sublimemarch
1. Perceivable •text alternatives •captions •doesn't rely on sensory characteristics
•doesn't rely on color @sublimemarch
1. Perceivable •text alternatives •captions •doesn't rely on sensory characteristics
•doesn't rely on color •can control audio @sublimemarch
2. Operable • @sublimemarch
2. Operable •can navigate with keyboard @sublimemarch
2. Operable •can navigate with keyboard •can pause/stop video @sublimemarch
2. Operable •can navigate with keyboard •can pause/stop video •prevent
seizures @sublimemarch
2. Operable •can navigate with keyboard •can pause/stop video •prevent
seizures •skip links @sublimemarch
2. Operable •can navigate with keyboard •can pause/stop video •prevent
seizures •skip links •visible focus @sublimemarch
3. Understandable • @sublimemarch
3. Understandable •languages labeled @sublimemarch
3. Understandable •languages labeled •no unpredictable changes on focus/input @sublimemarch
3. Understandable •languages labeled •no unpredictable changes on focus/input •consistent
navigation @sublimemarch
3. Understandable •languages labeled •no unpredictable changes on focus/input •consistent
navigation •errors identified @sublimemarch
3. Understandable •languages labeled •no unpredictable changes on focus/input •consistent
navigation •errors identified •labels and instructions @sublimemarch
4. Robust • @sublimemarch
4. Robust •complete and correct markup @sublimemarch
4. Robust •complete and correct markup •UI elements can be
programatically determined @sublimemarch
Open Accessibility Framework (OAF) @sublimemarch
Creation @sublimemarch
Use @sublimemarch
But it's more than just the guidelines... @sublimemarch
Guidelines are tools, not solutions. @sublimemarch
Listen to people with disabilities. @sublimemarch
How can you advocate for accessibility? @sublimemarch
Collect baseline information. @sublimemarch
Gather support. @sublimemarch
Define a standard. @sublimemarch
Monitor conformance. @sublimemarch
If not you, then who? @sublimemarch
You can do it! @sublimemarch
We're all responsible for improving the lives of people who
use our technology. @sublimemarch
Accessibility It's More Than Just Screen Readers @sublimemarch
Stephanie Slattery @sublimemarch @sublimemarch