SiteLint documentation and guidelines

Object general alt

Description

The object element in HTML is used to embed various types of content, such as images, videos, PDFs, or other web resources. To ensure accessibility, the object element should include alternative text or content that provides a meaningful equivalent for users who cannot access the embedded content. This alternative content helps users understand the purpose and context of the object element if the embedded content is not accessible or fails to load.

Disabilities impacted

  • Visual Impairments: Users with visual impairments who rely on screen readers need descriptive alternative text to understand the embedded content’s purpose and context.
  • Cognitive Disabilities: Users with cognitive disabilities benefit from clear and concise alternative content that explains the embedded content, reducing confusion.
  • Motor Impairments: Users with motor impairments who navigate using keyboards or assistive devices need accessible alternatives to interact with the content effectively.

Why it matters

Providing alternative text or content for <object> elements ensures that all users, regardless of their abilities or the capabilities of their devices, can access the information or functionality intended by the embedded content. It enhances the accessibility and usability of the webpage, ensuring a better user experience for everyone.

Coding Problems and Solutions

Common Coding Problems

  • Missing Alternative Text: The <object> element lacks any alternative text or content, leading to accessibility issues.
  • Inadequate Alternative Content: The alternative content does not provide a meaningful equivalent to the embedded resource.
  • Improper Nesting: The alternative content is not properly nested within the <object> element.

How to Fix It

Include descriptive alternative text

Ensure that the object element contains alternative text that describes the purpose and content of the embedded resource.

Incorrect example
<object data="chart.svg" type="image/svg+xml"></object>
Correct example
<object data="chart.svg" type="image/svg+xml">
    <p>Interactive chart showing sales data for 2024. <a href="chart.svg">Download the chart</a>.</p>
</object>

Provide meaningful alternative content

The alternative content should provide a meaningful equivalent to the embedded resource, such as a textual description or a link to a downloadable version.

Incorrect example
<object data="presentation.pdf" type="application/pdf">
    <p>PDF file.</p>
</object>
Correct example
<object data="presentation.pdf" type="application/pdf">
    <p>PDF presentation on company strategy for 2024. <a href="presentation.pdf">Download the presentation</a>.</p>
</object>

Ensure proper nesting

Make sure the alternative content is properly nested within the <object> element and is easily accessible.

Incorrect example
<object data="video.mp4" type="video/mp4"></object>
<p>Your browser does not support the video tag. Please <a href="video.mp4">download the video</a> instead.</p> <!-- Not nested properly -->
Correct example
<object data="video.mp4" type="video/mp4">
    <p>Your browser does not support the video tag. Please <a href="video.mp4">download the video</a> instead.</p>
</object>

Known limitations

  • Complex Embedded Content: For complex interactive content, providing an equivalent alternative might be challenging but is necessary for accessibility.
  • Browser Compatibility: Different browsers may handle <object> elements and their alternative content differently. Thorough testing across multiple browsers and devices is essential.
  • Dynamic Content: For dynamically loaded content within <object> elements, ensure that alternative content is also dynamically provided if necessary.

Resources