WebAIM - Web Accessibility In Mind

E-mail List Archives

Labelling a "fill in the blank" form field

for

From: Isabel Holdsworth
Date: Apr 25, 2018 7:34AM

Hi guys, I'd really appreciate your thoughts on yet another WCAG
issue, but from more of a functional angle this time.

If an HTML form has a "fill in the blank" type question, how should it
be labelled?

An example might be:

John had 90p and spent 55p on an apple. He now has ____p left.

Ideally we'd rewrite the question so that all of the text comes before
the input field, but we're not able to do that.

What's the best way of labelling this textbox up so that both parts of
the surrounding question are spoken in a way that makes sense?

Would something like this work?

<span id="part1">John had 90p and spent 55p on an apple. He now has</span>
<span id="placeholder" class="screenreader">[fill in the blank]</span>
<input type="text" aria-label="part1 placeholder part2" ... />
<span id="part2">p left.</span>

Thanks as always.