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.

Conversational Semantics for the Web [CascadiaJS 2018]

213 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. In this session, Aaron Gustafson will discuss how smart markup choices can improve the overall usability and accessibility of your projects without disrupting your current workflow.

Published in: Technology
  • 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

Conversational Semantics for the Web [CascadiaJS 2018]

  1. 1. Conversational Semantics
 for the Web Aaron Gustafson
 @AaronGustafson slideshare.net/AaronGustafson
  2. 2. @AaronGustafsonConversational Semantics for the Web I’m <em>really</em> happy to see you.
  3. 3. @AaronGustafsonConversational Semantics for the Web IPowerful Phrases
  4. 4. @AaronGustafsonConversational Semantics for the Web I’m <em>really</em> happy to see you. Emphasis
  5. 5. @AaronGustafsonConversational Semantics for the Web I’m <em>really</em> happy to see you. Emphasis
  6. 6. @AaronGustafsonConversational Semantics for the Web Please fill out the form below to contact us. <strong>All fields are required.</strong> Strong Importance
  7. 7. @AaronGustafsonConversational Semantics for the Web I’m really happy to see you. Please fill out the form below to contact us. All fields are required.
  8. 8. @AaronGustafsonConversational Semantics for the Web 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
  9. 9. @AaronGustafsonConversational Semantics for the Web 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
  10. 10. @AaronGustafsonConversational Semantics for the Web <abbr title="Hypertext Markup Language">HTML</abbr> is the standard markup language for creating web pages and web applications. Abbreviations & Acronyms
  11. 11. @AaronGustafsonConversational Semantics for the Web <dfn id="dfn-html">Hypertext Markup Language (HTML)</dfn> is the standard markup language for creating web pages and web applications. Abbreviations & Acronyms
  12. 12. @AaronGustafsonConversational Semantics for the Web There is <span>nothing particularly interesting</span> in this sentence. Generic Phrasing
  13. 13. @AaronGustafsonConversational Semantics for the Web IIMindful Links
  14. 14. @AaronGustafsonConversational Semantics for the Web I wrote the book <a href="https://adaptivewebdesign.info">
 <cite>Adaptive Web Design</cite></a>. If you like this talk, you’ll find in-depth information about semantics (and a whole lot more) in there. Connecting Content
  15. 15. @AaronGustafsonConversational Semantics for the Web 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
  16. 16. @AaronGustafsonConversational Semantics for the Web <a href="…" hreflang="es"><b class="hidden">Lea esta página en </b>Español</a> Creating Context
  17. 17. @AaronGustafsonConversational Semantics for the Web <a href="giant.mp4" type="video/mp4">Download this movie</a> Creating Context
  18. 18. @AaronGustafsonConversational Semantics for the Web <a href="giant.mp4" type="video/mp4" download>Download this
 movie</a> Triggering Actions
  19. 19. @AaronGustafsonConversational Semantics for the Web <a href="mailto:aaron@easy-designs.net">Send me an email</a> <a href="tel:18009346489">Call Comcast Customer Service</a> Connecting Tools
  20. 20. @AaronGustafsonConversational Semantics for the Web IIIEffective Organization
  21. 21. @AaronGustafsonConversational Semantics for the Web
  22. 22. @AaronGustafsonConversational Semantics for the Web <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
  23. 23. @AaronGustafsonConversational Semantics for the Web <div class="scrollable" tabindex="0"> This element contains a bunch of content and scrolls. This
 element contains a bunch of content and scrolls. This element 
 contains a bunch of content and scrolls. This element contains
 a bunch of content and scrolls. This element contains a bunch
 of content and scrolls. This element contains a bunch of
 content and scrolls. This element contains a bunch of content
 and scrolls. This element contains a bunch of content and
 scrolls. This element contains a bunch of content and scrolls. </div> Moving Focus
  24. 24. @AaronGustafsonConversational Semantics for the Web <h1>This is the title of the page</h1> … <h2>This titles a section</h2> … <h3>This titles a subsection</h3> … etc. Headings
  25. 25. @AaronGustafsonConversational Semantics for the Web Accessible
 Rich Internet Applications
  26. 26. @AaronGustafsonConversational Semantics for the Web <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
  27. 27. @AaronGustafsonConversational Semantics for the Web ๏banner ๏navigation ๏search ๏main ๏complementary ๏contentinfo ARIA Landmark Roles
  28. 28. @AaronGustafsonConversational Semantics for the Web
  29. 29. @AaronGustafsonConversational Semantics for the Web <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. @AaronGustafsonConversational Semantics for the Web <main role="main"> … </main>
  31. 31. @AaronGustafsonConversational Semantics for the Web <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. @AaronGustafsonConversational Semantics for the Web <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. @AaronGustafsonConversational Semantics for the Web ๏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. @AaronGustafsonConversational Semantics for the Web <div> This is simply a generic division of content. </div>
  35. 35. @AaronGustafsonConversational Semantics for the Web ๏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 items and their associated descriptions ๏dt - terms to be described within a dl ๏dd - description data within in a dl ๏figure - referenced content (images, tables, etc.) ๏figcaption - caption for a figure Alterna-divs
  36. 36. @AaronGustafsonConversational Semantics for the Web ๏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. @AaronGustafsonConversational Semantics for the Web IVFriendly Forms
  38. 38. @AaronGustafsonConversational Semantics for the Web What’s your first name? <input name="first_name">
  39. 39. @AaronGustafsonConversational Semantics for the Web <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
  40. 40. @AaronGustafsonConversational Semantics for the Web <label> What’s your first name? <input name="first_name"> </label>
  41. 41. @AaronGustafsonConversational Semantics for the Web <label for="first_name"> What’s your first name? <input id="first_name" name="first_name"> </label>
  42. 42. @AaronGustafsonConversational Semantics for the Web <label for="first_name">What’s your first name?</label> <input id="first_name" name="first_name">
  43. 43. @AaronGustafsonConversational Semantics for the Web Use the right
 field type
  44. 44. @AaronGustafsonConversational Semantics for the Web <label for="first_name">What’s Your First Name?</label> <input type="text" id="first_name" name="first_name"> Free Response
  45. 45. @AaronGustafsonConversational Semantics for the Web <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
  46. 46. @AaronGustafsonConversational Semantics for the Web Browsers ignore what they don’t understand
  47. 47. @AaronGustafsonConversational Semantics for the Web Progressive Enhancement
  48. 48. @AaronGustafsonConversational Semantics for the Web SHAMELESS PLUG! Crafting Rich Experienceswith Progressive Enhancement SECOND EDITION ADAPTIVEWEBDESIGN by Aaron GustafsonForeword by Jeremy Keith Read Free at http://is.gd/awd1st Available
 Now!
  49. 49. @AaronGustafsonConversational Semantics for the Web <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
  50. 50. @AaronGustafsonConversational Semantics for the Web Don’t introduce unnecessary complexity
  51. 51. @AaronGustafsonConversational Semantics for the Web Phone Number:
  52. 52. @AaronGustafsonConversational Semantics for the Web <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
  53. 53. @AaronGustafsonConversational Semantics for the Web We should
 work harder
 so our users
 don’t have to
  54. 54. @AaronGustafsonConversational Semantics for the Web Help users
 avoid errors
  55. 55. @AaronGustafsonConversational Semantics for the Web Enable common information to be auto-filled
  56. 56. @AaronGustafsonConversational Semantics for the Web <label for="name">What’s Your Name?</label> <input id="name" name="name" required aria-required="true"> Keys for Auto-filling
  57. 57. @AaronGustafsonConversational Semantics for the Web <label for="passport">What’s Your Passport Number?</label> <input id="passport" name="passport"
 required aria-required="true" autocomplete="off" > Don’t Store All Values
  58. 58. @AaronGustafsonConversational Semantics for the Web ๏ 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
  59. 59. @AaronGustafsonConversational Semantics for the Web <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="shipping mobile tel">
  60. 60. @AaronGustafsonConversational Semantics for the Web Let users know when a field is required
  61. 61. @AaronGustafsonConversational Semantics for the Web <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
  62. 62. @AaronGustafsonConversational Semantics for the Web <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
  63. 63. @AaronGustafsonConversational Semantics for the Web <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
  64. 64. @AaronGustafsonConversational Semantics for the Web Provide useful hints as to the type of response you’re expecting
  65. 65. @AaronGustafsonConversational Semantics for the Web <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
  66. 66. @AaronGustafsonConversational Semantics for the Web Validate
 in the browser
  67. 67. @AaronGustafsonConversational Semantics for the Web <label for="first_name">What’s Your First Name?</label> <input id="first_name" name="first_name" required aria-required="true" > Browser Validated
  68. 68. @AaronGustafsonConversational Semantics for the Web <label for="email">What’s Your Business Email Address?</label> <input type="email" id="email" name="email"> Browser Validated
  69. 69. @AaronGustafsonConversational Semantics for the Web <label for="flight">What flight are you looking for?</label> <input id="flight" name="flight" pattern="DLd{2,}" placeholder="e.g. DL5407" > Browser Validated
  70. 70. @AaronGustafsonConversational Semantics for the Web
  71. 71. @AaronGustafsonConversational Semantics for the Web <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> Inline Errors
  72. 72. @AaronGustafsonConversational Semantics for the Web <label for="email">Your Email Address</label> <input id="email" type="email" name="email" required aria-required="true" aria-invalid="true" aria-errormessage="email-error" > <strong id="email-error" class="validation-error-message"> Your email address is required</strong> Inline Errors
  73. 73. @AaronGustafsonConversational Semantics for the Web Validate
 on the server
  74. 74. @AaronGustafsonConversational Semantics for the Web <input type=“hidden” name=“price” value=“399.99”>
  75. 75. @AaronGustafsonConversational Semantics for the Web <input type=“hidden” name=“price” value=“1”>
  76. 76. @AaronGustafsonConversational Semantics for the Web Never trust
 the client
  77. 77. @AaronGustafsonConversational Semantics for the Web Summarize
 server-side errors
  78. 78. @AaronGustafsonConversational Semantics for the Web
  79. 79. @AaronGustafsonConversational Semantics for the Web <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>
  80. 80. @AaronGustafsonConversational Semantics for the Web <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>
  81. 81. @AaronGustafsonConversational Semantics for the Web <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>
  82. 82. @AaronGustafsonConversational Semantics for the Web <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>
  83. 83. @AaronGustafsonConversational Semantics for the Web <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> Inline Errors
  84. 84. Thank you! @AaronGustafson aaron-gustafson.com slideshare.net/AaronGustafson

×