Features

Ensure <object> elements have alternative text

Rule ID: object-alt User Impact: serious Guidelines: WCAG 2.0

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, or aria-labelledby attributes to provide a meaningful description of the <object> element's content.
    Copy code
    <!-- 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 a role of presentation or none to indicate that it can be ignored by assistive technologies.
    Copy code
    <object data="path/to/decorative-content" role="presentation"></object>
    
    <object data="path/to/decorative-content" role="none"></object>

Examples

Incorrect

An <object> element without alternative text:

Copy code
<object data="path/to/content"></object>

Correct

An <object> element with alternative text using the title attribute:

Copy code
<object data="path/to/content" title="Description of the object"></object>

More Information

Other Rules

Interested in other web accessibility rules? Please see these other rules: