Designing the Conversation [Accessibility DC 2018]
•
1 like•661 views
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.
Recommended
Recommended
More Related Content
Similar to Designing the Conversation [Accessibility DC 2018]
Similar to Designing the Conversation [Accessibility DC 2018] (20)
More from Aaron Gustafson
More from Aaron Gustafson (20)
Recently uploaded
Recently uploaded (20)
Designing the Conversation [Accessibility DC 2018]
- 6. I’m really happy to see you. Please fill out the form below to contact us. All fields are required.
- 13. IIMindful Links
- 28. <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
- 35. ๏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
- 37. ๏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
- 38. ๏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
- 39. IVFriendly Forms
- 42. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo Other
- 43. How does this photo make you feel? Embarrassing Upsetting Saddening Bad Photo ◉ Other it’s embarrassing
- 44. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad
- 45. Talk to your users like they talk to one another
- 46. Make it clear users need to respond
- 47. “What’s your first name?”
- 48. “Without your first name, I won’t know how to address you. Could you please provide it?”
- 52. <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
- 54. <label for="first_name"> What’s your first name? <input id="first_name" name="first_name"> </label>
- 55. <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
- 56. Use the right field type
- 58. <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
- 59. Browsers ignore what they don’t understand
- 61. <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
- 62. Please describe the photo It’s embarrassing It’s a bad photo of me It makes me sad Choose One
- 65. <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
- 67. Phone Number:
- 68. <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
- 69. We should work harder so our users don’t have to
- 70. ๏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
- 71. Help users avoid (and fix) errors
- 72. Enable common information to be auto-filled
- 75. ๏ 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
- 76. ๏For Addresses: ‣ shipping ‣ billing ๏For Telephone Numbers: ‣ home ‣ work ‣ mobile ‣ fax ‣ pager ๏Universally: ‣ section-* Autofill Token Modifiers
- 80. Let users know when a field is required
- 84. Provide useful hints as to the type of response you’re expecting
- 85. <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
- 89. <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
- 94. <input type=“hidden” name=“price” value=“399.99”>
- 95. <input type=“hidden” name=“price” value=“1”>