WebAIM - Web Accessibility In Mind

E-mail List Archives

Labelling a "fill in the blank" form field

for

From: Isabel Holdsworth
Date: May 10, 2018 7:52AM

Thanks Bryan. That's rather elegant. Unfortunately, our software can't
reproduce it, so I'm working on the next best solution.

On 01/05/2018, Bryan Garaventa < <EMAIL REMOVED> > wrote:
> Hi,
> In case it's of help, the following resource can be used to test how the
> naming computation works by building your own markup examples to see if
> element names and descriptions are being calculated properly, and where
> browsers and screen readers are not following these algorithms accurately.
> https://github.com/whatsock/w3c-alternative-text-computation
>
> In running the below example, the following test results are returned.
>
> accName: "If you have $1400, and get an unexpected dentis bill of enter
> amount then you have exactly 20 dollars left"
>
> accDesc: ""
>
> (Running AccName Computation Prototype version: 2.11)
>
> <label>
> <span id="q1a">If you have $1400, and get an unexpected dentis bill of
> </span>
> <input aria-label="enter amount" id="test" aria-labelledby="q1a test q1b">
> <span id="q1b"> then you have exactly 20 dollars left</span>
> </label>
>
> Bryan Garaventa
> Accessibility Fellow
> Level Access, Inc.
> <EMAIL REMOVED>
> 415.624.2709 (o)
> www.LevelAccess.com
>
>> 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.
>> >>>>
>> >>>>
>> >> >> >> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >>
>> >
>> >
>> > --
>> > Work hard. Have fun. Make history.
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> >
>> >> >> archives at http://webaim.org/discussion/archives
>> > > > http://webaim.org/discussion/archives
> > > > > >