Aria valid attr value
Moderate effortFound on 8% of audited stores.
Audit every ARIA attribute on your pages and correct any that have invalid or mismatched values so assistive technologies can interpret them correctly.
What it is
ARIA (Accessible Rich Internet Applications) attributes are special HTML attributes — like `aria-label`, `aria-expanded`, `aria-describedby`, and dozens of others — that give screen readers and other assistive technologies extra information about what an element is and how it behaves. Every ARIA attribute has a strict set of allowed values defined by the ARIA specification. For example, `aria-expanded` must be `"true"` or `"false"`, and `aria-describedby` must point to a real element ID that actually exists on the page. An "invalid attribute value" means one of these attributes has been given a value that doesn't match the rules — such as a typo, a number where a true/false is expected, or a reference to an ID that doesn't exist.
Why it matters
When an ARIA attribute carries an invalid value, screen readers either ignore it entirely or misread the element to the user — for example, announcing a navigation menu as always collapsed, or linking a form field to a description that doesn't exist. This directly breaks the experience for blind and low-vision shoppers, which can cost you sales from that audience. More critically, WCAG 4.1.2 (Name, Role, Value) is a Level AA requirement in most jurisdictions — including the EU's EAA (enforceable from June 2025), the US ADA, and the UK's PSBAR — meaning non-compliance creates real legal exposure and risk of accessibility lawsuits. Google also evaluates accessibility signals as part of overall quality, so repeated failures can suppress organic rankings and reduce trust signals.
How to fix it
- Open your browser's developer tools (F12) and run an accessibility audit (Lighthouse or axe DevTools extension) to get a full list of elements with invalid ARIA attribute values.
- For each flagged element, inspect the specific attribute and its current value — for example, `aria-expanded='2'` or `aria-describedby='nonexistent-id'`.
- Look up the correct allowed values for that attribute in the ARIA specification: boolean attributes like `aria-expanded`, `aria-checked`, `aria-hidden`, and `aria-pressed` must be exactly `"true"` or `"false"` (as strings); ID-reference attributes like `aria-describedby`, `aria-labelledby`, and `aria-controls` must exactly match the `id` of an existing element on the same page.
- Edit the theme, template, or widget code where the attribute is set — correct the value to one that the ARIA spec permits (e.g. change `aria-expanded='1'` to `aria-expanded='false'`, or add the missing target element with the matching `id`).
- Re-run the accessibility audit in your browser to confirm the flagged elements no longer appear in the report.
- Add this check to your routine quality process: whenever you install a new app, plugin, or theme section, run an axe or Lighthouse scan to catch any new ARIA value errors before they go live.
<button aria-expanded="false" aria-controls="nav-menu">Menu</button>
<nav id="nav-menu"><!-- links --></nav>Fix it on your platform
Pick your platform for the exact steps.
How to fix aria valid attr value on Shopify
- In your Shopify admin, go to Online Store → Themes → click 'Customize' on your active theme.
- To edit code directly: Online Store → Themes → Actions → Edit code.
- Locate the Liquid template or section file containing the flagged element (e.g. `sections/header.liquid`, `snippets/product-form.liquid`).
- Search (Ctrl+F / Cmd+F) for the invalid aria attribute name (e.g. `aria-expanded`, `aria-describedby`) and correct the value.
- If the invalid value is injected by a third-party Shopify app, check the app's settings or contact the app developer — you cannot edit app-injected code directly.
- Save changes, then verify with the axe DevTools browser extension or Lighthouse on a live preview.
How to fix aria valid attr value on WooCommerce
- In WordPress admin, go to Appearance → Theme File Editor (or use a child theme via FTP/SFTP).
- Identify which template file renders the flagged element — common locations: `header.php`, `functions.php`, a block template in `/templates/`, or a page builder shortcode output.
- Search for the invalid ARIA attribute and correct its value in the template file.
- If the issue comes from a plugin (e.g. a slider, mega-menu, or product tabs plugin), go to the plugin's settings page or contact the plugin author — some plugins allow custom HTML/attribute overrides via hooks in `functions.php`.
- Use the WP Accessibility plugin (free, wordpress.org) to catch additional ARIA issues site-wide.
- Verify the fix with Lighthouse (Chrome DevTools → Lighthouse tab → Accessibility) or the axe browser extension.
How to fix aria valid attr value on BigCommerce
- In your BigCommerce control panel, go to Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' on your active theme.
- Locate the relevant Handlebars template (`.html` files under `templates/components/` or `templates/pages/`) that renders the flagged element.
- Search for the ARIA attribute name and correct its value.
- If the issue is inside a widget placed via Page Builder, go to the storefront Page Builder, select the widget, and edit its HTML/custom code field.
- Commit your changes and preview the storefront, then verify with the axe DevTools browser extension.
How to fix aria valid attr value on Wix
- Open the Wix Editor for the relevant page.
- Click the element flagged in the accessibility audit to select it.
- Open its Settings or Accessibility panel — some Wix components expose ARIA label fields here; correct any mis-filled value.
- For custom HTML elements added via the Wix HTML iframe widget (Add → Embed → Custom Code), click the widget and select 'Enter Code' to edit the raw HTML/JS and fix the ARIA attribute value.
- If the issue is inside a Wix app (e.g. Wix Stores product page, Wix Bookings), the ARIA output is controlled by Wix — report the issue via the Wix Accessibility feedback channel, as third-party app code cannot be edited directly.
- Publish and re-verify with the axe DevTools browser extension on the live URL.
How to fix aria valid attr value on Squarespace
- In the Squarespace editor, go to Pages → select the page → click 'Edit'.
- Click the block containing the flagged element and open its block settings.
- For Code Blocks (Insert Point → Code): edit the raw HTML directly and correct the ARIA attribute value.
- For built-in Squarespace blocks (e.g. navigation, accordion), ARIA is auto-generated by Squarespace — go to Website → Website Tools → Custom CSS or inject a fix via Settings → Advanced → Code Injection (Header) using JavaScript to correct the attribute at runtime.
- For theme-level fixes, go to Design → Custom CSS or use a Developer platform site with Git integration to edit template files.
- Verify with Lighthouse (Chrome DevTools) or the axe browser extension after publishing.
How to fix aria valid attr value on Webflow
- Open the Webflow Designer and select the element flagged in the accessibility audit.
- In the right-hand panel, open the Element Settings (gear icon) → scroll to 'Custom Attributes'.
- Find the ARIA attribute with the invalid value in the custom attributes list, click it, and correct the value to the valid string.
- For ARIA attributes that Webflow sets automatically (e.g. on its Navbar, Tabs, or Accordion components), these are controlled by Webflow's built-in interactions — check that the component's initial state matches the ARIA value (e.g. a collapsed tab should have `aria-expanded='false'`).
- Publish the site and verify with the axe DevTools browser extension or Lighthouse.
How to fix aria valid attr value on Adobe Commerce (Magento)
- Identify which `.phtml` template or `.html` Knockout/RequireJS template renders the flagged element — use browser DevTools to inspect the element and note any identifying class or data attribute.
- Locate the file under `app/design/frontend/<Vendor>/<Theme>/` (custom theme) or the relevant module's `view/frontend/templates/` directory.
- Open the file and search for the ARIA attribute, then correct its value to the valid string or fix the `id` reference.
- If the issue is in a JavaScript component (e.g. a dropdown or modal using ui-component), find the relevant `.js` file and correct the attribute value set via `ko` bindings or DOM manipulation.
- Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` after changes, then verify with the axe browser extension on the storefront.
How to fix aria valid attr value on Wix Studio
- Open Wix Studio and navigate to the page with the failing element.
- Select the element on the canvas, then open its Accessibility Settings panel to review and correct any label or description values that map to ARIA attributes.
- For custom code using Velo, open the Code panel for the page or site, find the relevant $w() call where the ARIA attribute is set, and correct the value.
- Publish and verify with the axe browser extension.
How to fix aria valid attr value on PrestaShop
- In your PrestaShop back office, go to Design → Theme & Logo → click 'Use this theme' or navigate to your active theme's files via FTP.
- In your active child theme folder (themes/<your-theme>/), search all .tpl (Smarty template) files for ARIA attributes using a code editor.
- Correct ID-reference mismatches and invalid keyword values directly in the template files.
- Clear the theme cache via Design → Theme & Logo → Advanced Settings → Clear cache, then retest with axe DevTools.
Does your site have this issue?
Run a free SEOLZ scan to find aria valid attr value — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Aria valid attr value?
ARIA (Accessible Rich Internet Applications) attributes are special HTML attributes — like `aria-label`, `aria-expanded`, `aria-describedby`, and dozens of others — that give screen readers and other assistive technologies extra information about what an element is and how it behaves. Every ARIA attribute has a strict set of allowed values defined by the ARIA specification. For example, `aria-expanded` must be `"true"` or `"false"`, and `aria-describedby` must point to a real element ID that actually exists on the page. An "invalid attribute value" means one of these attributes has been given a value that doesn't match the rules — such as a typo, a number where a true/false is expected, or a reference to an ID that doesn't exist.
Why does aria valid attr value matter?
When an ARIA attribute carries an invalid value, screen readers either ignore it entirely or misread the element to the user — for example, announcing a navigation menu as always collapsed, or linking a form field to a description that doesn't exist. This directly breaks the experience for blind and low-vision shoppers, which can cost you sales from that audience. More critically, WCAG 4.1.2 (Name, Role, Value) is a Level AA requirement in most jurisdictions — including the EU's EAA (enforceable from June 2025), the US ADA, and the UK's PSBAR — meaning non-compliance creates real legal exposure and risk of accessibility lawsuits. Google also evaluates accessibility signals as part of overall quality, so repeated failures can suppress organic rankings and reduce trust signals.
How do I fix aria valid attr value?
Audit every ARIA attribute on your pages and correct any that have invalid or mismatched values so assistive technologies can interpret them correctly.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN