Aria-errormessage link for input fields (aria-invalid)

Custom input fields or input fields with novalidate attribute include a valid aria-invalid attribute that corresponds with the state of the field.

This test case uses a combination of aria-describedby and aria-invalid (which has an invalid value) to programmatically link the error message to the input field. Please note that when aria-invalid is used, aria-errormessage can be used instead of aria-describeby to programmatically link error messages.

Invalid aria invalid

This erroneous input field has an aria-invalid attribute with an invalid value (aria-invalid="invalid"):


Note: Possible to automatically test. An auto-test can be performed by programmatically checking if all aria-invalid attributes have valid values (true or false).

axe detected: 4.1.2  |  QualWeb detected: 4.1.2