SlideShare a Scribd company logo
The Web

Should Just Work

for Everyone
Aaron Gustafson

@AaronGustafson
slideshare.net/AaronGustafson
Microsoft Edge Web Summit

4 April 2016
San Francisco, CA USA
Accessibility
Opportunity
WHO (c. 1980)
“In the context of health experience,

a disability is any restriction or lack of
ability (resulting from an impairment)

to perform an activity in the manner or
within the range considered normal 

for a human being.”
WHO (c. TODAY)
“Disability is not just a health problem.

It is a complex phenomenon, reflecting
the interaction between features of a
person’s body and features of the 

society in which he or she lives.”
Disabilities

are Designed
excluded
included
population
designer
user ability
John Rawls
1921-2002
“special needs”
(we’ve all got ’em)
Photo	Credit:	Dylan Passmore
wheelchairs strollers bicycles skateboards
one arm arm injury new parent
permanent situational
one arm arm injury new parent
permanent situational
26K 13M 8M+ +
21 Million People
Progressive
Enhancement
BEN HOH
“[Progressive enhancement] keeps the
design open to the possibilities of 

sexiness in opportune contexts, 

rather than starting with the ‘whole’
experience that must be compromised.”
This is What
Design is All About
JEFFREY VEEN
“I’ve been amazed at how often those
outside the discipline of design assume
that what designers do is decoration—
likely because so much bad design 

simply is decoration. Good design isn’t.

Good design is problem solving.”
The Web Should Just Work for Everyone
Photo	Credit:	Tom
The Web Should Just Work for Everyone
Accessible
Rich
I nternet

Application
ARIA Landmarks
<header	class="banner"	role="banner"	id="top">

		<h1	class="banner_logo"><a	href="/"	rel="home">

				24	ways	<span>to	impress	your	friends</span></a></h1>	
</header>
<main	role="main">	
		…	
</main>
<nav	class="navigation"	role="navigation"	id="menu">

		<h1	class="hidden">Browse	24	ways</h1>

		<ul	class="nav	nav-topics">	
				<li	class="nav_item"><a	href="/topics/business/"

						data-icon="&#x2655;">Business</a></li>	
				…	
		</ul>

		…	
</nav>
<footer	class="contentinfo"	role="contentinfo">	
		<p	class="contentinfo_copyright">	
				<small>&#169;	2005-2016	24	ways	and	our	authors.

				<a	href="/about/#colophon">Colophon</a></small>	
		</p>	
		<p	class="contentinfo_social">	
				<a	href="http://feeds.feedburner.com/24ways"

						rel="alternate">Grab	our	RSS	feed</a>	
				<a	href="https://twitter.com/24ways"	rel="me">Follow	us

						on	Twitter</a>	
				<a	href="/newsletter">Subscribe	to	our	newsletter</a>	
		</p>	
</footer>
Every Interface

is a Conversation
West	of	House	
You	are	standing	in	an	open	field	west	of	a	white	house,	with	a	
boarded	front	door.	
There	is	a	small	mailbox	here.	
>	open	mailbox
This	is	a	small	room	with	passages	to	the	east	and	south	and	a	
forbidding	hole	leading	west.	Bloodstains	and	deep	scratches	
(perhaps	made	by	an	axe)	mar	the	walls.	
A	nasty-looking	troll,	brandishing	a	bloody	axe,	blocks	all	
passages	out	of	the	room.	
Your	sword	has	begun	to	glow	very	brightly.	
>	kill	troll
This	is	a	small	room	with	passages	to	the	east	and	south	and	a	
forbidding	hole	leading	west.	Bloodstains	and	deep	scratches	
(perhaps	made	by	an	axe)	mar	the	walls.	
A	nasty-looking	troll,	brandishing	a	bloody	axe,	blocks	all	
passages	out	of	the	room.	
Your	sword	has	begun	to	glow	very	brightly.	
>	hit	the	troll	with	the	Elvish	sword
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other
How does this photo make you feel?
Embarrassing
Upsetting
Saddening
Bad Photo
Other it’s embarrassing
Please describe the photo
It’s embarrassing
It’s a bad photo of me
It makes me sad
Talk to your users
like they talk

to one another.
Write for People
๏ Be clear.
๏ Be concise.
๏ Be honest.
๏ Be considerate.
๏ Write how you speak.
๏ Be clear.
๏ Be concise.
๏ Be honest.
๏ Be considerate.
๏ Write how you speak.
Avoid Technical
and Legal Jargon
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
When Requesting
Feedback, Make 

