WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Form elements

for

Number of posts in this thread: 9 (In chronological order)

From: Khoa Pham
Date: Wed, Mar 20 2019 4:20PM
Subject: Form elements
No previous message | Next message →

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?

From: Birkir R. Gunnarsson
Date: Wed, Mar 20 2019 4:51PM
Subject: Re: Form elements
← Previous message | Next message →

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 ADDRESS 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?
>
> > > > >


--
Work hard. Have fun. Make history.

From: Khoa Pham
Date: Wed, Mar 20 2019 5:06PM
Subject: Re: Form elements
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: Wednesday, March 20, 2019 3:51 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.

From: Mohith BP
Date: Wed, Mar 20 2019 10:39PM
Subject: Re: Form elements
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Wednesday, March 20, 2019 3:51 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.
> > > http://webaim.org/discussion/archives
> > > > > >

From: Fischer, Johannes
Date: Thu, Mar 21 2019 1:18AM
Subject: Re: Form elements
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Wednesday, March 20, 2019 3:51 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.
> > > http://webaim.org/discussion/archives
> > > > > >

From: joe@a11yeval.com
Date: Thu, Mar 21 2019 6:14AM
Subject: Re: Form elements
← Previous message | Next message →

A.
<label>
The <input type="text value="___" /> has black and white stripes.
</label>

A above (label wrapping) does not work with all AT & browser combinations, I
would recommend the following modifications for this one, but would
recommend B over A

A. (modified)
<label for="blank">
The <input id="blank" type="text value="___" /> has black and white stripes.
</label>

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
Fischer, Johannes
Sent: Thursday, March 21, 2019 3:18 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Form elements

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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Wednesday, March 20, 2019 3:51 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >
http://webaim.org/discussion/archives
http://webaim.org/discussion/archives

From: Birkir R. Gunnarsson
Date: Thu, Mar 21 2019 6:20AM
Subject: Re: Form elements
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Wednesday, March 20, 2019 3:51 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.

From: Mallory
Date: Thu, Mar 21 2019 7:19AM
Subject: Re: Form elements
← Previous message | Next message →

Some fill-in-the-blanks I played with years ago. As mentioned earlier, the wrapping of labels wasn't nice.
The rest aria-describedby which has the issues described earlier (they're not names).:
https://stommepoes.nl/work/k-12/fill_in_the_blank.html

Probably what I should test is the order of this:
<label id="go2">Last year I <strong>(go)</strong></label>
<input type="text" id="go3" aria-labelledby="go2 go3 rest5">
<span id="rest5">to England on holiday.</span>

The live regions have issues as well: they're competing with the text of the newly focussed bit. The requirement was to show the finished sentence separate from just the filled-in question and some ideas were to not make that a live region but move focus to it (but then you're focussing on a non-interactive element), or giving each sentence it's own dedicated "submit" button and then keeping the live region (and remove the blur listener).

Looks like something to do on the weekend.

cheers,
_mallory


On Thu, Mar 21, 2019, at 1:20 PM, Birkir R. Gunnarsson wrote:
> 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> >> Birkir R. Gunnarsson
> >> Sent: Wednesday, March 20, 2019 3:51 PM
> >> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.
> > > > >

From: joe@a11yeval.com
Date: Thu, Mar 21 2019 8:45AM
Subject: Re: Form elements
← Previous message | No next message

Hi all,

I tested the aria-labelledby suggested coded (only with NVDA/FF & JAWS 2019/IE), but it worked well reading in the correct order.

Joe

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Mallory
Sent: Thursday, March 21, 2019 9:20 AM
To: Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >; WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Form elements

Some fill-in-the-blanks I played with years ago. As mentioned earlier, the wrapping of labels wasn't nice.
The rest aria-describedby which has the issues described earlier (they're not names).:
https://stommepoes.nl/work/k-12/fill_in_the_blank.html

Probably what I should test is the order of this:
<label id="go2">Last year I <strong>(go)</strong></label> <input type="text" id="go3" aria-labelledby="go2 go3 rest5"> <span id="rest5">to England on holiday.</span>

The live regions have issues as well: they're competing with the text of the newly focussed bit. The requirement was to show the finished sentence separate from just the filled-in question and some ideas were to not make that a live region but move focus to it (but then you're focussing on a non-interactive element), or giving each sentence it's own dedicated "submit" button and then keeping the live region (and remove the blur listener).

Looks like something to do on the weekend.

cheers,
_mallory


On Thu, Mar 21, 2019, at 1:20 PM, Birkir R. Gunnarsson wrote:
> 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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = > On Behalf
> >> Of Birkir R. Gunnarsson
> >> Sent: Wednesday, March 20, 2019 3:51 PM
> >> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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.
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> > > > > > archives at http://webaim.org/discussion/archives
> > > > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > archives at http://webaim.org/discussion/archives
> >