WAVE: Empty form label

What’s actually happening

WAVE flags a <label> that's wired to a control the right way — the for/id matches, or the input is nested inside — but the label is empty. No text node, just an icon, or whitespace. This is sneakier than a missing label, because the association is correct, so a quick "does it have a label?" check passes while the actual name is blank. A screen reader lands on the field and says "edit, blank". The classic case is a search box where someone made a <label> holding only a magnifier <svg>, expecting the icon to name the field.

Common causes

• A <label> contains only an icon (SVG, icon font, background image) and no text — the glyph isn't an accessible name
• The label text was placed as a placeholder on the input instead of inside the label, leaving the label element itself empty
• CSS removed the label text with text-indent:-9999px or font-size:0 in a way that also emptied it from the accessibility tree
• A CMS or form builder rendered a <label> wrapper but the text field for it was left blank in the editor
• A heading or nearby <span> carries the visible text while the actual associated <label> is an empty element kept only for layout

How to fix it

1. Put descriptive text inside the labelThe straightforward fix: <label for="search">Search</label>. The text becomes the control's accessible name and gives sighted users a bigger click target. If the field's purpose is obvious from one word, one word is fine — it just can't be empty.
2. If the label must look empty, hide its text visually — don't omit itFor an icon-only search field, keep real text in the label and clip it with a visually-hidden/sr-only class (position:absolute; clip-path; not display:none, which drops it from the a11y tree). <label for="search" class="sr-only">Search</label>. The icon can sit on the button next to it. Now AT reads "Search" while the screen shows only the glyph.
3. If an icon is carrying the meaning, give the icon the textWhen the design really is just an icon in the label, move the name onto the control with aria-label and drop the empty label, or add an sr-only span of text inside the label. An <svg> alone is decorative to AT — add aria-label on the input or a text node in the label, one or the other.
4. Don't keep an empty label just for layoutIf a <label> exists only to hold spacing or an icon and the field is named some other way, remove the empty label and label the control properly (aria-label, or a real associated label). A blank label element is worse than none — it signals an association that delivers no name.
5. Re-run WAVE and check the announced nameRe-scan; the "Empty form label" error should drop and ideally not reappear as "Missing form label". Then focus the field with a screen reader — it should announce your text, not "blank".