WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Clayton Silva
Date: Apr 27, 2018 3:18PM

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