SEOLZ

Object alt

Quick win

Add a descriptive text alternative to every `<object>` element so screen readers can convey its content to users who cannot see it.

What it is

The HTML `<object>` tag is used to embed content like PDFs, Flash files, SVGs, or other media directly in a web page. WCAG Success Criterion 1.1.1 ("Non-text Content") requires that every non-text element — including `<object>` embeds — has a meaningful text alternative that describes what it is or what it does. This alternative can be provided via an `aria-label` attribute, an `aria-labelledby` attribute pointing to visible text, or fallback text placed inside the `<object>` tag itself. Without one, the element is invisible to assistive technology.

Why it matters

Screen readers used by blind and low-vision shoppers will skip over or announce an `<object>` element as meaningless — saying something like "unlabelled graphic" or nothing at all — if it has no text alternative. This creates a broken experience for those customers: they may miss a product demo, an embedded PDF data sheet, or a promotional graphic, which can directly cost you sales. Legally, failing WCAG 1.1.1 exposes your store to accessibility complaints and lawsuits under the ADA (US), EAA (EU), AODA (Canada), and equivalent laws in many other countries. Search engines also use text alternatives as indexable content signals, so labelling embedded objects can marginally help SEO for the content they contain.

How to fix it

  1. Identify every `<object>` element on your page (PDFs, SVGs, legacy media players, etc.) using your browser's DevTools or a site search for the tag.
  2. Decide what the object communicates: if it conveys meaningful content (e.g. a product PDF, an infographic), write a concise description (like an alt text) — typically one sentence. If it is purely decorative, you still need to mark it explicitly.
  3. For a meaningful object, add `aria-label="Your descriptive text here"` directly to the opening `<object>` tag, OR add an `aria-labelledby="id-of-nearby-heading"` that references a visible heading or caption that already describes it.
  4. Alternatively (and as a good fallback for older assistive technology), place descriptive text or a link to the content between the opening and closing `<object>` tags — e.g. `<object ...>Download our product spec sheet (PDF)</object>`. Browsers show this fallback only when the object cannot render; screen readers may read it regardless.
  5. If the object is purely decorative and conveys no information, add `role="presentation"` to the `<object>` tag so assistive technology skips it entirely.
  6. Re-test with a free tool (axe DevTools browser extension, NVDA + Firefox, or VoiceOver on Mac/iOS) to confirm the object is now announced with a meaningful name.
<object data="product-spec.pdf" type="application/pdf" aria-label="Product specification sheet for Model X (PDF)">
  <a href="product-spec.pdf">Download the Product Specification Sheet for Model X (PDF)</a>
</object>

Fix it on your platform

Pick your platform for the exact steps.

How to fix object alt on Shopify
  1. In your Shopify admin, go to Online Store → Themes → click 'Customize' on your active theme.
  2. To edit raw HTML: go to Online Store → Themes → Actions → Edit code.
  3. Locate the template file that contains the `<object>` element (e.g. `sections/rich-text.liquid`, `templates/product.liquid`, or a custom section).
  4. Find the `<object>` tag and add `aria-label="Descriptive text here"` to its opening tag, and/or add fallback anchor/text between the open and close tags.
  5. If the `<object>` is embedded via a page's HTML content block (rich text), go to the page/product editor, switch the content field to HTML view (the `<>` icon in the rich text toolbar), and edit the tag there.
  6. Save your changes and verify with the axe DevTools browser extension.
Full Shopify guide →Official Shopify docs ↗
How to fix object alt on WooCommerce
  1. In your WordPress admin, go to the page or product that contains the `<object>` element (Pages, Products, or Posts → Edit).
  2. In the Gutenberg block editor, click the block containing the embed, then click the three-dot menu (⋮) → 'Edit as HTML' to access the raw markup.
  3. Add `aria-label="Descriptive text here"` to the `<object>` opening tag, and/or add fallback text/link between the tags.
  4. If the tag lives in your theme, navigate to Appearance → Theme File Editor and locate the relevant template file (e.g. `single-product.php` or a partial), make the edit there.
  5. For page-builder pages (Elementor, Divi), use the widget's 'Advanced → Custom Attributes' panel to add `aria-label` without touching code.
  6. Update/save and re-test with axe DevTools.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix object alt on BigCommerce
  1. In your BigCommerce admin, go to Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' on your active theme.
  2. Locate the relevant Handlebars template (e.g. `templates/pages/product.html` or a partial in `templates/components/`).
  3. Find the `<object>` tag and add `aria-label="Descriptive text here"` to it, and/or add descriptive fallback content between the tags.
  4. If the object is placed via a content page (Web Pages → Edit), click the HTML source button (`<>`) in the rich text editor and edit the tag directly.
  5. Save the file and preview the page; verify with the axe DevTools browser extension.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix object alt on Wix
  1. Wix does not use a standard `<object>` HTML element in its visual editor — embedded PDFs and media are handled via Wix's own embed widgets.
  2. If you have added an HTML embed (`+` → Embed → Custom Code or HTML iFrame), click the embed block to edit it, and add `aria-label` to any `<object>` tags inside your custom HTML.
  3. For a PDF viewer widget, check the widget's Settings panel for an 'Accessible label' or 'Title' field — fill it in with a descriptive name.
  4. For custom code injected via Settings → Custom Code (head/body), locate the snippet and edit the `<object>` tag to include `aria-label`.
  5. Publish the site and verify with axe DevTools or Wix's built-in accessibility checker (available in the editor toolbar).
