<object> elements do not have [alt] text
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:
The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.
How to add alternative text to <object> elements #
Describe the object in the text content of the <object> element. 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">
2019 Web Accessibility Report
</object>Learn more in Include text alternatives for images and objects.
You can also use alt and ARIA labels to describe object elements, for example, <object type="application/pdf" data="/report.pdf alt="2019 Web Accessibility Report">. (See <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)