Skip to content
Permalink
Fetching contributors…
Cannot retrieve contributors at this time
74 lines (60 sloc) 2.78 KB
layout title description web_lighthouse
post
Ensure object elements have alternative text
Learn about object-alt audit.
object-alt

Screen readers cannot translate non-text content. Adding alternative text to define <object> elements helps screen readers convey meaning to users. Lighthouse reports when any <object> elements do not have alternative text:

Lighthouse audit showing <object> elements do not have alternative text

Fig. 1 — <object> elements do not have alternative text

How to fix this problem

To fix this problem, provide alternative text for every <object> element. The alternative text describes the information contained in the embedded object and goes inside the object element as regular text like "Annual report" below:

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

{% Aside 'note' %} 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) {% endAside %}

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.

More information

You can’t perform that action at this time.