It Clear That the User
Needs to Respond
<label	for="first_name">What’s	your	first	name?</label>	
<input	name="first_name"	id="first_name">
<label	for="first_name">What’s	your	first	name?</label>	
<input	name="first_name"	id="first_name">
<label	for="first_name">What’s	your	first	name?</label>	
<input	name="first_name"	id="first_name"	
										aria-describedby="first_name-error">	
<em	id="first_name-error">	
		Without	your	first	name,	I	won’t	know	how	to	address	you.	
		Could	you	please	provide	it?	
</em>
<label	for="first_name">What’s	your	first	name?</label>	
<input	name="first_name"	id="first_name"	
										aria-describedby="first_name-error">	
<em	id="first_name-error">	
		Without	your	first	name,	I	won’t	know	how	to	address	you.	
		Could	you	please	provide	it?	
</em>
When Asking a
User to Choose,
Clearly Present

the Options
<input	type="radio"	name="agree"	id="agree_yes"	value="yes">	
<label	for="agree_yes">Yes</label>
<input	type="radio"	name="agree"	id="agree_yes"	value="yes">	
<label	for="agree_yes">Yes</label>
<fieldset>	
		<legend	tabindex="0">Do	you	agree	to	the	terms	of	service	
				for	this	site?</legend>	
		<input	type="radio"	name="agree"	id="agree_yes"	value="yes">	
				<label	for="agree_yes">Yes</label>	
		<input	type="radio"	name="agree"	id="agree_no"	value="no">	
				<label	for="agree_no">No</label>	
</fieldset>
<fieldset>	
		<legend	tabindex="0">Do	you	agree	to	the	terms	of	service	
				for	this	site?</legend>	
		<input	type="radio"	name="agree"	id="agree_yes"	value="yes">	
				<label	for="agree_yes">Yes</label>	
		<input	type="radio"	name="agree"	id="agree_no"	value="no">	
				<label	for="agree_no">No</label>	
</fieldset>
<nav	id="nav"	tabindex="0"	aria-labelledby="nav-title">	
		<h1	id="nav-title"	class="hidden">Here’s	what	you	can

				find	on	this	site:</h1>	
		<ul>	
				<li><a	href="/about/"><b	class="hidden">A	Bit	

						</b>About<b	class="hidden">	Me</b></a></li>	
				<li><a	href="/notebook/"><b	class="hidden">Entries	in	My

						</b>Notebook</a></li>	
				…	
		</ul>	
</nav>
<nav	id="nav"	tabindex="0"	aria-labelledby="nav-title">	
		<h1	id="nav-title"	class="hidden">Here’s	what	you	can

				find	on	this	site:</h1>	
		<ul>	
				<li><a	href="/about/"><b	class="hidden">A	Bit	

						</b>About<b	class="hidden">	Me</b></a></li>	
				<li><a	href="/notebook/"><b	class="hidden">Entries	in	My

						</b>Notebook</a></li>	
				…	
		</ul>	
</nav>
The Web Should Just Work for Everyone
<nav	class="global-navigation"	role="navigation"

					aria-label="main	navigation">	
		…	
</nav>
<nav	class="global-navigation"	role="navigation"

					aria-label="main	navigation">	
		…	
</nav>
Prompts Should
be Short, While
Still Being Clear
ALBERT EINSTEIN
It can scarcely be denied that the

supreme goal of all theory is to make the
irreducible basic elements as simple and
as few as possible without having to
surrender the adequate representation

of a single datum of experience.
ALBERT EINSTEIN

(VIA ROBERT SESSIONS)
Everything should be

as simple as it can be

but not simpler.
THIS IS REAL COPY
Heavy rains throughout most of the State
have given an optimistic outlook for
lessened fire danger for the rest of the
season. However, an abundance of
lightning maintains a certain amount of
hazard in isolated areas that have not
received an excessive amount of rain.
IT COULD BE SO MUCH BETTER
Heavy rains throughout most of the
State have lessened fire danger for the
rest of the season. However, lightning
threatens isolated dry areas.
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
Ask Only
Necessary
Questions
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
Phone Number:
Present
Information

