axe-core object-alt error object element missing alt text

axe-core object-alt error object element missing alt text - how to fix it

TL;DR

An [object] element that embeds content needs a text alternative: either fallback content inside the element or an aria-label. Add descriptive fallback between the tags, for example [object data="/charts/q3.svg"]Q3 revenue chart: revenue grew 12%.[/object]. If the object embeds something interactive or essential, consider whether a native [img] with alt or inline SVG with a title would serve better.

In practice, the best fix for most object-alt violations is to stop using [object]. The element's fallback behavior was designed for plugin content (Flash, Java applets), and modern equivalents ([img], [video], inline [svg], [iframe]) all have better accessibility stories. Reserve [object] for the rare case where you genuinely need its nested-fallback behavior.

The verbatim error looks like this:

axe-core 4.x
Rule: object-alt (serious)
"Object elements must have alternate text"

Element: [object data="/charts/q3.svg" type="image/svg+xml"][/object]
  No alternate text or fallback content.

Steps

1. Reproduce with the single rule:

npx @axe-core/cli https://example.com/reports --rules object-alt

Expected: each object without alt text or fallback is listed.

2. Decide whether [object] is the right element. For a static image, [img alt="..."] is simpler and better supported. For SVG, inline [svg] with a [title] child is more accessible. Only keep [object] when you need its fallback behavior.
3. Add fallback content inside the element:

[object data="/charts/q3.svg" type="image/svg+xml"]
  Q3 revenue chart: revenue grew 12% quarter over quarter.
[/object]

Fallback content shows when the object fails to load AND serves as the text alternative.

4. Re-run the focused scan. Expected output: 0 violations for object-alt.
5. Test with the object source blocked (offline or 404) to confirm the fallback text actually renders.
6. Evaluate replacements before adding fallback text. For SVG: inline the [svg] with a [title] child. For images: use [img alt]. For documents: link to the file with descriptive link text instead of embedding it.
7. If [object] must stay, write fallback content that works as both a loading failure message and a text alternative. Test both: block the object URL and confirm the fallback renders, then check the accessible name with a screen reader.

When to use

• Axe flags object-alt on embedded objects.
• A page embeds SVG, PDF, or media via [object] with no fallback.
• Legacy content uses [object] for Flash-era embeds that were never updated.

When not to use

• The content is a static image (use [img] with alt instead).
• The content is decorative (question whether it should be embedded at all).
• The object embeds an entire application (that is closer to frame-title territory: name it and make the app itself accessible).

Why it happens

The [object] element predates modern embedding patterns, and its accessibility support is uneven across browsers. Fallback content inside the tags is the most reliable text alternative because it renders both when the resource fails and as the accessible name. Without it, assistive tech announces an empty embedded object.

[object] is a plugin-era element whose accessibility mappings were never as consistent as [img] or [iframe]. Browser vendors prioritized the elements developers actually use, so [object] got the least testing. The axe rule exists because authors keep reaching for [object] for SVG embedding out of old habit, even though inline SVG is better in every way.

Edge cases

• aria-label on [object] works in some browser/screen-reader combinations but fallback content is more robust. Use both if you must keep [object].
• An [object] with no data attribute and no content is dead markup. Remove it.
• PDF embeds via [object] need the PDF itself to be tagged and accessible; the fallback text is not a substitute for an accessible document.
• Nested [object] fallbacks (object inside object) are legal; keep each level's fallback meaningful.
• An [object] used for HTML embedding is essentially a worse [iframe]. Prefer [iframe] with a title.
• Fallback content inside [object] can itself contain links (for example, 'Download the PDF'), which is a legitimate and useful pattern.
• Empty [object] elements with no data attribute are dead code. Remove them; do not write fallback text for nothing.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_YKbhXRI2EuoloPUoLqg8Og