Lesson 05: Why HTML Matters

Speaker: Daniel Kraus

Resources

• Pull Request
• Recording (Gdrive)
• Slides (Google Slides)
• Slides (PDF)

Other resources

• A11Y Project Checklist
• “Accessible headings structure” on A11Y Project
• MDN Web Docs - HTML
• MDN Web Docs - Accessibility
• Something more advanced to study later on, Structured Data and its impact on SEO

---

Main message: HTML may seem boring and legacy at first sight, but in fact it is a crucial core of any website. HTML is so rich and its proper usage brings you a lot of functionality for free. Plus it is arguably easier for everyone (humans & robots:)) to understand the structure of your app/content.

Main goal: Not to teach all elements & aspects of HTML, but to set up the mindset that HTML is important, powerful and can make your life much easier. Keep exploring it!

Prerequisites

• Firefox for its Accessibility Inspector
• Chrome Vox - Screen Reader extension for Chrome

1. Divs vs. Semantic (HTML5,...)

• <div role="complementary"> vs. <aside>, or <div role="navigation"> vs. <nav>, find more about Roles in MDN Web Docs.
• Check semantic implication (understanding the structure of content, screenreaders) as well as accessibility tree

2. Event List / Dashboard

• Should be unsorted list
• Navigation
  • Must be buttons, there's a difference between onClick handlers on plain li vs. buttons
    • <li role="button" tabIndex="0" onClick={onChange}> = <button onClick={onChange}> Non-semantic buttons vs. semantic buttons
  • You should use aria-label when a button has only an SVG as a child, not text (Applies to CreateButton too). aria-label on MDN Web Docs

3. Headings Order

• Never ever use it based on font size, but based on context
• Should not be skipped H1 -> H3 Accessibility concerns
• One H1 per page (HTML5 introduced a way for multiple H1 per page when divided by sections, but it was never adopted). Read this excellent article about Headings on A11Project.
• On Login, Create Event is clearly H1, not the "Great Kid. Don't get cocky."
• In case of the Dashboard (given the design), there's practically missing H1 (Dashboard) -> H2 (Events) -> to eventually have H3 ([name of event]). We can trick this – The H1 and H2 will be hidden later via CSS and absolute position and text-indent (ideally).
  • Check semantic implication as well as accessibility tree

4. Forms

• Inputs must be wrapped in <form> to ensure the form is submittable by ENTER key out of box.
  • Submit button should be within the form, if not, you can use form="yo-form" on the submit button outside the <form id="yo-form">. Explanation of form attribute on MDN Web Docs
• Button element has default type="submit". There's a difference between type="submit" and type="button". If there is a button (Password Visibility Toggle in our case) within the form that is not supposed to submit it, always define type="button".
• Input type is important because of:
  • It has impact on appropriate keyboard on mobile
  • It brings by default appropriate format validation (in case of email)
  • name has impact on autocomplete (firstname, lastname, etc.)

5. Head Element

• Use next/head, see more about that in the Next.js docs
• Use realfavicongenerator.net
• og:image should have 1200x630px, PNG works the best as Facebook uses aggressive compression
  • Debugging tools:
    • Facebook
    • Twitter
    • Linkedin

6. Common Mistakes

• <button> nested within <a> is invalid HTML. See this Stackoverflow discussion.
• <i> used for icons is a bad practice from Bootstrap. Don't do it. Find the right meaning in the Web MDN docs.
• Missing alt attribute on <img> completely is not valid HTML. There's a difference between blank alt="" and none. Checkout this explanation on WebAIM.