WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Isabel Holdsworth
Date: Apr 27, 2018 2:30AM

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.
> > > > >