WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Jonathan Cohn
Date: Apr 30, 2018 11:08AM

Hello,

The aria-describedby field is only read with JAWS when actual focus (not
virtual focus) is on the field. So, it should be read after the label when
you switch from virtual cursor mode to forms mode either automatically or
by pressing space when the virtual cursor is on the field.



On 30 April 2018 at 07:06, 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> f9
> > >
> > >> > >> Xy-VCZKoWXbkSOEydHmilJerGSqbC2NOv89w67M6Y&s> C85GapKzxQVg927I25j1W
> > >
> > >> > >> 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> f9Xy-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> f9Xy-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> f9Xy-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-VCZKoWXbkSOEydHmilJerGSqbC2NOv
> 89w
> > >
> > >> 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> f9Xy-VCZKoWXbkSOEydHmilJ
> > >
> > >> erGSqbC2NOv89w67M6Y&s=IhqoQzO06An6ImxgNTjl-Srs75yqd3B_aWvxZR8EG6A&e> > >
> > >> > > >> <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
> > >
> > >
> > > > > > > > > > > > > > >
> > > > > > > > > > > > >