in Consumable
Pieces
The	top	seller	in	the	garden	department	is	Repel	Lemon	
Eucalyptus	Natural	Insect	Repellent,	4-Ounce	Pump	Spray	
Would	you	like	to	hear	the	rest?
Demystifying
Accessibility
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
The Web Should Just Work for Everyone
http://is.gd/msft_inclusive_design
The Web Should Just Work for Everyone
Accessibility is not
About Disabilities
It’s About People
The Web Should Just Work for Everyone
Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson

More Related Content

PPTX
Elasticity in Ability: Viewing (Dis)Ability through Context
Christopher Taylor Edwards
 
PDF
Ada survey michigan
shine1se
 
PPTX
Building websites for all
Claudio Luis Vera, MBA, CPWA
 
PDF
What is UX Design?
Mike Houghton
 
PDF
Persona Most Grata: Invoking the User From Data to Design
Nadaleen Tempelman-Kluit
 
PPTX
Dragon Sucks! Digital Accessibility for the Physically Challenged
ewaccess
 
PPTX
Media and representation in rec
Mary Kearney
 
PPTX
Episcopal High School Affinity Groups
Rosetta Eun Ryong Lee
 
Elasticity in Ability: Viewing (Dis)Ability through Context
Christopher Taylor Edwards
 
Ada survey michigan
shine1se
 
Building websites for all
Claudio Luis Vera, MBA, CPWA
 
What is UX Design?
Mike Houghton
 
Persona Most Grata: Invoking the User From Data to Design
Nadaleen Tempelman-Kluit
 
Dragon Sucks! Digital Accessibility for the Physically Challenged
ewaccess
 
Media and representation in rec
Mary Kearney
 
Episcopal High School Affinity Groups
Rosetta Eun Ryong Lee
 

Similar to The Web Should Just Work for Everyone (15)

PPTX
Inclusive tech, (how) is that possible?
Marion Mulder
 
PDF
Example Of A 5 Paragraph Essay. Five paragraph-essay-sample
Amanda Stephens
 
DOCX
· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx
oswald1horne84988
 
PDF
ARC-211:American Diversity and Design:Zhuorong Zhang
zhuorong zhang
 
PDF
Designing the Conversation [Accessibility DC 2018]
Aaron Gustafson
 
PPT
Introduction To Disabilities
Jo Woolery
 
PPT
Information Architecture 101
Christina Wodtke
 
PDF
Retrospecting our Retrospectives
Jessica DeVita
 
PPT
Designing out evil
Darren Menachemson
 
PDF
Film Mask Film Analysis
Erin Rivera
 
PPT
5 Deadly Workplace Legal Risks
performanceweb
 
PDF
Personal Essay New York City. Online assignment writing service.
Tia Williams
 
PPT
1.20.12 wy inclusion_awareness_presentation
roxyrocker
 
PDF
Arc211 p3 fangqi yuan
方奇 员
 
PDF
Section 10 - Old Age.pdf
spandane
 
Inclusive tech, (how) is that possible?
Marion Mulder
 
Example Of A 5 Paragraph Essay. Five paragraph-essay-sample
Amanda Stephens
 
· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx
oswald1horne84988
 
ARC-211:American Diversity and Design:Zhuorong Zhang
zhuorong zhang
 
Designing the Conversation [Accessibility DC 2018]
Aaron Gustafson
 
Introduction To Disabilities
Jo Woolery
 
Information Architecture 101
Christina Wodtke
 
Retrospecting our Retrospectives
Jessica DeVita
 
Designing out evil
Darren Menachemson
 
Film Mask Film Analysis
Erin Rivera
 
5 Deadly Workplace Legal Risks
performanceweb
 
Personal Essay New York City. Online assignment writing service.
Tia Williams
 
1.20.12 wy inclusion_awareness_presentation
roxyrocker
 
Arc211 p3 fangqi yuan
方奇 员
 
Section 10 - Old Age.pdf
spandane
 
Ad

More from Aaron Gustafson (20)

PDF
Delivering Critical Information and Services [JavaScript & Friends 2021]
Aaron Gustafson
 
PDF
Adapting to Reality [Guest Lecture, March 2021]
Aaron Gustafson
 
PDF
Designing the Conversation [Beyond Tellerrand 2019]
Aaron Gustafson
 
PPTX
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Aaron Gustafson
 
PDF
Progressive Web Apps: Where Do I Begin?
Aaron Gustafson
 
PDF
Media in the Age of PWAs [ImageCon 2019]
Aaron Gustafson
 
PDF
Adapting to Reality [Starbucks Lunch & Learn]
Aaron Gustafson
 
