WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Mallory
Date: Apr 27, 2018 4:12AM

We used this at my previous employer:
http://www.stommepoes.nl/work/k-12/fill_in_the_blank.html
(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> > 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> > 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://www.w3.org/TR/accname-1.1/#step2
> >>
> >> 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> >
> >> 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> > 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.
> >>>>
> >>>>
> >> > >> > >> > >> > >>
> >
> >
> > --
> > Work hard. Have fun. Make history.
> > > > > > > > > >
> > > >