« Back to home

Testing aria-invalid

aria-invalid="false"

Used when the there are no detected errors in the value. This is the default.

<label for="aaa">Name</label>
<input id="aaa" aria-invalid="false">

aria-invalid="true"

Used when the value entered by the user has failed validation.

<label for="bbb">Name</label>
<input id="bbb" aria-invalid="true">

aria-invalid="grammar"

Used when a grammatical error was detected.

<label for="ccc">Name</label>
<input id="ccc" aria-invalid="grammar">

aria-invalid="spelling"

Used when a spelling error was detected.

<label for="ddd">Name</label>
<input id="ddd" aria-invalid="spelling">

A note on grammar and spelling

Current support: aria-invalid="grammar" and aria-invalid="spelling" are recognised by modern browsers and assistive technologies. However, support is inconsistent: VoiceOver and NVDA announce the specific error type, while JAWS announces only a generic invalid state and does not distinguish between grammar, spelling and other validation errors.

Invalid value

Any value other than false, true, grammar or spelling is not recognised by the ARIA specification.

<label for="eee">Name</label>
<input id="eee" aria-invalid="yes">

Empty value

An empty aria-invalid attribute is not a recognised value and will be flagged as invalid.

<label for="fff">Name</label>
<input id="fff" aria-invalid="">

« Back to home