PDF
Conversational Semantics for the Web [CascadiaJS 2018]
Aaron Gustafson
 
PDF
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Aaron Gustafson
 
PDF
PWA: Where Do I Begin? [Microsoft Ignite 2018]
Aaron Gustafson
 
PDF
Designing the Conversation [Concatenate 2018]
Aaron Gustafson
 
PDF
Performance as User Experience [AEADC 2018]
Aaron Gustafson
 
PDF
Performance as User Experience [AEA SEA 2018]
Aaron Gustafson
 
PDF
Performance as User Experience [An Event Apart Denver 2017]
Aaron Gustafson
 
PDF
Advanced Design Methods 1, Day 2
Aaron Gustafson
 
PDF
Advanced Design Methods 1, Day 1
Aaron Gustafson
 
PDF
Designing the Conversation [Paris Web 2017]
Aaron Gustafson
 
PDF
Exploring Adaptive Interfaces [Generate 2017]
Aaron Gustafson
 
PDF
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Aaron Gustafson
 
PDF
Writing for Engagement [TechReady 22]
Aaron Gustafson
 
Delivering Critical Information and Services [JavaScript & Friends 2021]
Aaron Gustafson
 
Adapting to Reality [Guest Lecture, March 2021]
Aaron Gustafson
 
Designing the Conversation [Beyond Tellerrand 2019]
Aaron Gustafson
 
Getting Started with Progressive Web Apps [Beyond Tellerrand 2019]
Aaron Gustafson
 
Progressive Web Apps: Where Do I Begin?
Aaron Gustafson
 
Media in the Age of PWAs [ImageCon 2019]
Aaron Gustafson
 
Adapting to Reality [Starbucks Lunch & Learn]
Aaron Gustafson
 
Conversational Semantics for the Web [CascadiaJS 2018]
Aaron Gustafson
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Aaron Gustafson
 
PWA: Where Do I Begin? [Microsoft Ignite 2018]
Aaron Gustafson
 
Designing the Conversation [Concatenate 2018]
Aaron Gustafson
 
Performance as User Experience [AEADC 2018]
Aaron Gustafson
 
Performance as User Experience [AEA SEA 2018]
Aaron Gustafson
 
Performance as User Experience [An Event Apart Denver 2017]
Aaron Gustafson
 
Advanced Design Methods 1, Day 2
Aaron Gustafson
 
Advanced Design Methods 1, Day 1
Aaron Gustafson
 
Designing the Conversation [Paris Web 2017]
Aaron Gustafson
 
Exploring Adaptive Interfaces [Generate 2017]
Aaron Gustafson
 
Progressive Web Apps and the Windows Ecosystem [Build 2017]
Aaron Gustafson
 
Writing for Engagement [TechReady 22]
Aaron Gustafson
 
Ad

Recently uploaded (20)

PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PDF
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
PDF
Responsible AI and AI Ethics - By Sylvester Ebhonu
Sylvester Ebhonu
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PDF
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
PDF
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PDF
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PDF
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 
PDF
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
PDF
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PDF
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
PPTX
The Future of AI & Machine Learning.pptx
pritsen4700
 
PPTX
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
PPTX
Simple and concise overview about Quantum computing..pptx
mughal641
 
PDF
Software Development Methodologies in 2025
KodekX
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
Unlocking the Future- AI Agents Meet Oracle Database 23ai - AIOUG Yatra 2025.pdf
Sandesh Rao
 
Responsible AI and AI Ethics - By Sylvester Ebhonu
Sylvester Ebhonu
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
OFFOFFBOX™ – A New Era for African Film | Startup Presentation
ambaicciwalkerbrian
 
CIFDAQ's Market Wrap : Bears Back in Control?
CIFDAQ
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
Trying to figure out MCP by actually building an app from scratch with open s...
Julien SIMON
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
The Future of Mobile Is Context-Aware—Are You Ready?
iProgrammer Solutions Private Limited
 
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
Research-Fundamentals-and-Topic-Development.pdf
ayesha butalia
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
Peak of Data & AI Encore - Real-Time Insights & Scalable Editing with ArcGIS
Safe Software
 
The Future of AI & Machine Learning.pptx
pritsen4700
 
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
Simple and concise overview about Quantum computing..pptx
mughal641
 
Software Development Methodologies in 2025
KodekX
 

The Web Should Just Work for Everyone