umbraco / Umbraco.Forms.Issues

Public issue tracker for Umbraco Forms
29 stars 0 forks source link

Accessibility Issue: Hiding form labels #1220

Closed RachBreeze closed 1 month ago

RachBreeze commented 1 month ago

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

AndyButland commented 1 month ago

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.