aria-conditional-attr

aria-errormessage requires aria-invalid to be set to a non-false value

automaticWCAG 4.1.2 (A)confidence: highseverity: moderaterobust

Checks that elements with aria-errormessage also have aria-invalid set to "true", "grammar", or "spelling"; otherwise the error message is dropped from the accessibility tree.

Applies to. Elements with a non-empty aria-errormessage attribute.

Expectation. Per the ARIA specification, aria-errormessage is only exposed to assistive technology when aria-invalid is present with a value other than "false" (i.e. "true", "grammar", or "spelling"). An element with aria-errormessage but aria-invalid absent or "false" silently drops the error message from the accessibility tree, authors almost always intend it to be exposed. Reported at CANTTELL rather than FAIL: aria-errormessage is only exposed once aria-invalid is set, so the reference is currently inert. Whether that costs the user anything depends on whether the message is conveyed some other way (visible text next to the field, aria-describedby), which static markup does not settle.

What a finding reports.

  • ariaInvalid: the element's aria-invalid value, lowercased; an empty string when the attribute is absent.

These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.

Examples

pass
<input type="text" aria-invalid="true" aria-errormessage="err1">
<span id="err1">Enter a valid email address.</span>

aria-invalid="true" means aria-errormessage is actually exposed to assistive technology.

can't tell
<input type="text" aria-errormessage="err1">
<span id="err1">Enter a valid email address.</span>

Without aria-invalid set to a non-"false" value, aria-errormessage is never exposed — the reference is currently inert.

How to check

When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.

ARIA_ERRORMESSAGE_WITHOUT_TRUTHY_INVALID

  1. Inspect the field the report names and note the id in its aria-errormessage.
  2. Enter an invalid value (or leave a required field empty) and submit or leave the field, so any error appears.
  3. Look whether the element with that id now shows error text, and inspect the field again for aria-invalid="true".
  4. With a screen reader, move back to the field and listen for the error message.
  5. If you don't hear the error on the field, check whether the page reads it out another way, for example as soon as the message appears, without you moving focus. It only counts if the screen reader announces the whole message.

Pass. When the error is shown, the screen reader announces it, either on the field (aria-invalid="true" or the message in aria-describedby) or as soon as it appears; when no error is shown, nothing needs exposing.

Fail. Error text is visible but aria-invalid stays absent or false, and the screen reader announces the message neither on the field nor when it appears, which fails WCAG 3.3.1 / 4.1.2 (see ARIA21).

View source