Ensure <object> elements have alternative text
Ensure that all <object>
elements include descriptive alternative text to convey their purpose and content to users relying on assistive technologies.
About This Rule
This guideline ensures that all <object>
elements have appropriate alternative text, enhancing accessibility for users who rely on screen readers. Adhering to this practice aligns with the following standards:
- WCAG 2.1 (A): 1.1.1 Non-text Content
- WCAG 2.0 (A): 1.1.1 Non-text Content
- WCAG 2.2 (A): 1.1.1 Non-text Content
- Section 508: 1194.22(a) - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content)
- EN 301 549
Why It Matters
The <object>
element is used to embed multimedia content, such as images, videos, or interactive applications, into web pages. Without alternative text, screen readers cannot interpret the content within these objects, leaving users with visual impairments unaware of the embedded information. Providing concise and descriptive alternative text ensures that all users have equal access to the content and functionality of embedded objects. :contentReference[oaicite:0]{index=0}
How to Fix
To enhance accessibility:
-
Add Alternative Text: Use the
title
,aria-label
, oraria-labelledby
attributes to provide a meaningful description of the<object>
element's content.<!-- Using the title attribute --> <object data="path/to/content" title="Description of the object"></object> <!-- Using the aria-label attribute --> <object data="path/to/content" aria-label="Description of the object"></object> <!-- Using the aria-labelledby attribute --> <span id="object1-label">Description of the object</span> <object data="path/to/content" aria-labelledby="object1-label"></object>
-
Mark Decorative Objects Appropriately: If the
<object>
is purely decorative and does not convey meaningful information, assign it arole
ofpresentation
ornone
to indicate that it can be ignored by assistive technologies.
Examples
Incorrect
An <object>
element without alternative text:
Correct
An <object>
element with alternative text using the title
attribute:
More Information
Other Rules
Interested in other web accessibility rules? Please see these other rules: