1.1.1 Non-text Content

Meters have no accessible name

A meter with no accessible name reports a value without saying what it measures.

Who it affects. A screen reader announces "meter, 70%" with no name, so people who can't see the label don't know what is at 70%.

How to fix it. Name the element with role="meter" with aria-label or aria-labelledby.

<div role="meter" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="Storage used"></div>

<div role="meter" aria-valuenow={70} aria-valuemin={0} aria-valuemax={100} aria-label="Storage used" />

Progress bars have no accessible name

A progress bar with no accessible name reports progress without saying what is progressing.

Who it affects. A screen reader announces "progress bar, 40%" with no name, so people who can't see the screen don't know what is loading.

How to fix it. Name the progress bar with aria-label, or aria-labelledby pointing at its visible label.

<progress value="40" max="100" aria-label="Uploading invoices"></progress>

<progress value={40} max={100} aria-label="Uploading invoices" />

Images have no text alternative

An image with no text alternative says nothing to a screen reader, so its content or purpose is lost.

Who it affects. A screen reader reads out the file name, or skips the image, so blind people miss what it shows or what it links to.

How to fix it. Give the img an alt that says what the image shows or does. For an image that only decorates, use alt="" so it is skipped.

<img src="/hero.png" alt="Invoices sorted by due date">
<img src="/swirl.svg" alt="">

Image buttons have no text alternative

An image button with no text alternative gives a screen reader nothing to announce as the button's name.

Who it affects. A screen reader announces "button" with no name, so people who can't see the image don't know what pressing it does.

How to fix it. Add an alt to the input type="image" that says what the button does, not what the image looks like.

<input type="image" src="/search.svg" alt="Search">

Embedded objects have no text alternative

Embedded content needs a text alternative a screen reader can announce.

Who it affects. A screen reader can't describe what the embedded object shows, so blind people skip it without knowing what it was.

How to fix it. Give the object an aria-label or title that says what it contains, or link to the content in another format.

<object data="/q3.pdf" type="application/pdf" aria-label="Q3 report (PDF)"></object>

Elements marked as images have no text alternative

An element presented as an image needs a text alternative a screen reader can announce.

Who it affects. A screen reader announces "image" with no description, so blind people miss what it conveys.

How to fix it. Give the element with role="img" an aria-label, or aria-labelledby pointing at visible text. If it only decorates, remove the role.

<span role="img" aria-label="Rated 4 out of 5">★★★★☆</span>

Loading indicators have no accessible name

A loading indicator with no text alternative tells a screen reader nothing, so nobody hears that the page is busy.

Who it affects. Screen reader users hear nothing while the page loads, so they don't know to wait.

How to fix it. Give the spinner a text alternative: visually hidden text inside a role="status" container, or role="progressbar" with an aria-label.

<div role="status">
  <span class="spinner" aria-hidden="true"></span>
  <span class="sr-only">Loading invoices</span>
</div>

<div role="status">
  <span className="spinner" aria-hidden="true" />
  <span className="sr-only">Loading invoices</span>
</div>

SVG images have no text alternative

An SVG presented as an image needs a text alternative a screen reader can announce.

Who it affects. A screen reader announces "image" with no description, so blind people miss the chart, logo or icon it shows.

How to fix it. Give the svg with role="img" a title as its first child, or an aria-label.

<svg role="img" aria-label="Revenue up 12% since June">…</svg>