Conversational Semantics for the Web // Aaron Gustafson // CascadiaJS 2018

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.

[vivaxy]

1. Powerful Phrases.
1.1 Emphasis: <em />
1.2 Strong Importance: <strong />
1.3 Alternate Voice or Mood: <i />
1.4 Stylistically Offset: <b />
1.5 Abbreviations & Acronyms: <abbr />, <dfn />
1.6 Generic Phrasing: <span />
2. Mindful Links.
2.1 Connecting Content: <a><cite /></a>, <a href="#some-id" />
2.2 Creating Context: <a hreflang="es" />, <a type="video/mp4" />
2.3 Triggering Actions: <a download />
2.4 Connecting Tools: <a href="mailto:.." />, <a href="tel:..." />
3. Effective Organization.
3.1 Moving Focus: <a /> ... <a />, <... tabindex="0" />
3.2 Headings: <h1 />, <h2 />, ...
3.3 Navigation Region: <... role="navigation" />, <... role="banner" />, <... role="main" />, <... role="contentinfo" />
3.3.1 ARIA Landmark Rules: banner, navigation, search, main, complementary, contentinfo
3.3.2 HTML Landmarks: banner>header, navigation>nav, main>main, complementary>aside, contentinfo>footer
3.3.3 Alterna-divs: p, ol, ul, li, dl, dt, dd, figure, figcaption, article, section, header, footer, main, nav, aside
4. Friendly Forms. Progressive Enhancement: Browsers ignore what they don't understand. We should work harder so our users don't have to. Help users avoid errors. Validate on browsers.
4.1 Use label[for="..."] with input[id="..."]
4.2 Use the right field type: <input type="email" />, <input type="url" />
4.3 Auto-filling: <input autocomplete="shipping mobile tel" />
4.4 Don't store all values: <input autocomplete="off" />
4.5 Required fields: <input required aria-required="true" />
4.6 Suggesting a response: <input pattern="DL\d{2, }" placeholder="e.g. DL5407" />
4.7 Inline errors: <input aria-invalid="true" /><string id="email-error" ... />