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 5:57AM

Yes, I'm using Jaws 2018 and Chrome 66.0.3359.139, the latest build as
of today. The labels work fine, but the last part of the question
(aria-describedby?) isn't spoken with Jaws.

On 30/04/2018, Mallory < <EMAIL REMOVED> > wrote:
> 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> >
>> >
>> >
>> > >> > >> > >> > >> >
>> >> >> >> > > > > >