Ensure <object> Elements Have Alternate Text

Casandra Visser

Author

Yotam Flohr

Researcher

Ritvik Shrivastava

Expert

July 29, 2024

Disabilities affected: Blind Hearing

Standards: WCAG 2.2 Level A

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.