The <object> element in HTML is used to embed external resources such as multimedia, applets, or other web pages into a document. To someone looking at the screen, it is clear that an object is present, perhaps a video, a chart, or an animation.
For someone using a screen reader, however, the <object> itself is invisible unless it is described. Without a description, the screen reader user has no understanding of what is inside or why it has been included. This is why every <object> needs alternative text.
Why Alternative Text Matters
Screen readers cannot interpret what is inside multimedia or embedded content. They rely on alternative text, which is a short descriptive phrase that explains what the object is and why it exists on the page.
Think of it this way:
Without alternative text, the user hears “object” and nothing more.
With alternative text, the user hears “Interactive chart showing monthly sales” or “Embedded video of product demo.”
Alternative text ensures that the content is understandable, meaningful, and accessible to everyone.
How to Add Alternative Text
There are three main ways to provide alternative text for <object>:
1. Using title
<object data="path/to/content" title="This object has text"></object> The title attribute provides a short description.
2. Using aria-label
<object data="path/to/content" aria-label="This object has text"></object>
The aria-label attribute explicitly sets the accessible name.
3. Using aria-labelledby
<span id="label1">This object has text</span>
<object data="path/to/content" aria-labelledby="label1"></object>Here, the object is linked to another element (label1) that contains descriptive text.
Marking as Decorative (when appropriate)
If the object doesn’t add meaningful content (it’s purely decorative), mark it with a neutral role so it’s ignored by assistive technology:
<object data="path/to/content" role="presentation"></object>
<object data="path/to/content" role="none"></object>Correct Examples ✅
These pass accessibility checks:
<object data="chart.svg" title="Monthly sales chart"></object>
<object data="audio.mp3" aria-label="Introductory podcast episode"></object>
<object data="quiz.html" aria-labelledby="objdesc"></object>
<p id="objdesc">Interactive quiz module</p>
<object data="decorative-icon.svg" role="presentation"></object>Each of these either has descriptive alternative text or is marked decorative.
Incorrect Examples ❌
These fail accessibility:
1. No text at all → screen reader announces nothing.
<object data="path/to/content"></object>2. An empty child element → still no useful text.
<object data="path/to/content"><div> </div></object>3. Visible fallback text isn’t treated as proper alternative text. Users relying on accessibility tools still miss the context.
<object data="path/to/content">This object has no alternative text.</object>Writing Good Alternative Text
When writing alternative text for objects, think about the purpose:
- Why is the object here?
- What information does it provide?
- What would I say if I had to explain it without showing it?
For example:
- Instead of “chart,” say “Bar chart showing sales from January to June.”
- Instead of “video,” say “Product demo video showing how to assemble the desk.”
Keep it short, clear, and meaningful. Avoid useless words like “image” or file names.
Rule Description
All embedded <object> elements must have text alternatives. This ensures screen readers can announce them, giving blind or low-vision users access to the same information as sighted users.
The Algorithm (in simple terms)
Accessibility testing tools check for:
- A title attribute
- An aria-label
- An aria-labelledby reference
- Or a neutral role (role=”none” / role=”presentation”)
If none of these are present, the <object> fails the test.
Wrapping Up
Adding alternative text to <object> is simple but powerful. Always ensure that every <object> on your page has either a clear text alternative or is marked as decorative. That way, your content is usable by everyone.
