WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Apr 25, 2018 7:36PM

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.