input with label hidden using display:none or even visibility:hidden

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-labelledby or 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...

Example using display:none

Example using visibility:hidden

A solution, in cases where the control is implicitly labelled by text nearby, is to use aria-label on the control.

Example using aria-label

Note: UI controls always require a visible label

Codepen for this Codepen

See the Pen extremely short note on hiding label elements by steve faulkner (@stevef) on CodePen.