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

Input fields with invalid inputs and corresponding aria-invalid attributes are linked to their corresponding error messages using aria-errormessage, or a combination of aria-invalid and aria-describedby is used.

This test case uses a combination of aria-invalid + aria-errormessage. Note that, when referenced correctly, a combination of aria-invalid + aria-describedby is also valid for associating error messages.


Referenced element inside an aria-hidden ancestor:

This erroneous input references an element via aria-errormessage, but the referenced element sits inside a container with aria-hidden="true".



Note: Possible to automatically test. An auto-test can verify that the element referenced by aria-errormessage exists and is not contained within an ancestor that has aria-hidden="true".

axe detected: 4.1.2  |  QualWeb detected: none