These test elements accompany Labels Required.
Without label markup, NVDA doesn't identify the form field and instead reads it as generic "edit text".
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.
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."
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.
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.
© 2017 Filament Group, Inc. All rights reserved.