How to fix aria required attr on Adobe Commerce (Magento)

Steps for Adobe Commerce (Magento)

1. Identify the template file responsible for the flagged element: use the browser's DevTools to find a unique class or string, then search your theme under `app/design/frontend/<Vendor>/<Theme>/` using `grep -r 'role=' .`
2. Copy the core template into your custom theme following Magento's template override convention (mirror the module path under your theme directory) to avoid editing core files.
3. In the overridden `.phtml` template, add the missing required attribute to the HTML element, e.g., `<div role="heading" aria-level="2">`.
4. If the violation is in a UI Component (`.html` KnockoutJS template), locate it under `Magento_*/view/frontend/web/template/` and apply the same override pattern.
5. Run `bin/magento cache:clean` and `bin/magento setup:static-content:deploy`, then verify with axe DevTools.

<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.