HTML Accessibility – ARIA, alt Text, Keyboard Navigation

<!-- Bad: div soup — screen readers have no context -->
<div class="header">
  <div class="nav">
    <div class="nav-item" onclick="go('/')">Home</div>
  </div>
</div>

<!-- Good: semantic HTML is accessible by default -->
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
</header>

<!-- Informative image: describe what the image shows and why it matters -->
<img src="html-structure.png" alt="Diagram showing the HTML document tree with html, head, and body elements">

<!-- Functional image (linked image): describe the destination/action, not the image -->
<a href="/">
  <img src="logo.png" alt="ylearner – Go to homepage">
</a>

<!-- Decorative image: empty alt (screen readers skip it entirely) -->
<img src="decorative-wave.svg" alt="">

<!-- Bad: filename as alt (useless to screen reader users) -->
<img src="img_001.jpg" alt="img_001.jpg">

<!-- Bad: "image of" / "photo of" prefix (redundant — screen readers announce it is an image) -->
<img src="chart.png" alt="Image of a bar chart">

<!-- Good: describe content meaningfully -->
<img src="chart.png" alt="Bar chart showing 40% increase in web traffic from January to June 2026">

<!-- Method 1: label with for + matching input id (preferred) -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required autocomplete="email">

<!-- Method 2: wrapping label -->
<label>
  Username
  <input type="text" name="username" required>
</label>

<!-- Bad: placeholder is NOT a label -->
<input type="email" placeholder="Email address">

<!-- Grouping related inputs with fieldset and legend -->
<fieldset>
  <legend>Preferred contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

<!-- Accessible error message linked to input -->
<label for="password">Password</label>
<input type="password" id="password" name="password"
       aria-describedby="password-error" aria-invalid="true">
<span id="password-error" class="error" role="alert">
  Password must be at least 8 characters.
</span>

<!-- Skip link: allows keyboard users to jump past repeated navigation -->
<!-- Place as the very first element in body -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- tabindex="0": adds a non-interactive element to the tab order -->
<div role="button" tabindex="0" onclick="doAction()"
     onkeydown="if(event.key==='Enter'||event.key===' ')doAction()">
  Click me
</div>
<!-- Note: use a real <button> instead when possible! -->

<!-- tabindex="-1": removes element from tab order but allows programmatic focus -->
<div id="modal" tabindex="-1">…modal content…</div>
<!-- document.getElementById('modal').focus() works, Tab key skips it -->

<!-- tabindex values greater than 0 create unpredictable tab order — AVOID -->
<!-- Bad: -->
<input tabindex="3">
<input tabindex="1">
<input tabindex="2">

<!-- aria-label: provides an accessible name when no visible text label exists -->
<button aria-label="Close dialog">✕</button>
<input type="search" aria-label="Search tutorials">

<!-- aria-describedby: links to text that provides additional description -->
<input type="text" id="zip" aria-describedby="zip-hint">
<p id="zip-hint">Enter your 5-digit US ZIP code.</p>

<!-- aria-hidden: hides element from accessibility tree (e.g. decorative icons) -->
<span aria-hidden="true">🏠</span>
<span>Home</span>

<!-- aria-expanded: communicates open/closed state of collapsible content -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<ul id="menu" hidden><li><a href="/">Home</a></li></ul>

<!-- aria-live: announces dynamic content changes to screen readers -->
<div aria-live="polite" aria-atomic="true">
  <!-- Updated content will be announced when changed -->
  Form submitted successfully.
</div>

<!-- aria-current: marks the current item in a set (e.g. current nav link) -->
<nav>
  <a href="/" aria-current="page">Home</a>
  <a href="/about">About</a>
</nav>

<!-- When you have multiple nav elements, label them for distinction -->
<nav aria-label="Main navigation">…</nav>
<nav aria-label="Breadcrumb">…</nav>
<nav aria-label="Pagination">…</nav>

<!-- Explicit landmark role when element cannot be semantic -->
<div role="main">…</div>  <!-- Only if <main> is not usable -->