Object elements need text alternatives

Object elements must not be missing text alternatives

Every <object> embed needs an accessible text alternative. This requirement applies to embedded PDFs, SVGs, multimedia, third‑party widgets, and other non‑text content. It primarily affects screen reader users and anyone who can’t perceive visual content.

Why It Matters

Screen readers cannot interpret non‑text content without a text alternative. When an <object> has no accessible name, assistive technology may announce only “object,” leaving users without context.

This blocks access to critical information (charts, documents, controls) and increases confusion. It also affects people using voice control or switch access who rely on clear labels to identify elements.

Common Causes

• <object> used with no aria-label or aria-labelledby.
• Assuming fallback text inside <object> will be read when the object loads (it usually isn’t).
• Relying solely on the title attribute for naming.
• Decorative embeds left focusable or exposed to assistive tech.
• Embedded documents or SVGs that convey meaning without any adjacent text description.

How to Fix

1. Identify the purpose of each <object>:
   • Informative or functional: users must know what it is and how to interact.
   • Decorative: it conveys no information and should be hidden from assistive tech.
   • Complex content (e.g., charts, documents): users may need a succinct label plus a nearby detailed description or accessible version.
2. Provide a text alternative:
   • Prefer aria-label for a short, direct name.
   • Use aria-labelledby to reference visible text that names the object.
   • Recommendation: avoid relying on title as the only label; support and verbosity vary across assistive technologies.
3. Hide decorative objects:
   • Set role="presentation" or role="none" and aria-hidden="true".
   • Ensure they are not focusable (e.g., remove tabindex or set tabindex="-1").
4. Keep focus logical:
   • Make the object focusable only if it is interactive.
   • Ensure visible focus and a clear accessible name when focusable.
5. For complex content:
   • Provide a concise accessible name for the <object>.
   • Offer an adjacent summary or link to a fully accessible version (e.g., tagged PDF, HTML alternative, transcript/captions for media).
6. Verify MIME type and fallbacks:
   • Include a proper type attribute (e.g., type="application/pdf").
   • Provide meaningful fallback content only as a backup for unsupported environments; do not rely on it for the primary text alternative.

How to Test

• Keyboard:
• Tab through the page. If the <object> is focusable, it must have a visible focus indicator and a meaningful accessible name. Decorative objects should not receive focus.
• Screen reader (desktop):
• With NVDA/JAWS/VoiceOver, navigate to the object. Confirm the element’s role and accessible name are announced. Decorative objects should be skipped.
• Mobile/touch:
• With TalkBack/VoiceOver, swipe to the object. Ensure a clear name is read and actions are available if the object is interactive.
• Accessibility tree check:
• Use browser devtools Accessibility panel to confirm the object’s name, role, and state. Name must come from aria-label/aria-labelledby (or equivalent), not only from fallback content.
• Failure simulation:
• Temporarily block the resource (e.g., via the network panel) to confirm that users still have context via adjacent text or fallback content.

Good Example

<span id="chart-caption">Revenue by quarter (interactive chart)</span>
<object
  data="/assets/charts/revenue.svg"
  type="image/svg+xml"
  aria-labelledby="chart-caption"
  tabindex="0">
  <!-- Fallback for unsupported environments -->
  <p>Revenue chart. Download the accessible data table below.</p>
</object>

<!-- Decorative confetti animation, hidden from AT and not focusable -->
<object data="/assets/anim/confetti.svg" role="none" aria-hidden="true" tabindex="-1"></object>

Bad Example

<!-- No accessible name -->
<object data="/widgets/calendar.html"></object>

<!-- Relies on fallback text that won’t be announced when the object loads -->
<object data="/docs/terms.pdf" type="application/pdf">
  Terms and conditions document
</object>

<!-- Decorative but left focusable/exposed -->
<object data="/images/stars.svg" tabindex="0"></object>

Quick Checklist

• Every meaningful <object> has an accessible name via aria-label or aria-labelledby.
• Decorative objects use role="none"/"presentation", aria-hidden="true", and are not focusable.
• Do not rely solely on title for naming.
• Do not rely on fallback content for the primary text alternative.
• Interactive objects are keyboard-focusable with visible focus and clear labels.
• Complex content includes a concise name plus a nearby detailed description or accessible alternative.
• MIME type is correct and fallback exists for unsupported environments.