How to fix aria required attr on Shopify

Steps for Shopify

1. In your Shopify Admin, go to Online Store → Themes → click the three-dot menu next to your active theme → Edit code.
2. Use the search box (top of the file list) to search for 'role=' across all Liquid template files (.liquid) to find every element using an ARIA role.
3. For each `role="heading"` without `aria-level`, add the attribute: `aria-level="2"` (or the appropriate level). If the element is already an `<h1>`–`<h6>` tag, remove the redundant `role` attribute instead.
4. For third-party app sections (e.g., review widgets, sliders), contact the app developer or override the rendered HTML in the section's Liquid file if accessible.
5. Save each file and preview the storefront; re-run axe DevTools in the browser to confirm the violation is resolved.

<div role="heading" aria-level="2">Featured Products</div>

<!-- Better: use native HTML which never needs aria-level -->
<h2>Featured Products</h2>

<!-- Slider example: all three value attributes required -->
<div role="slider"
     aria-valuenow="50"
     aria-valuemin="0"
     aria-valuemax="100"
     aria-label="Price range">
</div>

What is aria required attr?

ARIA (Accessible Rich Internet Applications) roles tell screen readers and assistive technologies what a piece of content is — for example, a heading, a slider, or a tree item. Many ARIA roles come with required attributes that must be present for the role to make sense. For instance, any element with `role="heading"` must also have `aria-level` (a number from 1–6) so assistive technology knows whether it's a top-level heading or a sub-heading. When a required attribute is missing, the ARIA role is effectively broken — like labelling a shelf "Aisle 3" but leaving out the aisle number.

Screen reader users — who are often unable to use a mouse and rely entirely on assistive technology — receive garbled or meaningless announcements when required ARIA attributes are absent. This directly blocks those users from understanding your page structure, navigating your store, or completing a purchase. Under WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value), all user interface components must expose correct role information to assistive technology; failing this criterion creates legal accessibility risk in the US (ADA), UK (Equality Act), EU (EAA), and beyond. Search engines also parse page structure using semantic signals — broken heading hierarchies and malformed ARIA can weaken how Googlebot understands and ranks your content.

See the complete Aria required attr guide for every platform and the full background.