In one paragraph
ARIA attributes must conform to valid values means a declared property's value failed a type or reference check. Use the tokens, numeric format, and relationships defined for that particular attribute. Then verify the value describes the real interface state. A syntactically accepted value can still be misleading, and the supplied checker can omit unresolved review cases from its report.
Why it matters
Each property has its own meaning and value type. aria-expanded does not use open or yes as substitutes for true. A numeric current value is not a percentage string with a percent sign, and an ID reference identifies elements rather than containing arbitrary visible text.
Validity is not only spelling. A valid false value can contradict an open panel, while a reference can point to an existing but unrelated element. Static parsers cannot establish every lifecycle relationship or meaningful state change.
Some properties define defaults or special values. A literal undefined token may be allowed in a particular vocabulary yet inappropriate for a real two-state toggle. Do not apply JavaScript truthiness or a generic string replacement across every ARIA property.
How WebAuditOS evaluates this finding
The supplied aria-valid-attr-value implementation validates recognised attributes against version-specific types and selected ID-reference conditions. It has documented exceptions for some collapsed or deferred targets, and some unresolved labelling or empty-value cases produce review rather than violations.
Critical impact maps to high severity. Its reference-list acceptance does not guarantee every listed ID is correct or meaningful, and the failures-only report excludes incomplete results. Evaluate actual relationships even when this particular check stays quiet.
How to fix it
- Read the exact attribute, role, and current state. Consult the property definition rather than copying the value from another widget with a similar appearance.
- Correct invalid tokens and units without changing intent. A toggle should express true or false when that is its actual supported state, not yes or open. Keep human-readable labels separate from machine state tokens.
- For a disclosure, a structural example is:
<button type="button" aria-expanded="false" aria-controls="details-panel">Details</button>
<div id="details-panel" hidden>Additional details</div>This fragment needs a real handler that updates visibility and expanded state together. A static valid value does not implement the disclosure action.
- Keep IDs unique and references current after conditional rendering. Check the open, closed, loading, removed, and restored states rather than simply manufacturing a hidden dummy target for a checker.
- Review numeric range properties with their actual role. Current values, limits, and readable value text have different purposes and defaults. A name describes what is measured; the numeric state describes its value.
- Connect error information deliberately. Ensure invalid state, visible explanation, and supported descriptive or error relationships remain consistent. Avoid treating a successful ID lookup as proof the error is communicated at the right time.
- Fix the source state model in the shared component. Do not let stale props or stringified JavaScript null-like values become an accidental accessibility contract.
- Rescan and inspect computed output during real interaction. Review incomplete results separately when available, and test names, role support, and required properties as distinct checks.
What the fix can break
Correcting a type can make a previously ignored declaration effective. If its meaning was wrong, users can now receive a clearly wrong state instead of no state. Verify behaviour after making syntax valid.
Removing a reference can eliminate a warning while losing a useful relationship. Repair the target and timing where appropriate rather than deleting everything the checker cannot resolve.
Do not assume all unknown aria-current strings or high heading levels have identical browser handling. Use property-specific guidance and recognise the difference between validation and user-agent error recovery.
Questions
Does a valid token prove the state is correct?
No. Compare it with visible content, native state, and actual behaviour before and after interaction.
Why did a missing label target not appear here?
The supplied rule can send that case to review; another name rule may detect the resulting missing name. Check computed output yourself.
Can I append a percent sign to aria-valuenow?
Use the numeric representation defined by the property. Put useful human wording in the appropriate value-text or interface content when needed.
Which related checks help?
Review attribute names, required properties, and ID uniqueness.
What severity does this get in the report?
High. An axe finding takes its severity from the impact axe reports for the element that failed, and the report maps critical and serious to high, moderate to medium, minor to low. This rule is declared critical in axe-core 4.13.0, so every failure arrives as high.