WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Isabel Holdsworth
Date: Apr 30, 2018 4:59AM

Hi Mallory,

Thanks for these great examples.

Unfortunately, using JAWS 2018 with advanced user verbosity, I can't
get the value of aria-describedby on any field. So this solution is
close but not perfect for our needs.

My solution of combining three labels, the middle of which is a hidden
label that says "[fill in the blank]" seems to work well.

Cheers.

On 27/04/2018, Clayton Silva < <EMAIL REMOVED> > wrote:
> Any thoughts on how to work with fill in the blank when HTML and question
> rewriting/reordering are not options?
>
>
>
> I am specifically thinking about cases where the fill-in part is not
> necessarily meant to receive an answer, but rather where the whole question
> is an example and where the technology might be Word or PDF--like either an
> electronic version of a print publication or a public-facing draft of a
> print publication.
>
>
>
> Some thoughts:
>
>
>
> · using a pre-defined symbol placeholder
>
> · using an inline/in-order image of a blank line with "fill in the
> blank" as alternative text
>
> · using words in brackets like {blank} or {fill in the blank}.
>
>
>
> All of these have drawbacks.
>
>
>
> Clayton Silva
>
>
>
> -----Original Message-----
> From: Mallory [mailto: <EMAIL REMOVED> ]
> Sent: Friday, April 27, 2018 3:15 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Labelling a "fill in the blank" form field
>
>
>
> Birkir: "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."
>
>
>
> We had two issues with the label-wrapping (though we didn't try with
> aria-label):
>
> Dragon users had to say "press tab" since the label couldn't be used to move
> focus.
>
> ZoomText users get "Unlabelled control" with labels wrapping (but again
> maybe with the added aria-label that would be fixed, I'm not sure).
>
>
>
> Implicit labels ended up just being something we avoided even though it's
> all technically legal.
>
>
>
> cheers,
>
> _mallory
>
>
>
> On Fri, Apr 27, 2018, at 12:12 PM, Mallory wrote:
>
>> We used this at my previous employer:
>
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__www.stommepoes.nl_
>
>> work_k-2D12_fill-5Fin-5Fthe-5Fblank.html&d=DwICaQ&c=SIStQSL0VMIUJoLS-Q
>
>> 8giiFlA-AKdP7tpJHyQh8DeXk&r=gqzRwnr98OZV2YvC-trDUXqvgWcJVMH-LrkqD6oJLw
>
>> Y&mùXy-VCZKoWXbkSOEydHmilJerGSqbC2NOv89w67M6Y&s=iiZXcOP6c7NAgi9Qo9uy
>
>> sQeZbbxnNeueNGKE1psVBnQ&e= (test 2 was used: if a user is browsing,
>
>> they hear the sentence in order, but if they are tabbing, same thing,
>
>> they hear the sentence in order. The test 3 was, for fib that is
>
>> putting together a sentence, hearing the completed one may or may not
>
>> be useful. The test has the problem of using blur() which, if the
>
>> student is tabbing, gets mucked up with the next sentence reading out
>
>> as well. So test2 is the suggestion from me.)
>
>>
>
>> cheers,
>
>> _mallory
>
>>
>
>> On Fri, Apr 27, 2018, at 10:30 AM, Isabel Holdsworth wrote:
>
>> > Thanks guys - I might need to stick with my original suggestion on
>
>> > this one. The question authoring is out of our control - all we can
>
>> > do is provide accessible interfaces and wrappers. I'd like to use
>
>> > more context-sensitive labels such as "how many", "how much", "how
>
>> > heavy", etc., but we don't have that luxury. So "fill in the blank"
>
>> > is probably the closest we can get. Using aria-labeledby seems to
>
>> > provide the most comprehensive and sensible label, so I think this
>
>> > is the way to go.
>
>> >
>
>> > I find these discussions really helpful. Cheers.
>
>> >
>
>> > On 26/04/2018, Birkir R. Gunnarsson
>> > < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
>> > wrote:
>
>> > > Yes, I suggested that.
>
>> > > The <label> elemet to provide the larger click target for people
>
>> > > with mobility impairments.
>
>> > > The aria-label atribute to assign an accessible name to he input
>
>> > > field for the benefits of screen reader users.
>
>> > >
>
>> > > You could force a screen reader to read all 3 by combining
>
>> > > aria-label and aria-labelledby
>
>> > >
>
>> > > <label>
>
>> > > <span id="q1a">If you have $1400, and get an unexpected dentis
>
>> > > bill of </span> <input aria-label="enter amount" id="sr1"
>
>> > > aria-labelledby="q1a sr1 q1b"> <span id="q1b"> then you have
>
>> > > exactly 20 dollars left</span> </label>
>
>> > >
>
>> > >
>
>> > > On 4/25/18, glen walker
>> > > < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >> wrote:
>
>> > >> I could have taken an extra 2 min to test it before posting my
>> > >> question.
>
>> > >> The accessible name generation is pretty clear on the precedence.
>
>> > >>
>
>> > >> https://urldefense.proofpoint.com/v2/url?u=https-3A__www.w3.org_T
>
>> > >> R_accname-2D1.1_-23step2&d=DwICaQ&c=SIStQSL0VMIUJoLS-Q8giiFlA-AKd
>
>> > >> P7tpJHyQh8DeXk&r=gqzRwnr98OZV2YvC-trDUXqvgWcJVMH-LrkqD6oJLwY&mù
>
>> > >> Xy-VCZKoWXbkSOEydHmilJerGSqbC2NOv89w67M6Y&sÈ5GapKzxQVg927I25j1W
>
>> > >> 8-D-XQ1O8MPQ0_KuKD5DxU&e>
>> > >>
>
>> > >> 2c is before 2d.
>
>> > >> 2c gets the accessible name from the aria-label attribute 2d gets
>
>> > >> the accessible name from the label element
>
>> > >>
>
>> > >> So the aria-label should win (and it does when I try NVDA on
>
>> > >> firefox and JAWS on Internet Explorer)
>
>> > >>
>
>> > >> So, Birkir, did I read your suggestion incorrectly? Did you say
>
>> > >> to use both a <label> element and the aria-label attribute?
>
>> > >>
>
>> > >> Glen
>
>> > >>
>
>> > >> On Wed, Apr 25, 2018 at 4:50 PM, glen walker
>
>> > >> < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
>
>> > >> wrote:
>
>> > >>
>
>> > >>> 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> <mailto: <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.
>
>> > >>>>
>
>> > >>>>
>
>> > >> >
>> > >> >
>> > >> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.o
>
>> > >> rg_&d=DwICaQ&c=SIStQSL0VMIUJoLS-Q8giiFlA-AKdP7tpJHyQh8DeXk&r=gqzR
>
>> > >> wnr98OZV2YvC-trDUXqvgWcJVMH-LrkqD6oJLwY&mùXy-VCZKoWXbkSOEydHmil
>
>> > >> JerGSqbC2NOv89w67M6Y&s=U_MAfcSo1kUD66eJGtp5Z3-VzIob4R1k97XuokFSjb
>
>> > >> Q&e= List archives at
>
>> > >> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_di
>
>> > >> scussion_archives&d=DwICaQ&c=SIStQSL0VMIUJoLS-Q8giiFlA-AKdP7tpJHy
>
>> > >> Qh8DeXk&r=gqzRwnr98OZV2YvC-trDUXqvgWcJVMH-LrkqD6oJLwY&mùXy-VCZK
>
>> > >> oWXbkSOEydHmilJerGSqbC2NOv89w67M6Y&s=IhqoQzO06An6ImxgNTjl-Srs75yq
>
>> > >> d3B_aWvxZR8EG6A&e= >
>> > >> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>
>> > >>
>
>> > >
>
>> > >
>
>> > > --
>
>> > > Work hard. Have fun. Make history.
>
>> > > >
>> > > >
>> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.or
>
>> > > g_&d=DwICaQ&c=SIStQSL0VMIUJoLS-Q8giiFlA-AKdP7tpJHyQh8DeXk&r=gqzRwn
>
>> > > r98OZV2YvC-trDUXqvgWcJVMH-LrkqD6oJLwY&mùXy-VCZKoWXbkSOEydHmilJer
>
>> > > GSqbC2NOv89w67M6Y&s=U_MAfcSo1kUD66eJGtp5Z3-VzIob4R1k97XuokFSjbQ&e>
>> > > List archives at
>
>> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_dis
>
>> > > cussion_archives&d=DwICaQ&c=SIStQSL0VMIUJoLS-Q8giiFlA-AKdP7tpJHyQh
>
>> > > 8DeXk&r=gqzRwnr98OZV2YvC-trDUXqvgWcJVMH-LrkqD6oJLwY&mùXy-VCZKoWX
>
>> > > bkSOEydHmilJerGSqbC2NOv89w67M6Y&s=IhqoQzO06An6ImxgNTjl-Srs75yqd3B_
>
>> > > aWvxZR8EG6A&e= >
>> > > <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>
>> > >
>
>> > >
>> > >
>> > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_
>
>> > &d=DwICaQ&c=SIStQSL0VMIUJoLS-Q8giiFlA-AKdP7tpJHyQh8DeXk&r=gqzRwnr98O
>
>> > ZV2YvC-trDUXqvgWcJVMH-LrkqD6oJLwY&mùXy-VCZKoWXbkSOEydHmilJerGSqbC2
>
>> > NOv89w67M6Y&s=U_MAfcSo1kUD66eJGtp5Z3-VzIob4R1k97XuokFSjbQ&e>
>> > List archives at
>
>> > https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discu
>
>> > ssion_archives&d=DwICaQ&c=SIStQSL0VMIUJoLS-Q8giiFlA-AKdP7tpJHyQh8DeX
>
>> > k&r=gqzRwnr98OZV2YvC-trDUXqvgWcJVMH-LrkqD6oJLwY&mùXy-VCZKoWXbkSOEy
>
>> > dHmilJerGSqbC2NOv89w67M6Y&s=IhqoQzO06An6ImxgNTjl-Srs75yqd3B_aWvxZR8E
>
>> > G6A&e= >> > <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>
>> >
>> >
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d
>
>> =DwICaQ&c=SIStQSL0VMIUJoLS-Q8giiFlA-AKdP7tpJHyQh8DeXk&r=gqzRwnr98OZV2Y
>
>> vC-trDUXqvgWcJVMH-LrkqD6oJLwY&mùXy-VCZKoWXbkSOEydHmilJerGSqbC2NOv89w
>
>> 67M6Y&s=U_MAfcSo1kUD66eJGtp5Z3-VzIob4R1k97XuokFSjbQ&e>
>> List archives at
>
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discuss
>
>> ion_archives&d=DwICaQ&c=SIStQSL0VMIUJoLS-Q8giiFlA-AKdP7tpJHyQh8DeXk&r>
>> gqzRwnr98OZV2YvC-trDUXqvgWcJVMH-LrkqD6oJLwY&mùXy-VCZKoWXbkSOEydHmilJ
>
>> erGSqbC2NOv89w67M6Y&s=IhqoQzO06An6ImxgNTjl-Srs75yqd3B_aWvxZR8EG6A&e>
>> >> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>
>
> > > > >