Images Rule

Embedded objects must have alternative text object-alt

The object element embeds another file in the page: a PDF timetable, an SVG, an audio file, sometimes a whole page. Screen readers announce it as a single thing and need a name for it. The name can come from aria-label, aria-labelledby, a title attribute or the fallback content written between the opening and closing tags. With none of these, it is announced as object, embedded, or skipped.

WCAG 2.2 A 1.1.1 Non-text Content

Websight reports this as <object> elements must have alternative text

Who it affects

A parent using a screen reader on a school portal reaches the term timetable embedded as a PDF and hears only embedded object. There is no name and no link to open it another way.

Someone on a tablet whose browser cannot show the embedded file sees an empty grey box, because no fallback content was written inside the object.

Someone using a screen reader to list all the content on a page finds an unnamed entry and has to guess whether it is a menu, an advert or the thing they came for.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

Announced as: embedded object, or not at all. No name, and nothing shown if the file cannot load.

Fixed

Announced: Year 7 autumn term timetable, embedded object. If the file fails, the paragraph and link show instead.

Show the markup behind both examples
Broken
<style>body{font-family:system-ui;padding:16px;margin:0}object{display:block;border:1px solid #bbb;border-radius:6px}</style>
<h2 style="font-size:17px;margin:0 0 8px">Autumn term timetable</h2>
<object type="image/svg+xml" width="260" height="80" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='80'%3E%3Crect width='260' height='80' fill='%23eef3f8'/%3E%3Crect x='10' y='12' width='240' height='14' fill='%23b7c7d8'/%3E%3Crect x='10' y='34' width='240' height='14' fill='%23b7c7d8'/%3E%3Crect x='10' y='56' width='160' height='14' fill='%23b7c7d8'/%3E%3C/svg%3E"></object>
Fixed
<style>body{font-family:system-ui;padding:16px;margin:0}object{display:block;border:1px solid #bbb;border-radius:6px}</style>
<h2 style="font-size:17px;margin:0 0 8px">Autumn term timetable</h2>
<object type="image/svg+xml" width="260" height="80" aria-label="Year 7 autumn term timetable" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='80'%3E%3Crect width='260' height='80' fill='%23eef3f8'/%3E%3Crect x='10' y='12' width='240' height='14' fill='%23b7c7d8'/%3E%3Crect x='10' y='34' width='240' height='14' fill='%23b7c7d8'/%3E%3Crect x='10' y='56' width='160' height='14' fill='%23b7c7d8'/%3E%3C/svg%3E">
  <p>Year 7 autumn term timetable. <a href="#">Open the timetable as a web page</a>.</p>
</object>

Test it by hand in two minutes

  1. In DevTools, search the Elements panel for <object. For each one, look for aria-label, aria-labelledby, title, or text content between the tags.
  2. Turn on VoiceOver (Cmd+F5) or NVDA and move to the object. You should hear a name that says what is embedded, such as Year 7 timetable.
  3. Temporarily change the data attribute in DevTools to a path that does not exist. The fallback content inside the object should appear in its place.
  4. If the embedded file is a document, check there is also a plain link to open or download it, so nobody is stuck inside the viewer.

The fix

Before
<object data="timetable.pdf" type="application/pdf" width="600" height="400"></object>
After
<object data="timetable.pdf" type="application/pdf" width="600" height="400" aria-label="Year 7 autumn term timetable">
  <p><a href="timetable.pdf">Download the Year 7 autumn term timetable (PDF)</a></p>
</object>

Do both: aria-label gives the name, the fallback content gives everyone a way in if the embed cannot load. The fallback is also read as the name if aria-label is missing.

Decorative embedded graphic

Before
<object data="flourish.svg" type="image/svg+xml"></object>
After
<object data="flourish.svg" type="image/svg+xml" aria-hidden="true"></object>

If it means nothing, hide it. Better still, use a CSS background instead of an object.

Use a simpler element

Before
<object data="map.png" type="image/png"></object>
After
<img src="map.png" alt="Map showing the main entrance on Station Road">

A plain image does not need object at all. img with alt is simpler and better supported.

Common mistakes

  • Leaving the object empty and assuming the file's own title will be announced; it will not.
  • Writing fallback text that just says Your browser does not support this, which names nothing.
  • Using alt on the object element, which is not a valid attribute there.
  • Giving a name like PDF or Embed instead of what the content is.
  • Embedding a document with no separate link, so screen reader users cannot leave the viewer to read it their own way.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner can see an object with no aria-label, aria-labelledby, title or fallback text. It cannot see what is inside the embedded file, so it cannot tell whether the embedded document is itself accessible. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Images must have alternative text image-alt Every img element needs an alt attribute. A Elements with role="img" must have alternative text role-img-alt Adding role="img" to a div, span or any other element tells assistive technology to treat it as a single picture. A SVG graphics with an image role must have alternative text svg-img-alt Inline SVG is drawn with code rather than loaded as a file, so there is no alt attribute to fill in. A Frames must have a title frame-title An iframe is a window onto another page: a map, a video, a booking form, a payment field.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.