WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: David Farough
Date: Apr 30, 2018 8:01AM


You are aware that, these individual verbosity levels can be
configured.
Perhaps if you check the control description option within the advanced
verbosity settings you would hear the aria-describedby information.

It could be argued that most people would not be aware that this is
possible, but perhaps those who used this setting might be aware of its'
flexibility.

David Farough

Coordonnateur de l'accessibilité des applications, Services intégrés de
gestion des TI
Commission de la fonction publique du Canada / Gouvernement du Canada
<EMAIL REMOVED> Tél: 819-420-8418 Télécopieur :
819-420-8408

Application Accessibility Co-ordinator, Corporate IT Management
Public Service Commission of Canada / Government of Canada
<EMAIL REMOVED> Tel: 819-420-8418 / Fax: 819-420-8408


>>> Isabel Holdsworth < <EMAIL REMOVED> > 07:57 AM Monday,
April 30, 2018 >>>
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> >
>> >
>> >
>> > >> > >> > >> > >> >
>> >> >> >> > > > > >
Ce courriel est destiné exclusivement au destinataire mentionné en titre
et peut contenir de l'information privilégiée, confidentielle ou
soustraite à la communication aux termes des lois applicables. Toute
divulgation non autorisée, toute reproduction ou réacheminement est
interdit. Si vous n'êtes pas le destinataire de ce courriel, ou n'êtes
pas autorisé par le destinataire visé, ou encore, si vous l'avez reçu
par erreur, veuillez le mentionner immédiatement à l'expéditeur et
supprimer le courriel et les copies.

This e-mail message is intended for the named recipient(s) and may
contain information that is privileged, confidential and/or exempt from
disclosure under applicable law. Unauthorized disclosure, copying or
re-transmission is prohibited. If you are not a named recipient or not
authorized by the named recipient(s), or if you have received this
e-mail in error, then please notify the sender immediately and delete
the message and any copies.