Accessibility test page for labeling form elements

These test elements accompany Labels Required.

Label markup comparison

Without label markup, NVDA doesn't identify the form field and instead reads it as generic "edit text".

Div markup


Label markup

placeholder attribute

This attribute is best used for hints or formatting guidelines because it's value is replaced by user input. Remember that placeholder is read to screen readers, so choose a value that makes sense spoken aloud.

aria-label attribute

The aria-label attribute conflicts with label text when both are on the same element; each screen reader we tested read the combination of label, aria-label, and placeholder text differently. It makes sense to use one or the other, so we use label alone for form fields.

Test out the following input with a screen reader to see how it reads label + aria-label. Here we're using it to read out the full label text, "personal identification number."

Accessibly hiding labels

And by "hiding", we mean hiding only from view. They're still in the markup for screen readers. VoiceOver and NVDA speak the following 2 examples the same way.

Visible label

Hidden label

Grouping fields under a single heading

Individual field labels are hidden with our accessible a11y-only class to reduce visual redundancy. Using a `fieldset` and `legend` combo has the added benefit of being read as a form grouping element in VoiceOver (iOS) and NVDA.

Div + heading


Fieldset + legend