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.

Testing home