WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL]Labelling a "fill in the blank" form field

for

From: Tim Harshbarger
Date: Apr 25, 2018 8:26AM

The easiest solution might be to provide instructions before the fill-in-the-blank questions to ensure the users are in the right frame of mind for interpreting the labels. Then you might be able to use a label such as "fill-in-the-blank" or "fill-in-the-blank for question 2". You could also try wrapping the whole question (along with the textbox) inside a label element.

When trying to figure out if a label or alt text description is adequate, it is a good rule of thumb to look at the context of the content. How someone interprets a label depends heavily on what frame of mind they are in and that is heavily influenced by the context of the content.

If the user knows that the textfields are all part of a sentence or paragraph because the questions are fill-in-the-blank your label doesn't necessarily need to convey as much.

If the user doesn't know what kind of questions will be asked, you probably need a label that provides a lot more detail.

Thanks,
Tim



-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Isabel Holdsworth
Sent: Wednesday, April 25, 2018 9:03 AM
To: <EMAIL REMOVED>
Subject: [EXTERNAL] Re: [WebAIM] Labelling a "fill in the blank" form field

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.
>