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.”
Photo	Credit:	Tom
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
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
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>
<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.
Ask Only
Necessary
Questions
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
http://is.gd/msft_inclusive_design
Accessibility is not
About Disabilities
It’s About People
Thank you!
@AaronGustafson
aaron-gustafson.com
slideshare.net/AaronGustafson

More Related Content

Similar to The Web Should Just Work for Everyone

Example Of A 5 Paragraph Essay. Five paragraph-essay-sample
Example Of A 5 Paragraph Essay. Five paragraph-essay-sampleExample Of A 5 Paragraph Essay. Five paragraph-essay-sample
Example Of A 5 Paragraph Essay. Five paragraph-essay-sample
Amanda Stephens
 
· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx
· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx
· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx
oswald1horne84988
 
Introduction To Disabilities
Introduction To DisabilitiesIntroduction To Disabilities
Introduction To Disabilities
Jo Woolery
 
5 Deadly Workplace Legal Risks
5 Deadly Workplace Legal Risks5 Deadly Workplace Legal Risks
5 Deadly Workplace Legal Risks
performanceweb
 

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

Inclusive tech, (how) is that possible?
Inclusive tech, (how) is that possible?Inclusive tech, (how) is that possible?
Inclusive tech, (how) is that possible?
 
Example Of A 5 Paragraph Essay. Five paragraph-essay-sample
Example Of A 5 Paragraph Essay. Five paragraph-essay-sampleExample Of A 5 Paragraph Essay. Five paragraph-essay-sample
Example Of A 5 Paragraph Essay. Five paragraph-essay-sample
 
· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx
· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx
· Practical Op-Amps – Understanding Op Amp Parameters1. Search t.docx
 
ARC-211:American Diversity and Design:Zhuorong Zhang
ARC-211:American Diversity and Design:Zhuorong ZhangARC-211:American Diversity and Design:Zhuorong Zhang
ARC-211:American Diversity and Design:Zhuorong Zhang
 
Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]Designing the Conversation [Accessibility DC 2018]
Designing the Conversation [Accessibility DC 2018]
 
Introduction To Disabilities
Introduction To DisabilitiesIntroduction To Disabilities
Introduction To Disabilities
 
Information Architecture 101
Information Architecture 101Information Architecture 101
Information Architecture 101
 
Retrospecting our Retrospectives
Retrospecting our RetrospectivesRetrospecting our Retrospectives
Retrospecting our Retrospectives
 
Designing out evil
Designing out evilDesigning out evil
Designing out evil
 
Film Mask Film Analysis
Film Mask Film AnalysisFilm Mask Film Analysis
Film Mask Film Analysis
 
5 Deadly Workplace Legal Risks
5 Deadly Workplace Legal Risks5 Deadly Workplace Legal Risks
5 Deadly Workplace Legal Risks
 
Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]Designing the Conversation [Paris Web 2017]
Designing the Conversation [Paris Web 2017]
 
Personal Essay New York City. Online assignment writing service.
Personal Essay New York City. Online assignment writing service.Personal Essay New York City. Online assignment writing service.
Personal Essay New York City. Online assignment writing service.
 
1.20.12 wy inclusion_awareness_presentation
1.20.12 wy inclusion_awareness_presentation1.20.12 wy inclusion_awareness_presentation
1.20.12 wy inclusion_awareness_presentation
 
Arc211 p3 fangqi yuan
Arc211 p3 fangqi yuanArc211 p3 fangqi yuan
Arc211 p3 fangqi yuan
 
Section 10 - Old Age.pdf
Section 10 - Old Age.pdfSection 10 - Old Age.pdf
Section 10 - Old Age.pdf
 

More from Aaron Gustafson

More from Aaron Gustafson (20)

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

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 

Recently uploaded (20)

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT Professionals
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
The architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdfThe architecture of Generative AI for enterprises.pdf
The architecture of Generative AI for enterprises.pdf
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi"Impact of front-end architecture on development cost", Viktor Turskyi
"Impact of front-end architecture on development cost", Viktor Turskyi
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 

The Web Should Just Work for Everyone