WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Apr 25, 2018 2:19PM

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.