-1

I would like to hide form field labels but still keep accessibility, would hiding the label by setting it's font-size to 0 still keep the accessibility?

j08691
  • 204,283
  • 31
  • 260
  • 272
user5507535
  • 1,580
  • 1
  • 18
  • 39
  • 3
    did you try to write and test? – Popeye Oct 01 '22 at 21:28
  • 4
    Define "accessible". It won't be visible to your average viewer, and if you are trying to cater to screen readers you would be better off doing it properly using e.g. `aria-label` rather than hiding text on the page. – DBS Oct 01 '22 at 22:09
  • It isn't guaranteed to work everywhere. Use approved ways to do that, such as the definitions of .sr_only / .visually-hidden of known frameworks. – QuentinC Oct 02 '22 at 05:52
  • I assume you want to hide the visual label, but make sure it is still available to ATs (such as screen readers)? Please clarify. – brennanyoung Oct 03 '22 at 12:02
  • 1
    Quick answer is No. In general, a visible text label is the most accessible choice. Such a label can be implemented with HTML's ` – brennanyoung Oct 03 '22 at 12:09

2 Answers2

2

No it will not, a font size of 0 will render text as "invisible" to screen readers in majority of cases.

The answer is "visually hidden text", which will hide the text visually but still make it accessible to assistive technology (the solution linked will work on any browser back to IE7, but there are easier ways to achieve this nowadays).

One last consideration: permanently visible labels help people with cognitive disabilities such as anxiety disorders or learning difficulties.

It is always preferential to adjust the design to include visible labels.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
-3

here are different ways to hide your label using css

<label for="username" style="visibility: hidden">Username 3</label>
MAKSTYLE119
  • 40
  • 9