<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:

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)