Inclusive Inputs

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.

No association

Please do not use this. Input and Label are not associated and as such the Input has no accessible name.

Explicit association

Input and Label are not associated by adding the ID of the Input as the value of the label’s for attribute.

Marking as required

The label has invisible test inside of it to enhance the meaning of it. The * is hidden with aria-hidden.

Not linked description

In this example the description isn’t associated with the input.

Your password needs to have at least eight characters.

Linked description

By adding aria-describedby the descriptive text will be announced by screen readers.

Your password needs to have at least eight characters.

Description & Error Message

The following input uses aria-describedby to link both the error message and the descriptive text.

Your password needs to have at least eight characters.

Please check your input.

Description & Error Message & ARIA Invalid

This input also uses aria-invalid to communicate that it is invalid.

Your password needs to have at least eight characters.

Please check your input.