Build it right in the markup

The .sr-only utility

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

Visually hidden, still read aloud. Prefer this over display:none or visibility:hidden, which remove content from the accessibility tree too.

✓ Pattern

<!-- prime an empty region in the DOM first -->
<div role="status" aria-live="polite"
     class="sr-only" id="status"></div>

<script>
  // later: just set its text
  status.textContent = "Draft saved";
</script>

aria-live="polite" (or role="status") waits for a pause; aria-live="assertive" / role="alert" interrupts — save it for genuine errors. The container must exist before you inject text.

✓ Pattern

<button aria-expanded="false"
        aria-controls="panel">
  Show details
</button>
<div id="panel" hidden>…</div>

// toggle both together
btn.onclick = () => {
  var open = btn.getAttribute("aria-expanded") === "true";
  btn.setAttribute("aria-expanded", !open);
  panel.hidden = open;
};

A plain <button> whose aria-expanded mirrors whether the region is shown. No custom role needed.

✓ Pattern

<div role="tablist" aria-label="Pricing">
  <button role="tab" id="t1"
          aria-selected="true"
          aria-controls="p1">Monthly</button>
  <button role="tab" id="t2"
          aria-selected="false"
          aria-controls="p2" tabindex="-1">Yearly</button>
</div>
<div role="tabpanel" id="p1"
     aria-labelledby="t1">…</div>
<div role="tabpanel" id="p2"
     aria-labelledby="t2" hidden>…</div>

Only the selected tab is in the tab order (tabindex="-1" on the rest); arrow keys move between them and update aria-selected and the panels.

✓ Pattern

<button aria-describedby="tip">
  Response time
</button>
<span role="tooltip" id="tip" hidden>
  We reply within one business day.
</span>

// show on focus AND hover; hide on
// blur, mouseleave and Escape

aria-describedby ties the tip to the button so it's announced. Make it dismissible with Esc and reachable by keyboard, not hover-only.

✓ Pattern

<h4>
  <button aria-expanded="true"
          aria-controls="p1" id="b1">
    Do you offer audits?
  </button>
</h4>
<div id="p1" role="region"
     aria-labelledby="b1">…</div>

Each item is a real heading + button (so heading navigation works), toggling its own panel. Several can be open at once.

✓ Pattern

<button role="switch"
        aria-checked="false">
  <span class="track" aria-hidden="true">…</span>
  Email notifications
</button>

// flip aria-checked on click
// (a <button> gives you Space/Enter free)

A <button> with role="switch" — announced as “switch, on/off”. The visible track is aria-hidden; the state lives in aria-checked.

✓ Pattern

<label for="cb">Choose an atoll</label>
<input id="cb" role="combobox"
       aria-expanded="false"
       aria-controls="list"
       aria-autocomplete="list"
       aria-activedescendant="">
<ul id="list" role="listbox" hidden>
  <li role="option" id="o1">Malé</li>
  …
</ul>

The input keeps focus; aria-activedescendant points at the highlighted option so arrow keys move a virtual cursor without leaving the field. aria-expanded tracks whether the list is open.

✓ Pattern

<button aria-haspopup="true"
        aria-expanded="false"
        aria-controls="menu">Actions</button>
<ul id="menu" role="menu" hidden>
  <li role="none">
    <button role="menuitem">Edit</button>
  </li>
  …
</ul>

Unlike the combobox, a menu moves real focus between menuitems. Opening moves focus to the first item; Esc and selecting both close it and return focus to the button.