These docs are for CORA 0.10, an older release. Read this page in the newest docs.
Embedded objects need alternative text
- Rule:
axe/object-alt - Checks: <object> elements must have alternative text
- WCAG: 1.1.1
- Fix class:
content: A fix needs authored text.
Who it affects
Section titled “Who it affects”- People who use a screen reader or a braille display, most of them blind.
How to fix it
Section titled “How to fix it”An <object> shows an image, such as an SVG file
Section titled “An <object> shows an image, such as an SVG file”Use an <img> with an alt instead, the simplest and best-supported way to give an image a text alternative. If it must stay an <object>, name it with aria-label for what the image conveys.
<img src="logo.svg" alt="Northwind Traders">An <object> embeds a document, such as a PDF
Section titled “An <object> embeds a document, such as a PDF”Name it with aria-label, or with aria-labelledby pointing at a visible heading, for the document’s title. Offer a link to the document beside it too, since not every browser shows it inline.
<h2 id="menu-title">Lunch menu</h2><object data="lunch-menu.pdf" type="application/pdf" width="600" height="400" aria-labelledby="menu-title"></object><p><a href="lunch-menu.pdf">Download the lunch menu (PDF)</a></p>Fixes that fail
Section titled “Fixes that fail”Putting the text alternative inside the <object> as fallback content
Section titled “Putting the text alternative inside the <object> as fallback content”Fallback content shows only when the object fails to load. Once it loads, assistive technology gets no name, and axe still reports it.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.