WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Bryan Garaventa
Date: May 1, 2018 1:41AM

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
>