Skip to main content
Beta: Front-End Checklist is currently in beta. Some issues are still being fixed. Thanks for your patience.

Provide alternative text for objects

The `<object>` element must contain alternative content to ensure accessibility for users who cannot view the primary content.

Utilities
Quick take
Typical fix time 10 min
  • Include descriptive alternative text inside every `<object>` element
  • The fallback content should serve as a functional equivalent
  • Use simple text or other semantic elements as alternative content
Why it matters: If an object fails to load or the user's browser doesn't support the format, alternative text ensures that the information is still accessible.

Rule Details

The <object> element (opens in new tab) is used to embed external resources like multimedia or other web pages. The HTML standard (opens in new tab) and WCAG non-text content rules (opens in new tab) both rely on meaningful fallback content when the primary object is unavailable or inaccessible.

Code Example

<!-- Incorrect: No alternative content -->
<object data="interactive-map.swf" type="application/x-shockwave-flash">
</object>
 
<!-- Correct: Meaningful fallback text -->
<object data="annual-report.pdf" type="application/pdf" width="600" height="800">
  <p>Your browser does not support PDFs. You can 
     <a href="annual-report.pdf">download the 2023 Annual Report PDF</a> instead.
  </p>
</object>
 
<!-- Correct: Fallback image and text -->
<object data="chart.svg" type="image/svg+xml">
  <img src="chart.png" alt="Graph showing a 20% increase in sales this quarter">
</object>

Why It Matters

  • Assistive Technology: Screen readers read the content inside the <object> tag if the object itself is not accessible or cannot be rendered.
  • Fail-safe Design: It provides a graceful degradation for browsers that do not support certain file types (e.g., legacy plugins or modern PDF viewers).
  • SEO: Search engine crawlers can index the fallback text even if they cannot parse the object's internal data.
  • User Experience: Users on slow connections may benefit from a text alternative while waiting for a large object to load.

Exceptions

  • Logos, purely decorative text treatments, and screenshots used as documentation can be valid exceptions when their accessible alternative is still provided appropriately.
  • An image or media rule should not force redundant alt text, captions, or transcripts when another nearby mechanism already provides the equivalent information clearly.
  • If the media asset fails more than one rule, prioritize the issue that most directly blocks understanding for assistive technology users.

Verification

Automated Checks

  • Inspect the browser accessibility tree or accessibility pane for the relevant element, role, or accessible name.
  • Run an automated accessibility checker such as axe or Lighthouse where applicable.

Manual Checks

  • Test the affected UI with keyboard-only navigation and confirm the rule holds in the rendered experience.
  • Re-test one representative user flow with a screen reader if this rule affects a key interaction.

Use with AI

Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.

Check

Verify implementation

Check all `<object>` elements in the HTML to ensure they contain descriptive fallback content.

Fix

Auto-fix issues

Add alternative text or a semantic fallback inside the `<object>` tags.

Explain

Learn more

Explain how fallback content in `<object>` tags helps users who cannot load or view the primary object content.

Review

Code review

Review the rendered markup and interactive states that affect Provide alternative text for objects. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

Sources

References used to support the guidance in this rule.

Further Reading

Tools and supplementary material for exploring the topic in more depth.

axe DevTools
deque.comTool

Rules that often go hand-in-hand with this one.

Provide titles for iframes and frames

iframes and frames must have a title attribute to describe their content.

Accessibility
Provide sufficient touch target size

Interactive elements must have large enough touch targets so users with motor impairments can activate them accurately on touchscreen devices.

Accessibility
Provide visible custom focus indicators

Ensure all interactive elements have a clearly visible focus indicator for keyboard navigation — never just remove the default outline without providing a better alternative.

CSS
Use exactly one main landmark

Each page must have one and only one main landmark.

Accessibility

Was this rule helpful?

Your feedback helps improve rule quality. This stays internal for now.

Loading feedback...
0 / 385