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.
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. @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. @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. @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
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. @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
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
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. @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. @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
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
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. @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. @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
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. @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
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. @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
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. @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
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
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. @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
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">
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. @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. @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
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
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. @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. @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
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. @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. @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. @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. @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