E-mail List Archives
Thread: Form fields in a sentence
Number of posts in this thread: 6 (In chronological order)
From: Mark Magennis
Date: Thu, Sep 07 2023 9:46AM
Subject: Form fields in a sentence
No previous message | Next message →
Suppose I have a page where two text input fields are presented within a sentence of text (and I can't tell the designer to do this a different way). For example, suppose the sentence was like this, where the fields are shown as "[input]":
My favourite country is [input] and favourite sport is [input].
It seems to me that appropriate names for these two fields would be "favourite country" and "favourite sport".
Could the intervening text, "My favourite country is" and "and favourite sport is", be given aria-hidden="true", leaving just the two fields exposed to AT? Would there be any downside to doing this? Or is it important that the visible text is exposed? Or alternatively, should just "My", "is", "and", and "is" have aria-hidden so that the text labels exposed to AT are identical to the field names?
Another question is, if I make "favourite country" and "favourite sport" bold to support voice activation users, would that pass WCAG SC 2.5.3 Label in Name in your opinion?
Mark
From: Yeti
Date: Thu, Sep 07 2023 9:58AM
Subject: Re: Form fields in a sentence
← Previous message | Next message →
> My favourite country is [input] and favourite sport is [input].
This is a classic sample for aria-labeledBy
My <div id="country"> favourite country</div> is <input aria-labeledBy="country" ...
From: Mark Magennis
Date: Thu, Sep 07 2023 9:59AM
Subject: Re: Form fields in a sentence
← Previous message | Next message →
Yes, although that wasn't the question I was asking.
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Yeti < = EMAIL ADDRESS REMOVED = >
Sent: Thursday 7 September 2023 16:58
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] Re: [WebAIM] Form fields in a sentence
[You don't often get email from = EMAIL ADDRESS REMOVED = . Learn why this is important at https://aka.ms/LearnAboutSenderIdentification ]
> My favourite country is [input] and favourite sport is [input].
This is a classic sample for aria-labeledBy
My <div id="country"> favourite country</div> is <input aria-labeledBy="country" ...
From: Patrick H. Lauke
Date: Thu, Sep 07 2023 11:10AM
Subject: Re: Form fields in a sentence
← Previous message | Next message →
On 07/09/2023 16:46, Mark Magennis wrote:
> Suppose I have a page where two text input fields are presented within a sentence of text (and I can't tell the designer to do this a different way). For example, suppose the sentence was like this, where the fields are shown as "[input]":
>
> My favourite country is [input] and favourite sport is [input].
>
> It seems to me that appropriate names for these two fields would be "favourite country" and "favourite sport".
>
> Could the intervening text, "My favourite country is" and "and favourite sport is", be given aria-hidden="true", leaving just the two fields exposed to AT? Would there be any downside to doing this? Or is it important that the visible text is exposed? Or alternatively, should just "My", "is", "and", and "is" have aria-hidden so that the text labels exposed to AT are identical to the field names?
Non-SR users are able to read the whole thing (once filled in) as a
completely formed sentence. The same should be possible for SR users, so
I wouldn't hide it from them.
> Another question is, if I make "favourite country" and "favourite sport" bold to support voice activation users, would that pass WCAG SC 2.5.3 Label in Name in your opinion?
I'd say so, yes. And if those words weren't bold, I'd actually have a
hard time deciding for definitive what the pass/fail cut-off point there
would be (as the SC is eminently vague for things that don't fall under
a fairly limited "there's a visible label" scenario).
P
--
Patrick H. Lauke
https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke
From: glen walker
Date: Thu, Sep 07 2023 12:02PM
Subject: Re: Form fields in a sentence
← Previous message | Next message →
>
> Could the intervening text, "My favourite country is" and "and favourite
> sport is", be given aria-hidden="true", leaving just the two fields exposed
> to AT? Would there be any downside to doing this? Or is it important that
> the visible text is exposed? Or alternatively, should just "My", "is",
> "and", and "is" have aria-hidden so that the text labels exposed to AT are
> identical to the field names?
>
All four of those questions are "it depends". We don't have the context of
what you're actually trying to convey. It might be important for the user
to know they are filling in fields within a sentence (kind of a "mad libs"
type of input, https://en.wikipedia.org/wiki/Mad_Libs) or it might not
matter and just knowing there's an input field with a label is sufficient.
> Another question is, if I make "favourite country" and "favourite sport"
> bold to support voice activation users, would that pass WCAG SC 2.5.3 Label
> in Name in your opinion?
>
If "favourite <whatever>" is bold, implying that it's the label for the
field, then as long as "favourite <whatever>" is in the accessible name, it
passes 2.5.3. You can have other stuff in the accessible name in addition
to the "favourite <whatever>".
From an implementation side, you could also have something like this:
My <label for="country"> favourite country</label> is <input id="country">
and then style the <label> so it's bold. That also gives the mouse user the
benefit of clicking on the bold text and it moves the focus into the field.
From: Birkir R. Gunnarsson
Date: Thu, Sep 07 2023 1:06PM
Subject: Re: Form fields in a sentence
← Previous message | No next message
Aren't we over engineering the solution?
Isn't it simply to wrap "my favorite country is" and "my favorite
sport is" in label elements and associate with the inputs?
I mean input that says "my favorite country is" is pretty clearly
labeled, more conversational than I am used to, but there is no doubt
what information is expected of me.
I'd imagine the form is made conversational by design, maybe to make
the content more friendly or whatever.
That is not an accessibility decision, that is a content/UX decision.
the only thing we have to decide is whether the label of the input is
descriptive, making these sentence parts into labels passes that
criterion.
Are they a little bit overly wordy .. yeah, I'd say they are, but not
to the point where it is detrimental to the user experience.
On 9/7/23, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Could the intervening text, "My favourite country is" and "and favourite
>> sport is", be given aria-hidden="true", leaving just the two fields
>> exposed
>> to AT? Would there be any downside to doing this? Or is it important that
>> the visible text is exposed? Or alternatively, should just "My", "is",
>> "and", and "is" have aria-hidden so that the text labels exposed to AT are
>> identical to the field names?
>>
>
> All four of those questions are "it depends". We don't have the context of
> what you're actually trying to convey. It might be important for the user
> to know they are filling in fields within a sentence (kind of a "mad libs"
> type of input, https://en.wikipedia.org/wiki/Mad_Libs) or it might not
> matter and just knowing there's an input field with a label is sufficient.
>
>
>> Another question is, if I make "favourite country" and "favourite sport"
>> bold to support voice activation users, would that pass WCAG SC 2.5.3
>> Label
>> in Name in your opinion?
>>
>
> If "favourite <whatever>" is bold, implying that it's the label for the
> field, then as long as "favourite <whatever>" is in the accessible name, it
> passes 2.5.3. You can have other stuff in the accessible name in addition
> to the "favourite <whatever>".
>
> From an implementation side, you could also have something like this:
>
> My <label for="country"> favourite country</label> is <input id="country">
>
> and then style the <label> so it's bold. That also gives the mouse user the
> benefit of clicking on the bold text and it moves the focus into the field.
> > > > >
--
Work hard. Have fun. Make history.