WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form elements

for

From: Birkir R. Gunnarsson
Date: Mar 21, 2019 6:20AM

These are a bit tricky, especially #1.
You could do something like
<p>
<span>The </span>
<input aria-label="answer" aria-describedby="sp2">
<span id="sp2">has black and whit stripes.</span>
For #2 I'd just put the question text in a <label> element and
associate it with the input.

There is an earlier discussion on a very similar topic that may be of
interest: https://webaim.org/discussion/mail_thread?thread†93

Thanks
-Birkir

On 3/21/19, Fischer, Johannes < <EMAIL REMOVED> > wrote:
> Hi,
>
> I would also say that aria-describedby is not a label as the term "label" is
> not inside the attribute name like in aria-label or aria-labelledby. Instead
> it gives a description additionally to a label. Success criterion 3.3.2
> would fail. But I think, criterion 4.1.2 would not fail as aria-describedby
> is considered in the accessible name computation (no. 2, no. 2, second
> bullet for example): https://www.w3.org/TR/accname/#terminology
>
>
> Khoa, for your scenario 1 my thoughts for a solution would be:
>
> A.
> <label>
> The <input type="text value="___" /> has black and white stripes.
> </label>
>
> B.
> <span id="text1">The</span> <input id="gap" type="text value="___"
> aria-labelledby="text1 gap text2" /> <span id="text2">has black and white
> stripes.</span>
>
> Johannes
>
> -----Ursprüngliche Nachricht-----
> Von: WebAIM-Forum [mailto: <EMAIL REMOVED> ] Im Auftrag
> von Mohith BP
> Gesendet: Donnerstag, 21. März 2019 05:39
> An: WebAIM Discussion List
> Betreff: Re: [WebAIM] Form elements
>
> Hi,
>
> No, aria-describedby cannot be the substitute for the accessible label
> as mentioned by Birkir. However, using title attribute will not give
> same experience across the assistive technologies on all platform. It
> is recommended that the title alone cannot be considered as accessible
> label.
>
> Thanks & Regards,
> Mohith B. P.
>
> On 3/21/19, Khoa Pham < <EMAIL REMOVED> > wrote:
>> In scenarios where an input text field is embedded in the question
>> sentence,
>> such as fill in the blank, or is at the end of a question. What would be
>> recommended as a label for the first embedded scenario and the scenario
>> where an answer required after a question, examples below.
>>
>> Scenario 1:
>> The ___ has black and white stripes.
>>
>> Scenario 2:
>> What color is a turtle? ____
>>
>> How would you recommend these be label and which html or aria element
>> would
>> be best for them?
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Wednesday, March 20, 2019 3:51 PM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Form elements
>>
>> It still requires a label.
>> A label, aria-label or aria-labelledby (as well as the title
>> attribute) translate to the element's "accessible name".
>> The contents of elements referenced with aria-describedby however map to
>> the
>> element's "accessible description".
>> Assistive technologies know that the accessible name is not optional, it
>> should always be displayed or announced when the element receives focus.
>> The
>> accessible description, however, is a bit optional, configurable and, in
>> some situations, may not even be announced at all.
>> An interactive element must always have an accessible name, but does not
>> always need an accessible description unless the situation calls for it
>> (e.g. tooltip instructions or an error message).
>>
>>
>> On 3/20/19, Khoa Pham < <EMAIL REMOVED> > wrote:
>>> Is having an aria-describedby sufficient for a form element to be
>>> considered accessible in place of a HTML label, aria-label, or
>>> aria-labelledby?
>>> Accessibility checkers tend to flag a form element as not having a
>>> proper label when it only has aria-describedby affiliated to it even
>>> though there are text around the form element. Or would the form
>>> element still require a label?
>>>
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> at
>> http://webaim.org/discussion/archives
>> >> >> >> >> >>
> > > > > > > > >


--
Work hard. Have fun. Make history.