The Web 
 Should Just Work 
 for Everyone Aaron Gustafson 
 @AaronGustafson slideshare.net/AaronGustafson

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: To m M a g l i e r y

A ccessible

R

ich

I

nternet 
 A pplication

A RIA Landmarks

<header class=&#34;banner&#34; role=&#34;banner&#34; id=&#34;top&#34;> 
 <h1 class=&#34;banner_logo&#34;><a href=&#34;/&#34; rel=&#34;home&#34;> 
 24 ways <span>to impress your friends</span></a></h1> </header>

<main role=&#34;main&#34; > … </main>

<nav class=&#34;navigation&#34; role=&#34;navigation&#34; id=&#34;menu&#34;> 
 <h1 class=&#34;hidden&#34;>Browse 24 ways</h1> 
 <ul class=&#34;nav nav-topics&#34;> <li class=&#34;nav_item&#34;><a href=&#34;/topics/business/&#34; 
 data-icon=&#34;&#x2655;&#34;>Business</a></li> … </ul> 
 … </nav>

<footer class=&#34;contentinfo&#34; role=&#34;contentinfo&#34; > <p class=&#34;contentinfo_copyright&#34;> <small>&#169; 2005-2016 24 ways and our authors. 
 <a href=&#34;/about/#colophon&#34;>Colophon</a></small> </p> <p class=&#34;contentinfo_social&#34;> <a href=&#34;http://feeds.feedburner.com/24ways&#34; 
 rel=&#34;alternate&#34;>Grab our RSS feed</a> <a href=&#34;https://twitter.com/24ways&#34; rel=&#34;me&#34;>Follow us 
 on Twitter</a> <a href=&#34;/newsletter&#34;>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.

Avoid Technical and Legal Jargon

When Requesting Feedback, Make 
 It Clear That the User Needs to Respond

<label for=&#34;first_name&#34;> What’s your first name? </label> <input name=&#34;first_name&#34; id=&#34;first_name&#34;>

<label for=&#34;first_name&#34;>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=&#34;radio&#34; name=&#34;agree&#34; id=&#34;agree_yes&#34; value=&#34;yes&#34;> <label for="agree_yes"

Yes</label>

<fieldset> <legend tabindex=&#34;0&#34; >Do you agree to the terms of service for this site?</legend> <input type=&#34;radio&#34; name=&#34;agree&#34; id=&#34;agree_yes&#34; value=&#34;yes&#34;> <label for=&#34;agree_yes&#34;>Yes</label> <input type=&#34;radio&#34; name=&#34;agree&#34; id=&#34;agree_no&#34; value=&#34;no&#34;> <label for=&#34;agree_no&#34;>No</label> </fieldset>

<nav id=&#34;nav&#34; tabindex=&#34;0&#34; aria-labelledby=&#34;nav-title&#34; > <h1 id=&#34;nav-title&#34; class=&#34;hidden&#34;>Here’s what you can 
 find on this site:</h1> <ul> <li><a href=&#34;/about/&#34;><b class=&#34;hidden&#34;>A Bit 
 </b>About<b class=&#34;hidden&#34;> Me</b></a></li> <li><a href=&#34;/notebook/&#34;><b class=&#34;hidden&#34;>Entries in My 
 </b>Notebook</a></li> … </ul> </nav>

<nav class=&#34;global-navigation&#34; role=&#34;navigation&#34; 


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

Accessibility is not About Disabilities It’s About People

Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson