• Success Criterion 1.3.2
  • Conformance level A

Empty Elements Making Screen Readers Announce ‘Blank’ Repeatedly

1.3.2 — Meaningful Sequence

Scenario

Setting

A webinar platform's registration form

What’s wrong

Empty elements or stray whitespace in the code are announced as 'blank' — often several times in a row — adding meaningless stops between real content for screen reader users.

Example 

<label for="company"></label>
<input id="company" placeholder="Company name">
<div class="spacer"></div>
<span class="icon-check"></span>
<label for="email"></label>
<input id="email" placeholder="Email">

Why it matters

A screen reader user registering for the webinar hears "blank, edit text" repeated over and over, with no way to tell which field is which.

How to test

Read the full page with a screen reader: repeated announcements of 'blank' usually mean empty elements or stray whitespace nodes are in the reading order — inspect the DOM at that point.

How to fix

Never ship an empty label; give it real text, and mark purely decorative empty elements with aria-hidden="true" so they are skipped.

<label for="company">Company name</label>
<input id="company">
<span class="icon-check" aria-hidden="true"></span>
<label for="email">Email</label>
<input id="email">

Outcome

A screen reader user now hears "Company name, edit text" and "Email, edit text" clearly, with no stray blanks.

Who is affected

Screen reader users lose the name of every field and hear extra meaningless "blank" announcements cluttering the form.

Learn more

Related scenarios