WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Mallory
Date: Apr 30, 2018 5:06AM

Hi,
is this with Chrome browser?
We were using aria-labelledby on select inputs inside a table and were hooking up the th's to them with aria-labelledby and while it was fine as expected in IE and FF (and someone else claimed it worked in Edge as well), in Chrome/chromium there was nothing to hear unless you did table navigation.
I'd be interested to know if it differs per-browser since JAWS was just barely a majority SR for students using our stuff; not working means it needs to be revisited!

Though very recently Steve Faulkner had tested our test page (with the tables and selects) and it worked with the latest-latest JAWS and could no longer reproduce.

cheers,
_mallory

On Mon, Apr 30, 2018, at 12:59 PM, Isabel Holdsworth wrote:
> 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> >
> >
> >
> > > > > > > > > >
> > > >