WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: glen walker
Date: Apr 25, 2018 8:38AM

Even if visually you can't rewrite the question, you could still rewrite it
for the label, couldn't you? You can aria-hide the text that's on the
screen and have the rewritten question visually hidden and used as the
label. That's a bit simpler than trying to piece together the label.
Something like:

<span aria-hidden="true">John had 90p and spent 55p on an apple. He now
has</span>
<input type="text" aria-labelledby="placeholder" ... />
<span aria-hidden="true">p left.</span>

<span id="placeholder" class="screenreader">John had 90p and spent 55p
on an apple. How many pence does he have left?</span>




On Wed, Apr 25, 2018 at 8:03 AM, Isabel Holdsworth <
<EMAIL REMOVED> > wrote:

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