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 4:50PM

Birkir, wouldn't that be conflicting information? You'd have a <label> for
the <input> field *and* have an aria-label for the <input> field? Which
one should win?


On Wed, Apr 25, 2018 at 2:19 PM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> Tim makes good suggestions.
> I'd try wrapping the whole question in a <label> element, then add
> aria-label="answer" to the <input> field.
> See how that is interpreted by a screen reader.
>
> The problem of using aria-labelledby or rewriting the question for
> screen reader users is that you introduce a lot of complexity and
> chance for misunderstanding or bad phrasing.
> If the screen reader user sees the same question re-interpreted by
> someone, there is the chance that the person didn't interpret it
> correctly, made it confusing or even wrong.
> aria-labelledby also requires that each part of each question has a
> unique id attribute, something that your average server-side
> development team is going to be less-than-happy about.
>
>
>
> On 4/25/18, glen walker < <EMAIL REMOVED> > wrote:
> > 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.
> >> >
> >> > >> > >> > >> > >>
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >