# axe-core aria-required-attr error missing required aria attribute - how to fix it

## TL;DR

Add the required attribute the role demands: aria-valuenow on sliders and progressbars, aria-expanded on disclosure buttons, and so on. Axe names the missing attribute in the failure summary, so add exactly that. One line of why: some roles are meaningless without their required state, a slider with no value is just a div to a screen reader.

## The error, verbatim

```text
{
  "id": "aria-required-attr",
  "impact": "critical",
  "help": "Required ARIA attributes must be provided",
  "nodes": [
    { "target": [".volume-slider"], "failureSummary": "Fix any of the following: Required ARIA attribute not present: aria-valuenow" }
  ]
}
```

## Fix it step by step

### Step 1: Reproduce on one page

```bash
npx @axe-core/cli https://example.com --rules aria-required-attr --save axe-req.json
```

Expected: Violations array contains aria-required-attr with the missing attribute named per node.

### Step 2: Extract the missing attributes

```bash
node -e "const r=require('./axe-req.json'); r.violations[0].nodes.forEach(function(n){console.log(n.target.join(' '), '-', n.failureSummary.match(/not present: ([\w-]+)/)[1])})"
```

Expected: Pairs each selector with the attribute it needs.

### Step 3: Find the widgets in source

```bash
rg -n 'role=.slider|role=.progressbar' src --glob '*.{jsx,tsx,vue}' | head -20
```

Expected: Shows the custom widgets missing their required attributes.

### Step 4: Add the attributes and re-scan

```bash
npx @axe-core/cli https://example.com --rules aria-required-attr
```

Expected: Exit code 0, 0 violations. The slider now announces its value as it moves.

### Step 5: Gate the rule in CI

```bash
npx @axe-core/cli https://example.com --exit | tail -3
```

Expected: Non-zero exit while any violation remains; add this command to CI so the fix never regresses.

## When to use this skill

- Your axe-core report lists this exact rule id under violations
- You are clearing automated WCAG 2.1 AA failures before a release or audit
- A CI a11y gate (pa11y-ci, lighthouse CI, cypress-axe) is red because of this rule

## When NOT to use this skill

- The issue only shows up in manual screen-reader testing and axe reports zero violations for the rule
- You are doing a full manual WCAG audit, this skill covers the single automated rule only
- The page is a third-party embed you cannot edit, flag it to the vendor instead

## Compatibility

axe-core 4.8+ (rule aria-required-attr, WCAG 4.1.2). Same rule in axe DevTools, pa11y, and cypress-axe. Pin the tool version in the lockfile so scans stay reproducible across machines.

## Variant phrasings

### required aria attribute not present aria-valuenow

The failureSummary wording for sliders and progressbars.

### axe custom slider missing aria attributes

The classic instance: hand-rolled range inputs.

### axe DevTools flags the same rule

The browser extension runs the same rule engine; fix once and it clears in every runner.

## Why it happens

Custom widgets copy the role but forget the required attributes that come with it: slider needs aria-valuenow (plus min and max), checkbox needs aria-checked, scrollbar needs its value set. Axe checks the required attribute list per role from the ARIA spec. Native inputs (input type range, input type checkbox) carry these semantics natively, which is why the rule almost always fires on custom-built widgets. The same violation usually repeats on every page built from the same template, so fix the component or template once instead of patching pages. After the fix, re-scan the whole site, not just the one page, to confirm the template-level change cleared them all.

## Edge cases

- aria-valuemin and aria-valuemax have defaults (0 and 100) but aria-valuenow has no default, it must be set and updated.
- If the widget state changes, update the attribute with it, a stale aria-valuenow fails the spirit of the rule even if axe passes.
- Consider native elements first: input type range with a label needs none of this.
- Fix every instance of the rule before moving on; a half-fixed rule across templates re-fails the next full scan.

## Provenance

Resolved from the public thread: https://vectle.com/posts/pst_vXiIxRSdQ2YOMzRCbZkzbw