canon-screen-reader

CANON · Screen Reader

Screen readers traverse the accessibility tree, not the visual layout. If the tree is wrong, the interface is wrong for blind and low-vision users.

Semantic HTML first

Screen readers understand HTML elements natively. ARIA is a patch for when HTML can't express the role.

Need	Use HTML	Not
Button	<button>	<div role="button">
Link	<a href>	<span onClick>
Heading	<h1>–<h6>	<div class="heading">
List	<ul>/<ol>	<div class="list">
Table	<table> with <th>	CSS grid of <div>
Landmark	<main>, <nav>, <header>, <footer>	<div class="nav">
Dialog	<dialog>	<div class="modal">

Heading hierarchy

Headings create the document outline. Screen reader users navigate by heading. Skip levels or misused headings break this navigation.

• One <h1> per page.
• No skipping levels (h1 → h3 without h2).
• Headings are structure, not styling. Don't use <h3> because you want smaller text; use CSS.

ARIA — only when HTML fails

The first rule of ARIA: don't use ARIA if HTML does the job. The second rule: if you use ARIA, use it correctly and completely.

Common ARIA patterns done right:

<!-- Live region for dynamic updates -->
<div role="status" aria-live="polite">3 results found</div>

<!-- Custom disclosure -->
<button aria-expanded="false" aria-controls="panel">Details</button>
<div id="panel" hidden>...</div>

<!-- Tab interface → see canon-tabs -->

Visually hidden but screen-reader accessible

.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;
}

Use for: labels that are visually implied, skip links before focus, extra context.

Live regions — announce dynamic changes

Role	Urgency	Use
role="status" / aria-live="polite"	Low — waits for pause	Search result count, save confirmation
role="alert" / aria-live="assertive"	High — interrupts	Error messages, time-sensitive warnings