inputwith label hidden using
Sometimes developers hide
label elements using
display:none or even
visibility:hidden in an attempt to provide the label text to screenreader users, while not displaying it visually. Unfortunately when hidden using these particular CSS properties the
for/id programmatic association is broken (unlike when
aria-describedby reference hidden text). This means the controls end up without an accessible name. It's as if the
label element is not there...
A solution, in cases where the control is implicitly labelled by text nearby, is to use
aria-label on the control.
Note: UI controls always require a visible label