Aria valid attr
Quick winFound on 2% of audited stores.
Find and replace every misspelled or non-existent ARIA attribute name (e.g. `aria-labeledby`) with the correct, spec-defined name (e.g. `aria-labelledby`) across your entire site's HTML and templates.
What it is
ARIA (Accessible Rich Internet Applications) attributes are special HTML attributes — like `aria-label`, `aria-labelledby`, or `aria-hidden` — that tell screen readers and other assistive technologies what an element is and how it behaves. Every valid ARIA attribute has an exact, officially defined name. An "invalid ARIA attribute name" means your HTML contains an ARIA attribute that doesn't exist in the official specification — most commonly a typo like `aria-labeledby` (one 'l' instead of two) instead of `aria-labelledby`. Because the attribute name is wrong, the browser and assistive technology silently ignore it entirely, as if it were never there.
Why it matters
When an ARIA attribute name is misspelled, screen readers receive no accessibility information from it — the element appears unlabelled or unidentifiable to blind and low-vision shoppers. This directly harms the shopping experience for millions of people with disabilities and puts your store at legal risk under laws like the ADA (US), AODA (Canada), EAA (EU), and Equality Act (UK), all of which reference WCAG 2.x conformance. Accessibility lawsuits targeting online stores have increased sharply year over year, and a simple typo is exactly the kind of findable, actionable violation that appears in demand letters. Fixing it is quick and meaningfully improves usability for customers using assistive technology, which can also improve conversion rates in that segment.
How to fix it
- Identify every instance of the invalid attribute name by searching your theme files, template code, and any custom JavaScript or HTML blocks for the misspelled attribute (e.g. search globally for `aria-labeledby` and any other flagged names).
- Cross-reference each found attribute against the official ARIA specification attribute list — the most common fix is correcting `aria-labeledby` → `aria-labelledby` (double 'l'), but also check for other typos like `aria-role` (should be just `role`) or `aria-required` being confused with `required`.
- Replace every instance of the invalid attribute name with the correctly spelled, spec-defined name, preserving the attribute's value exactly as-is.
- If the invalid ARIA attribute appears inside a third-party app, widget, or plugin, update that component or report the bug to the vendor — do not just wrap or override it, as the invalid attribute will still be present in the DOM.
- After making changes, re-scan the page using a browser accessibility checker (e.g. axe DevTools browser extension) to confirm zero remaining `aria-valid-attr` violations.
- Spot-check with a screen reader (NVDA + Firefox on Windows, or VoiceOver + Safari on Mac/iOS) to confirm the newly labelled element is announced correctly.
Fix it on your platform
Pick your platform for the exact steps.
How to fix aria valid attr on Shopify
- In your Shopify admin, go to Online Store → Themes → (your active theme) → Actions → Edit code.
- Use the search icon (magnifying glass) at the top of the file list to search across all theme files for the misspelled attribute, e.g. `aria-labeledby`.
- Open each file that contains the misspelling (commonly in Sections, Snippets, or Layout files like `theme.liquid`).
- Correct the attribute name in each file (e.g. change `aria-labeledby` to `aria-labelledby`) and click Save.
- If the issue is inside a Shopify App embed or App Block, contact the app developer — you cannot edit third-party app output directly.
- Preview your theme and use the axe DevTools browser extension to verify the violation is resolved before publishing.
How to fix aria valid attr on WooCommerce
- In your WordPress admin, go to Appearance → Theme File Editor (or use a code editor like VS Code connected via FTP/SFTP).
- Search your active theme's files (especially `header.php`, `footer.php`, `functions.php`, and any custom page templates) for the misspelled attribute using a global find (Ctrl+Shift+F in VS Code).
- Also search any active plugins' output — if the invalid attribute comes from a plugin, update the plugin first; if it persists, contact the plugin developer.
- Correct every instance of the misspelled attribute and save the file.
- If you use a page builder (Elementor, Divi, WPBakery), open the affected page in the builder and look for any custom HTML/code blocks containing the invalid attribute, then correct it there.
- Flush any caching plugin (e.g. WP Rocket, W3 Total Cache) after saving, then re-scan with axe DevTools.
How to fix aria valid attr on BigCommerce
- In your BigCommerce admin, go to Storefront → Themes → (your active theme) → Advanced → Edit Theme Files.
- Use the search functionality or download the theme as a ZIP file and open it in a code editor (VS Code) to run a global search for the misspelled attribute (e.g. `aria-labeledby`).
- Locate the relevant template files (commonly in `templates/components/`, `templates/layout/`, or `templates/pages/`) and correct the attribute name.
- If using Stencil CLI locally, run a global find-and-replace, then `stencil push` to deploy the corrected theme.
- For issues inside a third-party widget or script injected via Script Manager (Storefront → Script Manager), edit the script directly in the Script Manager editor.
- After deploying, verify using the axe DevTools browser extension on a live storefront page.
How to fix aria valid attr on Wix
- Open the Wix Editor for your site.
- If the invalid ARIA attribute is in a custom HTML element, click on that element → Settings → and edit the HTML/JavaScript code directly to correct the attribute name.
- If it is in a Wix Velo (code) file, open the Dev Mode panel (turn on Dev Mode if not already active) and search your page or site code files for the misspelled attribute.
- Correct the attribute name in the code and publish your site.
- If the issue originates from a Wix App or a Wix-native widget (e.g. Wix Stores product gallery), you cannot edit that output directly — report it to Wix Support or the app developer via the Wix App Market.
- After publishing, use the axe DevTools extension on your live site to confirm the fix.
How to fix aria valid attr on Squarespace
- In your Squarespace admin, go to Website → Pages and navigate to the affected page.
- If the invalid ARIA attribute is in a Code Block or Embed Block, click to edit that block and correct the attribute name in the HTML.
- If it is in site-wide custom code, go to Settings → Advanced → Code Injection and search the Header or Footer injection fields for the misspelled attribute.
- For theme-level customisation (available on Business plan and above), go to Design → Custom CSS — note that CSS cannot fix an invalid HTML attribute name; you must find the HTML source.
- Squarespace's own native components cannot be directly edited for ARIA attributes — if the violation is inside a Squarespace-native block, report it to Squarespace Support.
- After saving and publishing, verify with the axe DevTools browser extension.
How to fix aria valid attr on Webflow
- Open your project in the Webflow Designer.
- Select the element that has the invalid ARIA attribute (use the Navigator panel to locate it).
- In the right-hand Settings panel (gear icon), scroll down to 'Custom Attributes'. Find the misspelled attribute entry (e.g. `aria-labeledby`) and correct the Name field to the proper spelling (e.g. `aria-labelledby`). Do not change the Value.
- If the attribute appears in a Symbol or Component, open the Symbol/Component in edit mode and apply the same correction there so all instances are updated.
- For custom code embeds (HTML Embed elements), click the element → Settings → open the embed code editor and correct the attribute name in the raw HTML.
- Publish the site and verify using axe DevTools in the browser.
How to fix aria valid attr on Adobe Commerce (Magento)
- Connect to your server via SSH or use your IDE with SFTP access to your Magento installation.
- Run a global search across your active theme directory (`app/design/frontend/<Vendor>/<theme>/`) for the misspelled attribute: `grep -r 'aria-labeledby' app/design/`
- Also search core overrides and any custom modules: `grep -r 'aria-labeledby' app/code/`
- Open each affected `.phtml` or `.html` (KnockoutJS template) file and correct the attribute name.
- If the issue is in a vendor module under `vendor/`, do not edit it directly — create a theme override or module override in `app/design/` or `app/code/` respectively.
- Run `bin/magento cache:flush` and `bin/magento setup:static-content:deploy` after making changes, then re-scan with axe DevTools on the live or staging environment.
How to fix aria valid attr on Headless / Custom (I build in code)
- Run a global find-and-replace in your repository for the misspelled attribute string (e.g. `aria-labeledby`) using your IDE or the command line: `grep -r 'aria-labeledby' ./src`
- Replace every occurrence with the correctly spelled attribute (e.g. `aria-labelledby`), including inside JSX (`aria-labelledby={...}`), Vue templates, Handlebars, Nunjucks, or any other templating language in use.
- Check generated or dynamic HTML produced by JavaScript — search component files for the attribute being set via `element.setAttribute('aria-labeledby', ...)` and correct the string argument.
- Commit the changes, run your build, and deploy.
- Add a linting rule to catch future regressions: eslint-plugin-jsx-a11y (React) or axe-linter will flag invalid ARIA attribute names at development time.
- Verify the fix in the browser using the axe DevTools extension or by running `axe(document)` in the browser console.
Does your site have this issue?
Run a free SEOLZ scan to find aria valid attr — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
What is Aria valid attr?
ARIA (Accessible Rich Internet Applications) attributes are special HTML attributes — like `aria-label`, `aria-labelledby`, or `aria-hidden` — that tell screen readers and other assistive technologies what an element is and how it behaves. Every valid ARIA attribute has an exact, officially defined name. An "invalid ARIA attribute name" means your HTML contains an ARIA attribute that doesn't exist in the official specification — most commonly a typo like `aria-labeledby` (one 'l' instead of two) instead of `aria-labelledby`. Because the attribute name is wrong, the browser and assistive technology silently ignore it entirely, as if it were never there.
Why does aria valid attr matter?
When an ARIA attribute name is misspelled, screen readers receive no accessibility information from it — the element appears unlabelled or unidentifiable to blind and low-vision shoppers. This directly harms the shopping experience for millions of people with disabilities and puts your store at legal risk under laws like the ADA (US), AODA (Canada), EAA (EU), and Equality Act (UK), all of which reference WCAG 2.x conformance. Accessibility lawsuits targeting online stores have increased sharply year over year, and a simple typo is exactly the kind of findable, actionable violation that appears in demand letters. Fixing it is quick and meaningfully improves usability for customers using assistive technology, which can also improve conversion rates in that segment.
How do I fix aria valid attr?
Find and replace every misspelled or non-existent ARIA attribute name (e.g. `aria-labeledby`) with the correct, spec-defined name (e.g. `aria-labelledby`) across your entire site's HTML and templates.
Authoritative references
- How to fix this specific rule — Deque/axe (rule reference)
- WCAG 2 overview — W3C WAI
- ARIA basics — MDN