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 8:10AM


If the last part of the question is intrinsic to answering it, IMO
using a mechanism that may or may not cause it to be read by
screenreaders is not advisable. I'm sticking with aria-labeledby, even
though that's not a perfect solution either. Cheers.

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