Ensure <object> Elements Have Alternate Text
Blind
Hearing
WCAG 2.2 Level A
Written and researched for humans by humans
Casandra Visser
Author
Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments:
0
All embedded objects must have text alternatives to ensure screen readers can understand them.
Why It Matters
Screen readers have no way of translating non-text content without alternative text.
The object element is used to embed multimedia (audio, video, applets) or another web page into an HTML document. These object elements need text alternatives so that screen readers can relay this information to users.
Alternative text should provide the intent, purpose, and meaning of the object.
Fixing the Issue
Add alternative text to all embedded <object> elements using either aria-label, aria-labelledby, or title attributes.
Good Code Example
Code example
<object data="path/to/content" title="This object has text"></object>
<object data="path/to/content" aria-label="this object has text"></object>
<span id="label1">this object has text</span>
<object data="path/to/content" aria-labelledby="label1"></object>
<object data="path/to/content" role='presentation'></object>
<object data="path/to/content" role='none'></object>
Copy
Bad Code Example
Code example
<object data="path/to/content"></object>
<object data="path/to/content"><div> </div></object>
<object data="path/to/content">This object has no alternative text.</object>
Copy
Test Cases
For more examples, visit the W3C’s GitHub’s ATC Rules library.