This is a companion page for the article Inclusive Inputs demoing different states of inputs. Poke around the different inputs with your favourite Accessibility Dev Tools and Screen Reader to discover them.
Please do not use this. Input and Label are not associated and as such the Input has no accessible name.
Input and Label are not associated by adding the ID of the Input as the
value of the label’s
The label has invisible test inside of it to enhance the meaning of it.
The * is hidden with
In this example the description isn’t associated with the input.
aria-describedby the descriptive text will be
announced by screen readers.
The following input uses
aria-describedby to link both the
error message and the descriptive text.
This input also uses
aria-invalid to communicate that it is