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.

Designing the Conversation [Accessibility DC 2018]

292 views

Published on

Over time, your users will become more accustomed to and reliant on voice-based interactions with their computers and, thereby, the web. Enabling them to complete critical tasks without a visual user interface will be crucial for the long-term success of your website.

Published in: Internet
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Designing the Conversation [Accessibility DC 2018]

  1. 1. Designing the Conversation Aaron Gustafson
 @AaronGustafson slideshare.net/AaronGustafson
  2. 2. I’m <em>really</em> happy to see you.
  3. 3. IPowerful Phrases
  4. 4. I’m <em>really</em> happy to see you. Emphasis
  5. 5. Please fill out the form below to contact us. <strong>All fields are required.</strong> Strong Importance
  6. 6. I’m really happy to see you. Please fill out the form below to contact us. All fields are required.
  7. 7. It's a terrible movie and it made $200 million. <i>Go figure!</i> She is admired for her energy and <i lang="fr">joie de vivre</i>. Alternate Voice or Mood
  8. 8. For 12 years and running, over 100,000 companies have adopted the <b>Basecamp</b> way of working. Not just tried, but signed up, said “ah-ha!”, and never looked back. There’s nothing else like <b>Basecamp</b>. Stylistically Offset
  9. 9. I wrote the book <cite>Adaptive Web Design</cite>. If you like this talk, you’ll find in-depth information about semantics (and a whole lot more) in there. Published Works
  10. 10. A ramp embedded in staircase of Robson Square in Vancouver, <abbr aria-label="British Columbia">BC</abbr>. Abbreviations & Acronyms
  11. 11. Press <kbd>Tab</kbd> to move from link to link within a document. The <code>kbd</code> element is used to indicate keyboard key names. Keyboard & Code
  12. 12. There is <span>nothing particularly interesting</span> in this sentence. Generic Phrasing
  13. 13. IIMindful Links
  14. 14. A ramp embedded in staircase of <a href="https:// en.wikipedia.org/wiki/Robson_Square">Robson Square</a> in Vancouver, <abbr aria-label="British Columbia">BC</abbr>. Connecting Content
  15. 15. <a href="…"><b class="hidden">You can </b>finish reading<b class="hidden"> <cite>The Web Should Just Work for Everyone</ cite> in less than 10 minutes</b></a> Connecting Content
  16. 16. To illustrate the concept of layering styles, perhaps it’s best to start at the beginning: with no style applied.
 <a href="#figure-3-3">Figure 3.3</a> shows the lodging article in Safari with only the default browser styles applied. … <figure id="figure-3-3"> … </figure> Connecting Content
  17. 17. <a rel="bookmark" href="…"><b class="hidden">You can </b>finish reading<b class="hidden"> <cite>The Web Should Just Work for Everyone</cite> in less than 10 minutes</b></a> Creating Context
  18. 18. <a href="…" hreflang="es"><b class="hidden">Lea esta página en </b>Español</a> Creating Context
  19. 19. <a href="giant.mp4" type="video/mp4">Download this movie</a> Creating Context
  20. 20. <a href="giant.mp4" type="video/mp4" download>Download this
 movie</a> Triggering Actions
  21. 21. <a href="mailto:aaron@easy-designs.net">Send me an email</a> <a href="tel:18009346489">Call Comcast Customer Service</a> Connecting Tools
  22. 22. IIIEffective Organization
  23. 23. <h1>This is the title of the page</h1> … <h2>This titles a section</h2> … <h3>This titles a subsection</h3> … etc. Headings
  24. 24. <p>This twist is what <a href="https://en.wikipedia.org/wiki/ John_Harsanyi">John Harsanyi</a>—an early game theorist—refers to as the <a href="https://en.wikipedia.org/wiki/ Veil_of_ignorance">“Veil of Ignorance”</a> and what Rawls found, time and time again, was that individuals participating in the experiment would gravitate toward creating the most egalitarian societies.</p> Moving Focus
  25. 25. <p tabindex="0">Please fill out the form below completely. <strong>All fields are required.</strong></p> Moving Focus
  26. 26. Accessible
 Rich Internet Applications
  27. 27. <div id="nav" role="navigation"> <ul> <li> <a href="/about/"><b class="hidden">A Bit </b>About<b class="hidden"> Me</b></a> </li> … </ul> </div> Navigation Region
  28. 28. ๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo ARIA Landmark Roles
  29. 29. <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>
  30. 30. <main role="main"> … </main>
  31. 31. <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>
  32. 32. <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>
  33. 33. ๏banner - first header element not inside a sectioning element ๏navigation - nav ๏search ๏main - main ๏complementary - aside ๏contentinfo - first footer element not inside a sectioning element HTML Landmarks
  34. 34. <div> This is simply a generic division of content. </div>
  35. 35. ๏p - a paragraph ๏ol - a list of items whose order matters ๏ul - an list of items whose order doesn’t matter ๏li - an item in a list ๏dl - a list of terms and their associated definitions ๏dt - terms to be defined within a definition list ๏dd - descriptions of terms in a definition list ๏figure - referenced content (images, tables, etc.) ๏figcaption - caption for a figure Alterna-divs
  36. 36. ๏article - a piece of content that can stand on its own ๏section - a section of a document or article ๏header - preamble content for a document, article, or section ๏footer - supplementary information for a document, article, or section ๏main - the primary content of a document ๏nav - navigational content ๏aside - complementary content Alterna-divs
  37. 37. IVFriendly Forms
  38. 38. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
  39. 39. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other it’s embarrassing
  40. 40. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
  41. 41. Talk to your users like they talk
 to one another
  42. 42. Make it clear users need to respond
  43. 43. “What’s your first name?”
  44. 44. “Without your first name, I won’t
 know how to address you.
 Could you please provide it?”
  45. 45. “Reserve your spot”
  46. 46. What’s your first name? <input name="first_name">
  47. 47. <label>What’s your first name?</label> <input name="first_name">
  48. 48. <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
  49. 49. <label> What’s your first name? <input name="first_name"> </label>
  50. 50. <label for="first_name"> What’s your first name? <input id="first_name" name="first_name"> </label>
  51. 51. <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
  52. 52. Use the right
 field type
  53. 53. <label for="first_name">What’s Your First Name?</label> <input type="text" id="first_name" name="first_name"> Free Response
  54. 54. <label for="email">What’s Your Business Email Address?</label> <input type="email" id="email" name="email"> Free Response: Email Appearance Native Validation Text Field Maybe
  55. 55. Browsers ignore what they don’t understand
  56. 56. Progressive Enhancement
  57. 57. <label for="url">What’s Your Website’s URL?</label> <input type="url" id="url" name="url"> Free Response: URL Appearance Native Validation Text Field Maybe
  58. 58. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad Choose One
  59. 59. Please describe the photo <label> <input type="radio" name="reason" value="embarrassing"> It’s embarrassing </label> <label> <input type="radio" name="reason" value="bad photo"> It’s a bad photo of me </label> <label> <input type="radio" name="reason" value="saddening"> It makes me sad </label> Choose One
  60. 60. <label for="reason">Please describe the photo</label> <select id="reason" name="reason"> <option value="embarrassing">It’s embarrassing</option> <option value="bad photo">It’s a bad photo of me</option> <option value="saddening">It makes me sad</option> </select> Choose One
  61. 61. <label for="volume">How Loud is Spinal Tap?</label> <input type="range" id="volume" name="volume" min="0" max="11" step="1" > Choose One: Number Appearance Native Validation Slider (Maybe) Maybe
  62. 62. Don’t introduce unnecessary complexity
  63. 63. Phone Number:
  64. 64. <label for="tel">What’s Your Business Phone Number?</label> <input type="tel" id="tel" name="business_phone"> Free Response: Telephone Appearance Native Validation Text Field No
  65. 65. We should
 work harder
 so our users
 don’t have to
  66. 66. ๏input[type=date] ๏input[type=datetime] (global) ๏input[type=datetime-local] (local) ๏input[type=month] (year & month) ๏input[type=week] (year & week) ๏input[type=time] (year & week) Structured Data: Dates & Times
  67. 67. Help users
 avoid (and fix) errors
  68. 68. Enable common information to be auto-filled
  69. 69. <label for="name">What’s Your Name?</label> <input id="name" name="name" required aria-required="true"> Keys for Auto-filling
  70. 70. <label for="ssn">What’s Your Social Security Number?</label> <input id="ssn" name="ssn" required aria-required="true" autocomplete="off" > Don’t Store All Values
  71. 71. ๏ name ๏ honorific-prefix ๏ given-name ๏ additional-name ๏ family-name ๏ honorific-suffix ๏ nickname ๏ username ๏ new-password ๏ current-password ๏ organization-title ๏ organization ๏ street-address ๏ address-line1 ๏ address-line2 ๏ address-line3 ๏ address-level4 ๏ address-level3 ๏ address-level2 ๏ address-level1 ๏ country ๏ country-name ๏ postal-code ๏ cc-name ๏ cc-given-name ๏ cc-additional-name ๏ cc-family-name ๏ cc-number ๏ cc-exp ๏ cc-exp-month ๏ cc-exp-year ๏ cc-csc ๏ cc-type ๏ transaction-currency ๏ transaction-amount ๏ language ๏ bday ๏ bday-day ๏ bday-month ๏ bday-year ๏ sex ๏ url ๏ photo ๏ tel ๏ tel-country-code ๏ tel-national ๏ tel-area-code ๏ tel-local ๏ tel-local-prefix ๏ tel-local-suffix ๏ tel-extension ๏ email ๏ impp Autofill Tokens
  72. 72. ๏For Addresses: ‣ shipping ‣ billing ๏For Telephone Numbers: ‣ home ‣ work ‣ mobile ‣ fax ‣ pager ๏Universally: ‣ section-* Autofill Token Modifiers
  73. 73. <fieldset> <legend tabindex="0">Ship the blue gift to…</legend> <p> <label for="b-street-address">Address</label> <input name="ba" id="b-street-address" autocomplete="section-blue shipping street-address">
 </p> <p> <label for="b-city">City</label> <input name="bc" id="b-city" autocomplete="section-blue shipping address-level2"> </p> <p> <label for="b-postal-code">Postal Code</label> <input name="bp" id="b-postal-code" autocomplete="section-blue shipping postal-code"> </p> </fieldset> For Example
  74. 74. [section-] (optional) [shipping|billing] (optional) [home|work|mobile|fax|pager] (optional) [autofill token name]
  75. 75. <label for="shipping-mobile">Is there a mobile number we can reach you on regarding delivery?</label> <input type="tel" id="shipping-mobile" name="shipping-mobile"
 autocomplete="section-red shipping mobile tel">
  76. 76. Let users know when a field is required
  77. 77. <p>Fields marked with a * are <strong id="required">required</strong>.</p> … <label for="first_name">What’s Your First Name? <b role="presentation" class="required">*</b> </label> <input id="first_name" name="first_name" required aria-required="true" > Required Fields
  78. 78. <p><strong>All of the fields are required.</strong></p> … <label for="first_name">What’s Your First Name?</label> <input id="first_name" name="first_name" required aria-required="true" > Required Fields
  79. 79. <p><strong>All of the fields are required.</strong></p> … <label for="first_name">What’s Your First Name?</label> <input id="first_name" name="first_name" required aria-required="true" > Required Fields
  80. 80. Provide useful hints as to the type of response you’re expecting
  81. 81. <label for="flight">What flight are you looking for?</label> <input id="flight" name="flight" pattern="DLd{2,}" placeholder="e.g. DL5407" > Suggesting a response
  82. 82. Validate
 in the browser
  83. 83. <label for="first_name">What’s Your First Name?</label> <input id="first_name" name="first_name" required aria-required="true" > Indicate Required Fields
  84. 84. <label for="email">What’s Your Business Email Address?</label> <input type="email" id="email" name="email"> Use Native Validation
  85. 85. <label for="flight">What flight are you looking for?</label> <input id="flight" name="flight" pattern="DLd{2,}" placeholder="e.g. DL5407" > Use Custom Validation Schema
  86. 86. <label for="email">Your Email Address</label> <input id="email" type="email" name="email" required aria-required="true" aria-invalid="true" aria-describedby="email-error" > <strong id="email-error" class="validation-error-message"> Your email address is required</strong> Provide Inline Error Messages
  87. 87. Validate
 on the server
  88. 88. <input type=“hidden” name=“price” value=“399.99”>
  89. 89. <input type=“hidden” name=“price” value=“1”>
  90. 90. Never trust
 the client
  91. 91. Summarize
 server-side errors
  92. 92. <div role="alert"> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required 
 field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  93. 93. <div role="alert"> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required 
 field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  94. 94. <div role="alert"> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required 
 field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  95. 95. <div role="alert"> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required 
 field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  96. 96. <div role="alert"> <p>There were errors with your form submission:</p> <ol> <li><a href="#message">Message</a> is a required 
 field</li> <li><a href="#name">Name</a> is a required field</li> <li><a href="#email">Email</a> is a required field</li> </ol> </div>
  97. 97. <label for="email">Your Email Address</label> <input id="email" type="email" name="email" required aria-required="true" aria-invalid="true" aria-describedby="email-error" > <strong id="email-error" class="validation-error-message"> Your email address is required</strong> Provide Inline Error Messages
  98. 98. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×