Object alt

Quick win

Found on 1% of audited stores.

Add a meaningful text alternative (via `title` attribute or `aria-label`) to every `<object>` element so screen readers can describe its content to users who cannot see it.

What it is

An HTML `<object>` element 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>` — has a text alternative that describes what it contains or does. When an `<object>` has no `title` attribute and no `aria-label`, screen readers (used by blind and low-vision shoppers) have nothing to announce, so that content is invisible to them. The fix is simple: add a short, descriptive label directly to the element.

Why it matters

Failing WCAG 1.1.1 is one of the most commonly cited violations in accessibility audits and lawsuits — in the US (ADA), EU (EAA/EN 301 549), and other jurisdictions, online stores are increasingly required to be accessible. A missing text alternative on an embedded product brochure, size guide PDF, or interactive viewer means blind customers cannot access that content at all, directly harming conversions and creating legal exposure. Google also uses accessibility signals as a quality indicator, and unresolvable non-text content can limit how well your pages are crawled and understood. Fixing it takes under five minutes per element and eliminates both the compliance risk and the customer experience gap.

How to fix it

  1. Identify every <object> element on the page — common uses include embedded PDFs, SVG diagrams, Flash/Shockwave embeds, and interactive product viewers.
  2. Write a concise, descriptive label for each one that explains what the embedded content IS or DOES (e.g., 'Winter 2024 Product Catalog PDF', 'Interactive 3D shoe viewer'). Do not use vague labels like 'object' or 'file'.
  3. Add a `title` attribute directly to the <object> tag: <object data='catalog.pdf' type='application/pdf' title='Winter 2024 Product Catalog PDF'>. This is the primary, most widely supported method.
  4. If you are already using ARIA on the element, you may alternatively add `aria-label='Winter 2024 Product Catalog PDF'` to the tag — but `title` alone is sufficient and preferred for <object>.
  5. If the embedded content is purely decorative (no information is lost if a user cannot see it), hide it from assistive technology using `aria-hidden='true'` instead of adding a label.
  6. Validate the fix using a browser-based accessibility checker (e.g., axe DevTools browser extension) to confirm the rule passes before publishing.

Fix it on your platform

Pick your platform for the exact steps.

How to fix object alt on Shopify
  1. In the Shopify Admin, go to Online Store → Themes → and click 'Customize' (or 'Edit code' for direct file edits).
  2. If the <object> is in a theme section or snippet, click 'Edit code', then open the relevant .liquid file under Sections/, Snippets/, or Templates/.
  3. Locate the <object> tag in the Liquid/HTML source.
  4. Add a `title` attribute: e.g., change `<object data='...' type='...'>` to `<object data='...' type='...' title='Descriptive label here'>`.
  5. If the <object> is embedded via a Custom HTML block in the page editor (Online Store → Pages → Edit), switch to the HTML view of the rich-text editor and add the `title` attribute there.
  6. Save the file or block, then preview the page and validate with the axe DevTools browser extension.
Full Shopify guide →Official Shopify docs ↗
How to fix object alt on WooCommerce
  1. Log in to WordPress Admin and go to Appearance → Theme File Editor (or use a code editor via FTP/SSH).
  2. If the <object> is in a page or post, edit that content in the Block Editor: find the Custom HTML block or Classic block containing the <object> tag and add the `title` attribute directly.
  3. If it is in a theme template file (e.g., single-product.php, page.php), open that file and add `title='Descriptive label'` to the <object> tag.
  4. If the <object> is injected by a plugin (e.g., a PDF viewer plugin), check that plugin's settings for a 'title' or 'label' field, or use a Code Snippets plugin to filter the output.
  5. Save changes, clear any caching plugin cache (e.g., WP Rocket, W3 Total Cache), and verify with axe DevTools.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix object alt on BigCommerce
  1. In the BigCommerce Control Panel, go to Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' for your active theme.
  2. Browse to the relevant template file (e.g., templates/pages/product.html or a custom partial) and locate the <object> element.
  3. Add `title='Descriptive label here'` to the opening <object> tag.
  4. If the <object> appears in a page built with the Page Builder (Content → Web Pages), edit that page, find the HTML widget containing the <object>, and add the `title` attribute in the HTML source view.
  5. Save and publish, then verify using the axe DevTools browser extension on the live or preview URL.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix object alt on Wix
  1. Open the Wix Editor for your site.
  2. If the <object> was added via an Embed HTML widget (the 'Embed & Social' → 'HTML iFrame' element), click the widget, then click 'Enter Code' to open the HTML editor.
  3. In the HTML source, locate the <object> tag and add `title='Descriptive label here'` to it.
  4. Click 'Update' to apply the change.
  5. Note: Wix's standard components do not emit <object> tags — this issue most commonly arises from custom HTML embeds. If you cannot find it in an HTML widget, check any custom-coded Velo pages under the 'Dev Mode' tab.
  6. Preview the page and validate with axe DevTools.
Full Wix guide →Official Wix docs ↗
How to fix object alt on Squarespace
  1. In the Squarespace Editor, navigate to the page containing the embedded object.
  2. If the <object> is inside a Code Block, click the block to edit it, then find the <object> tag in the code and add `title='Descriptive label here'`.
  3. If it is in a Markdown Block with embedded HTML, switch to the HTML view and add the `title` attribute.
  4. For site-wide code injected via Settings → Advanced → Code Injection, edit the relevant script/HTML snippet there.
  5. Save the block or injection, then publish and verify with the axe DevTools browser extension.
Full Squarespace guide →Official Squarespace docs ↗
How to fix object alt on Webflow
  1. Open your project in the Webflow Designer.
  2. Locate the page containing the <object> element. Webflow's built-in components do not produce <object> tags, so this is almost certainly inside an Embed element.
  3. Click the Embed element on the canvas, then click the '</>' icon to open the HTML Embed Code Editor.
  4. In the code, find the <object> tag and add `title='Descriptive label here'` to it.
  5. Click 'Save & Close', then publish the site.
  6. Verify the fix using the axe DevTools browser extension on the published URL.
Full Webflow guide →Official Webflow docs ↗
How to fix object alt on Adobe Commerce (Magento)
  1. Access your Magento installation via FTP/SSH or the Admin panel's built-in editor.
  2. Identify the template file containing the <object> tag. Common locations: app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/ or a custom module's templates/ directory.
  3. Open the .phtml file and locate the <object> element.
  4. Add `title='<?= $block->escapeHtmlAttr(__('Descriptive label here')) ?>'` to the <object> tag, using Magento's escaping helper to prevent XSS.
  5. If the <object> is in a CMS Page or CMS Block (Content → Pages or Content → Blocks), edit that content, switch to HTML view in the editor, and add the `title` attribute.
  6. Clear the Magento cache (System → Cache Management → Flush Magento Cache), then verify with axe DevTools.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗

Does your site have this issue?

Run a free SEOLZ scan 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?

An HTML `<object>` element 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>` — has a text alternative that describes what it contains or does. When an `<object>` has no `title` attribute and no `aria-label`, screen readers (used by blind and low-vision shoppers) have nothing to announce, so that content is invisible to them. The fix is simple: add a short, descriptive label directly to the element.

Why does object alt matter?

Failing WCAG 1.1.1 is one of the most commonly cited violations in accessibility audits and lawsuits — in the US (ADA), EU (EAA/EN 301 549), and other jurisdictions, online stores are increasingly required to be accessible. A missing text alternative on an embedded product brochure, size guide PDF, or interactive viewer means blind customers cannot access that content at all, directly harming conversions and creating legal exposure. Google also uses accessibility signals as a quality indicator, and unresolvable non-text content can limit how well your pages are crawled and understood. Fixing it takes under five minutes per element and eliminates both the compliance risk and the customer experience gap.

How do I fix object alt?

Add a meaningful text alternative (via `title` attribute or `aria-label`) to every `<object>` element so screen readers can describe its content to users who cannot see it.

Authoritative references

Related Accessibility (WCAG) issues