The <object> Element
As defined in the HTML Living Standard, the <object> element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.
<object data="infographic.svg" type="image/svg+xml">
<img src="infographic.png" alt="Static version of the data chart">
</object>
View HTML Living Standard: The object element
Technical Requirements
- The
dataAttribute: Specifies the URL of the resource. - The
typeAttribute: Specifies the MIME type of the resource. If present, it must be a valid MIME type string. - The
nameAttribute: Allows the object to be targeted by links or used in form submission if associated with a form. - The
usemapAttribute: Allows the object to be used as an image map.
WCAG Requirement: Non-text Content
Success Criterion 1.1.1 (Level A): All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
The <object> element is superior to <embed> because it allows for nested fallback content. If the resource cannot be loaded (due to lack of plugin, network error, or browser capability), the content between the opening and closing tags is rendered. This is the perfect place to provide accessible alternatives like descriptive text, data tables, or links to accessible document formats.
Modern Best Practices
- Use Specific Elements First: While
<object>is versatile, use more specific elements when possible. For images, use<img>. For videos, use<video>. For other HTML documents, use<iframe>. - SVG Integration:
<object>is a popular choice for embedding SVGs when you want to maintain access to the SVG's internal DOM for scripting, while still providing a fallback<img>for very old browsers. - Keyboard Accessibility: Ensure that any interactive content within the object (like an embedded app) does not trap the keyboard focus.
A11y Tip: Naming the Object
For objects that represent meaningful content, always provide an accessible name. While fallback text handles errors, you should also use aria-label or title to identify the resource for screen reader users when it is working correctly.