Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Web Should Just Work for Everyone

194 views

Published on

We, as an industry, tend to have a pretty myopic view of experience. Those of us who work day-to-day in accessibility probably have a broader perspective than most, but I would argue that even we all fall short now and again when it comes to seeing the Web as others do.

Published in: Technology
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/wjp2ze8 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/wjp2ze8 } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/wjp2ze8 } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/wjp2ze8 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/wjp2ze8 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/wjp2ze8 } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

The Web Should Just Work for Everyone

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

×