<object>
elements do not have alt text
— Updated
Appears in: Accessibility audits
Screen readers and other assistive technologies cannot translate non-text content. Adding alternative text to define <object>
elements helps assistive technologies convey meaning to users.
How this Lighthouse audit fails #
Lighthouse flags <object>
elements that don't have alternative text:
How to add alternative text to <object>
elements #
Describe the object in an ARIA label or the title
attribute. In the example below 2019 Web Accessibility Report
is the description of the object.
<object type="application/pdf"
data="/report.pdf"
width="600"
height="400"
aria-label="2019 Web Accessibility Report">
</object>
See all valid alt text examples in <object> elements must have alternate text.
Tips for writing effective alt text #
- As previously mentioned, describe the information contained in the embedded object.
- Alternative text should give the intent, purpose, and meaning of the object.
- Blind users should get as much information from alternative text as a sighted user gets from the object.
- Avoid non-specific words like "chart", "image", or "diagram".
Learn more in WebAIM's guide to Alternative Text.
Resources #
- Source code for
<object>
elements do not have alt text audit <object>
elements must have alternate text (Deque University)
Last updated: — Improve article