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 for attribute.
The label has invisible test inside of it to enhance the meaning of it.
The * is hidden with aria-hidden.
In this example the description isn’t associated with the input.
By adding 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
invalid.