Full Wix guide →Official Wix docs ↗
How to fix object alt on Squarespace
  1. In the Squarespace editor, click on the block that contains the embedded object (usually a Code Block or Embed Block).
  2. If it is a Code Block: click the pencil/edit icon, switch to 'HTML' mode, and add `aria-label="Descriptive text here"` to the `<object>` tag.
  3. If it is an Embed Block with a raw embed code, click the block → Edit → paste the corrected HTML with the `aria-label` attribute into the code field.
  4. For content injected via Settings → Advanced → Code Injection, find your `<object>` snippet and add the attribute there.
  5. Save and apply, then test with the axe DevTools browser extension in a preview or published view.
Full Squarespace guide →Official Squarespace docs ↗
How to fix object alt on Webflow
  1. In the Webflow Designer, select the Embed element that contains your `<object>` tag (or add one via Add Panel → Components → Embed).
  2. Click the Embed element to open its settings and view/edit the raw HTML code field.
  3. Add `aria-label="Descriptive text here"` to the `<object>` opening tag in that code field.
  4. Alternatively, if the `<object>` is part of a CMS Rich Text field, edit the field content in the CMS collection and switch to HTML view to add the attribute.
  5. Publish the site and verify using axe DevTools in the browser.
Full Webflow guide →Official Webflow docs ↗
How to fix object alt on Adobe Commerce (Magento)
  1. Connect to your server and locate the relevant PHTML template file (e.g. under `app/design/frontend/<Vendor>/<Theme>/Magento_Catalog/templates/` or a custom module's `view/frontend/templates/`).
  2. Find the `<object>` tag and add `aria-label="Descriptive text here"` to the opening tag; also add meaningful fallback text or a link between the open and close tags.
  3. If the object is placed via a CMS page or block: in the admin, go to Content → Pages (or Blocks) → Edit the relevant item → click 'Show/Hide Editor' to reveal the raw HTML, then edit the `<object>` tag.
  4. Clear the Magento cache: System → Cache Management → Flush Magento Cache (or run `bin/magento cache:flush` via CLI).
  5. Verify on the front end using the axe DevTools browser extension.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find object alt — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Object alt?

The HTML `<object>` tag is used to embed content like PDFs, Flash files, SVGs, or other media directly in a web page. WCAG Success Criterion 1.1.1 ("Non-text Content") requires that every non-text element — including `<object>` embeds — has a meaningful text alternative that describes what it is or what it does. This alternative can be provided via an `aria-label` attribute, an `aria-labelledby` attribute pointing to visible text, or fallback text placed inside the `<object>` tag itself. Without one, the element is invisible to assistive technology.

Why does object alt matter?

Screen readers used by blind and low-vision shoppers will skip over or announce an `<object>` element as meaningless — saying something like "unlabelled graphic" or nothing at all — if it has no text alternative. This creates a broken experience for those customers: they may miss a product demo, an embedded PDF data sheet, or a promotional graphic, which can directly cost you sales. Legally, failing WCAG 1.1.1 exposes your store to accessibility complaints and lawsuits under the ADA (US), EAA (EU), AODA (Canada), and equivalent laws in many other countries. Search engines also use text alternatives as indexable content signals, so labelling embedded objects can marginally help SEO for the content they contain.

How do I fix object alt?

Add a descriptive text alternative to every `<object>` element so screen readers can convey its content to users who cannot see it.

Authoritative references

Related Accessibility (WCAG) issues