2

I'm trying to understand how visually hidden labels fit within the accessibility and the WCAG 2.1 spec. It seems to me that as long as an input has a programatically associated label (whether that be a label element or through ARIA), it is compliant.

I did find that SC 2.5.3 has a note which states:

Note that where a visible text label does not exist for a component, this Success Criterion does not apply to that component.

However, I'm a little unsure how a sighted user who uses voice control would be able to use an input with a visually hidden label. Would they simply have to guess at the label name? Are there any other cases like this where a WCAG-compliant input would not be accessible because of a hidden?

I'm hoping somebody with a bit more accessibility knowledge could help guide me on this! Any comments on the general usability of inputs without a visible label are also much appreciated.

Improve this question

1 Answer 1

Reset to default
2

A visually hidden label is generally only used to benefit screen readers where there is something visual on the page that isn't conveyed. That is, if the design of the page implies a label is associated with an element through some visual connection but there isn't really a "programmatic" connection between the two elements, then adding a hidden label adds that "connection" for screen reader users. You would never want a case where you have a hidden label (for screen reader users) but no visible label for the sighted user.

Regarding 2.5.3, that success criterion essentially says the visible label must match the accessible name, or at least the visible label must be contained in the accessible name.

So this would be ok:

<button aria-label="print the document">print</button>

but this would not

<button aria-label="make a hard copy">print</button>

(The accessible name is what is announced by the screen reader)

Improve this answer
3
  • Thanks for the comment! I agree on all of the above, especially on how you ideally wouldn't want a visually hidden label. But the way the Success Criterions reads seems to imply that it isn't a WCAG violation, even if you probably wouldn't want it?
    – Jefferson
    Sep 24, 2021 at 7:16
  • 2
    If you don't have a visible label, it would fail WCAG 3.3.2
    – slugolicious
    Sep 26, 2021 at 15:53
  • Agreed, That's my understanding too. Some further digging I found the following to support these statements in Technique H44: > However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field. G162 also has the following: > For each form field on the Web page: > > Check that the form field has a visible label. Thanks for the help @slugolicious!
    – Jefferson
    Sep 27, 2021 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.