The Web Should Just Work for Everyone Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson
Slide 1
Slide 2
Accessibility
Slide 3
Opportunity
Slide 4
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.”
Slide 5
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.”
Slide 6
Disabilities are Designed
Slide 7
excluded included population designer user ability
Slide 8
John Rawls 1921-2002
Slide 9
“special needs” (we’ve all got ’em)
Slide 10
Photo Credit: Dylan Passmore
Slide 11
wheelchairs strollers bicycles skateboards
Slide 12
one arm arm injury new parent permanent situational
Slide 13
one arm arm injury new parent permanent situational 26K 13M 8M + + 21 Million People
Slide 14
Progressive Enhancement
Slide 15
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.”
Slide 16
This is What Design is All About
Slide 17
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. ”
Slide 18
Slide 19
Photo Credit: To m M a g l i e r y
Slide 20
Slide 21
A ccessible
R
ich
I
nternet A pplication
Slide 22
A RIA Landmarks
Slide 23
<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>
Slide 24
<main
role="main"
>
…
</main>
Slide 25
<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="♕">Business</a></li>
…
</ul>
…
</nav>
Slide 26
<footer class="contentinfo"
role="contentinfo"
>
<p class="contentinfo_copyright">
<small>© 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>
Slide 27
Every Interface is a Conversation
Slide 28
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
Slide 29
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
Slide 30
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
Slide 31
Slide 32
Slide 33
Slide 34
Slide 35
Slide 36
Slide 37
How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
Slide 38
How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ⦿ Other it’s embarrassing
Slide 39
Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
Slide 40
Talk to your users like they talk to one another.
Slide 41
Write for People
Slide 42
๏ Be clear. ๏ Be concise. ๏ Be honest. ๏ Be considerate. ๏ Write how you speak.
Slide 43
Avoid Technical and Legal Jargon
Slide 44
Slide 45
Slide 46
When Requesting Feedback, Make It Clear That the User Needs to Respond
Slide 47
<label for="first_name">
What’s your first name?
</label>
<input name="first_name" id="first_name">
Slide 48
<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?
Slide 49
When Asking a User to Choose, Clearly Present the Options
Slide 50
<input type="radio" name="agree" id="agree_yes" value="yes"> <label for="agree_yes"
Yes</label>
Slide 51
<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>
Slide 52
<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>
Slide 53
Slide 54
<nav class="global-navigation" role="navigation"
aria-label="main navigation"
…
Slide 55
Prompts Should be Short, While Still Being Clear
Slide 56
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.
Slide 57
ALBERT EINSTEIN (VIA ROBERT SESSIONS) Everything should be as simple as it can be but not simpler.
Slide 58
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.
Slide 59
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.
Slide 60
Slide 61
Slide 62
Ask Only Necessary Questions
Slide 63
Slide 64
Slide 65
Phone Number:
Slide 66
Present Information in Consumable Pieces
Slide 67
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?
Slide 68
Demystifying Accessibility
Slide 69
Slide 70
Slide 71
Accessibility is not About Disabilities It’s About People
Slide 72
Slide 73
Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson
