Accessibility: alt, heading hierarchy, and ARIA

Master alternative text, a heading hierarchy screen readers can actually navigate, and ARIA usage limited to cases where native HTML falls short.

9 min · 3 questions

Accessibility is not a cosmetic layer bolted on at the end of a project: it is a structural property of your HTML. First up, the alt attribute. Good alternative text describes the function of the image in its context, not its pixel-by-pixel appearance. A sales chart isn't described as "blue bar chart" but by the information it carries. And a purely decorative image must get an empty alt="": it is the explicit signal telling the screen reader to skip it. Omitting the attribute is the worst option of all, because the screen reader then announces the file name.

<img src="sales-chart.png"
     alt="2025 sales: +18% in the last quarter">

<img src="divider-ornament.png" alt="">

Second task: the heading hierarchy. Screen reader users overwhelmingly jump from heading to heading to build a mental map of the page. Your h1 → h2 → h3 outline must therefore reflect the logical structure of the content, never the visual size you happen to want. Two non-negotiable rules: a single h1 per page, and no skipped levels (no h4 directly under an h2). If a heading looks "too big", fix it in CSS, not by downgrading its semantic level.

<h1>Dashboard</h1>
<section>
  <h2>Statistics</h2>
  <h3>Monthly visits</h3>
  <h3>Conversion rate</h3>
</section>
<section>
  <h2>Exportable reports</h2>
</section>

ARIA becomes legitimate when native HTML cannot express a dynamic state: a menu that is open or closed, a region updated live, an active tab. The key attributes are aria-expanded (open/closed state), aria-controls (link to the element being controlled), and aria-live (announcing updates). Remember the principle: native HTML provides the roles, ARIA fills in the states and properties that your JavaScript changes over time.

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/profile">Profile</a></li>
  <li><a href="/settings">Settings</a></li>
</ul>

Knowledge check

Make sure you remember the key points of this lesson.

1. How should you handle a purely decorative image?
   • Give it a descriptive alt such as alt="ornament"
   • Give it an empty alt attribute: alt=""
   • Remove the alt attribute entirely
   • Use title instead of alt
2. Under an h2, you want a visually subtle subheading. What do you do?
   • An h5, because it is smaller by default
   • An h3 whose size you reduce in CSS
   • A div with a heading class
3. When is it appropriate to add ARIA attributes?
   • On every interactive element, just to be safe
   • When no native HTML element expresses the required role or state
   • To improve the page's search ranking