WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Labelling a "fill in the blank" form field

for

From: Isabel Holdsworth
Date: Apr 25, 2018 8:03AM

Oops, I meant to type "aria-labeledby", not "aria-label".

On 25/04/2018, Isabel Holdsworth < <EMAIL REMOVED> > wrote:
> 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.
>