umbraco/Umbraco.Forms.Issues

Accessibility Issue: Hiding form labels

Closed this issue · 1 comments

In Umbraco forms it is possible to hide form labels. This is done by setting "show label" on the form label to false:
image

This removes the label markup from the source:
image
Versus this when label is shown:
image

Note the removal of:
<label for="9a0886b0-0891-4951-f5ab-6b077f2615d0" class="umbraco-forms-label">Search field </label>

This means the field is not properly identified to screen reader users and means if applied, the form is not considered accessible. From https://www.w3.org/WAI/tutorials/forms/labels:

"A label for a form control helps everyone better understand its purpose. In some cases, the purpose may be clear enough from the context when the content is rendered visually. The label can be hidden visually, though it still needs to be provided within the code to support other forms of presentation and interaction, such as for screen reader and speech input users."

Impacted version:
Umbraco forms v13.1.2
Umbraco 13.3.0

Thanks @RachBreeze - and good point. We'll update this with the next release such that the mark-up remains but the label is visually hidden.