Lessons · HTML and CSS · a field that announces nothing
A field that announces nothing
With no attached label a screen reader says there is an edit box and nothing about what goes in it.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
'Edit, blank' on a form of six fields is six guesses, and the form gets abandoned. It is the commonest reason a form is unusable rather than merely awkward.
How to think about it
Check, do not guess: an empty .labels list is the DOM telling you what it believes. When a design has no visible label, attach a real one and hide it with a class that clips it to a pixel -- display:none and visibility:hidden take it out of the tree as well.
Worked example
<input id="p" placeholder="Email">The browser reports .labels as 0. There is a placeholder, and it is not a name.
Your turn
The DOM property that says whether anything is attached.
input.
Write a page and watch it render
The trap
Hiding a label with display:none removes it from the accessibility tree too, so the field is back to announcing nothing while the markup looks right.