SiteLint documentation and guidelines

Object missing body

Description

This rule ensures that <object> elements include fallback content or body. The <object> element is used to embed resources such as images, videos, or interactive content into a webpage. If the browser does not support the embedded resource, the fallback content within the <object> element’s body provides an alternative for users. Ensuring that there is meaningful fallback content is crucial for accessibility and usability.

Disabilities Impacted

  • Visual Impairments: Users with visual impairments who rely on screen readers need fallback content to understand the purpose and context of the <object> element if the embedded content is not accessible.
  • Cognitive Disabilities: Users with cognitive disabilities benefit from having fallback content that explains the purpose and content of the <object> element, reducing confusion.
  • Motor Impairments: Users with motor impairments who rely on keyboard navigation or assistive devices may encounter issues if the <object> content is not accessible or does not load.

Why It Matters

Providing fallback content within the <object> element ensures that all users, regardless of their browser capabilities or the accessibility of the embedded resource, can access the information or functionality intended by the embedded content. It enhances the robustness and accessibility of the webpage, ensuring a better user experience for everyone.

Coding Problems and Solutions

Common Coding Problems

  • Missing Fallback Content: The <object> element lacks any fallback content, leading to a blank or non-functional area if the embedded resource fails to load.
  • Inadequate Fallback Content: The fallback content does not provide meaningful information or an alternative way to access the embedded content.
  • Improper Nesting: The fallback content is not properly nested within the <object> element.

How to Fix It

Include Meaningful Fallback Content

Ensure that the <object> element contains fallback content that provides an accessible alternative to the embedded resource.

Example
<!-- Correct -->
<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>

<!-- Incorrect -->
<object data="video.mp4" type="video/mp4"></object>

The fallback content should include alternative information or links to the resource if it cannot be displayed.

Example
<!-- Correct -->
<object data="interactive.svg" type="image/svg+xml">
    <p>If you cannot view the SVG image, you can <a href="interactive.svg">download it here</a>.</p>
</object>

<!-- Incorrect -->
<object data="interactive.svg" type="image/svg+xml">
    <!-- No fallback content -->
</object>

Ensure Proper Nesting

Make sure the fallback content is properly nested within the <object> element.

Example
<!-- Correct -->
<object data="presentation.pdf" type="application/pdf">
    <p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="presentation.pdf">click here to download the PDF file.</a></p>
</object>

<!-- Incorrect -->
<object data="presentation.pdf" type="application/pdf"></object>
<p>It appears you don't have a PDF plugin for this browser. No biggie... you can <a href="presentation.pdf">click here to download the PDF file.</a></p> <!-- Not nested properly -->

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 fallback content differently. Thorough testing across multiple browsers and devices is essential.
  • Dynamic Content: For dynamically loaded content within <object> elements, ensure that fallback content is also dynamically provided if necessary.

Resources