E-mail List Archives
Thread: Re: SPAM-LOW: Re: Looking for an alternative to fieldset / legend
Number of posts in this thread: 9 (In chronological order)
From: Dawn Budge
Date: Tue, Sep 06 2011 8:39AM
Subject: Re: SPAM-LOW: Re: Looking for an alternative to fieldset / legend
No previous message | Next message →
For restyling legends and fieldsets, check out the CSS reset within HTML5
Boilerplate, it will be included in there.
Otherwise you'd be taking a heavy semantic loss for a few pixels of layout
in 2 old browsers with <10% share (unless you are in China, which is where
most of IE6's users are these days)
----------------------------------------
From: "Vincent Young" < = EMAIL ADDRESS REMOVED = >
Sent: 06 September 2011 14:39
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Subject: SPAM-LOW: Re: [WebAIM] Looking for an alternative to fieldset /
legend
> You wouldn't be able to use a
> Label with matching ID at the same time of course, and mouse users would
see
> the label when hovering over the field, but these are the only
drawbacks.
The other drawback is that a larger click area is no longer provided when
you remove the associated label.
On Tue, Sep 6, 2011 at 12:45 AM, Bryan Garaventa <
= EMAIL ADDRESS REMOVED = > wrote:
> Have you considered using Title attributes for this purpose instead?
> If it's not possible to use Fieldset and Legends, this is the most cross
> browser / AT compatible solution that I can think of, which will always
> work. For example, if you front load the text that you would initially
want
> as the Legend text at the beginning of the Title attribute text, then
> follow
> it with the desired label text for the form field, then you will have
both
> reliably announced as part of the same label. You wouldn't be able to use
a
> Label with matching ID at the same time of course, and mouse users would
> see
> the label when hovering over the field, but these are the only
drawbacks.
>
> Bryan Garaventa
> www.WhatSock.com
>
>
> ----- Original Message -----
> From: "E.J. Zufelt" < = EMAIL ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
> Sent: Monday, September 05, 2011 11:56 PM
> Subject: [WebAIM] Looking for an alternative to fieldset / legend
>
>
> > Good evening,
> >
> > We are looking at implementing proper grouping for compound UI
controls
> in
> > Drupal 8. Namely we have radios, checkboxes, and date controls that are
a
> > collection of input elements. First thought is use the common fieldset
/
> > legend elements to wrap and provide context to the controls, and
> > information to the accessibility API.
> >
> > This, however, is not a dsirable solution, as browsers have never
styled
> > these elements consistently or in any way that makes one not want to
> throw
> > up. Using a CSS reset is an options, but from what I know there are no
> > fieldset / legend resets that work well cross browser.
> >
> > I thought of using:
> >
> > <div>
> > <div id="date-legend" class="legend">What is your birthdate?</div>
> > <label>Year: <input type="text"
aria-describedby="date-legend"></label>
> > <label>Month: <input type="text"
aria-describedby="date-legend"></label>
> > <label><input type="text" aria-describedby="date-legend"></label>
> > </div>
> >
> > This causes three problems.
> >
> > 1. AT reads label / description, so this would be read "Year. What is
> your
> > birthday?"
> > 2. The legend would be read for every element in the group.
> > 3. I am philosophically opposed to using aria when a native semantic
> > component exists, especially when it is supported by older technology.
*
> > Note that this objection is lessened by the realization that the
native
> > elements available don't work if they cannot be properly styled,
> > considering that the UI components are used on millions of sites with
> > varied style requirements.
> >
> > Any suggestions or creative solutions welcomed.
> >
> > Thanks,
> > 2.
> >
> > Everett Zufelt
> > http://zufelt.ca
> >
> > Follow me on Twitter
> > http://twitter.com/ezufelt
> >
> > View my LinkedIn Profile
> > http://www.linkedin.com/in/ezufelt
> >
> >
> >
> >
From: McKeithan, Thomas
Date: Tue, Sep 06 2011 8:45AM
Subject: Re: SPAM-LOW: Re: Looking for an alternative to fieldset / legend
← Previous message | Next message →
Remitting now. Will copy you.
Respectfully,
Thomas Lee McKeithan II
Accessibility Program Manager
National Industries for the Blind
1310 Braddock Place
Alexandria, VA 22314
(703)310-0586 Direct
(202)276-6437 Cell
= EMAIL ADDRESS REMOVED =
"Believing is achieving, for if I believe, I can and I will achieve."
From: Jared Smith
Date: Tue, Sep 06 2011 8:54AM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | Next message →
You could use radiogroup and listbox ARIA roles with aria-labelledby
(example at http://webaim.org/presentations/2010/ahg/aria/radiogroup2),
but there's no current support that I'm aware of for these.
So, I'd strongly recommend still using fieldset/legend, but hiding it
visually while providing a visual alternative. Something like...
<fieldset>
<legend class="hidden">What is your birthdate?</legend>
<div class="legendtext">What is your birthdate?</div>
<label for="year">Year:</label> <input type="text" id="year">
...
</fieldset>
The fieldset must be hidden off-screen using CSS, NOT hidden using
display:none or visibility:hidden.
The only weakness of this approach is that a screen reader user
reading linearly through the form would hear the "What is your
birthdate?" text one additional time. But, we've found this to rarely
be an issue because the forms are typically navigated using the tab
key from form control to form control. You could also give the visual
text a role of presentation, which may hide it from screen readers.
This approach does not rely on ARIA, provides the native functionality
of the fieldset/legend, and has fewer shortcomings than your proposed
solution. I've seen is used very well on some very large, form-driven
web sites.
Also, I hope you are recommending explicitly associated form labels
(using for/id) rather than implicit (label element contains the label
and the control). Explicit labelling is much more reliable and
bulletproof.
Jared
From: Vincent Young
Date: Tue, Sep 06 2011 10:12AM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | Next message →
I'd just css hack it. I've always been ok with not having the cleanest css
if semantics are at stake. This has always been one such case for me.
On Sep 6, 2011 7:52 AM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:
> You could use radiogroup and listbox ARIA roles with aria-labelledby
> (example at http://webaim.org/presentations/2010/ahg/aria/radiogroup2),
> but there's no current support that I'm aware of for these.
>
> So, I'd strongly recommend still using fieldset/legend, but hiding it
> visually while providing a visual alternative. Something like...
>
> <fieldset>
> <legend class="hidden">What is your birthdate?</legend>
> <div class="legendtext">What is your birthdate?</div>
> <label for="year">Year:</label> <input type="text" id="year">
> ...
> </fieldset>
>
> The fieldset must be hidden off-screen using CSS, NOT hidden using
> display:none or visibility:hidden.
>
> The only weakness of this approach is that a screen reader user
> reading linearly through the form would hear the "What is your
> birthdate?" text one additional time. But, we've found this to rarely
> be an issue because the forms are typically navigated using the tab
> key from form control to form control. You could also give the visual
> text a role of presentation, which may hide it from screen readers.
>
> This approach does not rely on ARIA, provides the native functionality
> of the fieldset/legend, and has fewer shortcomings than your proposed
> solution. I've seen is used very well on some very large, form-driven
> web sites.
>
> Also, I hope you are recommending explicitly associated form labels
> (using for/id) rather than implicit (label element contains the label
> and the control). Explicit labelling is much more reliable and
> bulletproof.
>
> Jared
>
From: James Nurthen
Date: Tue, Sep 06 2011 12:39PM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | Next message →
Can't you use role="group" for this?
<div role="group" aria-labelledby="date-legend">
<div id="date-legend">What is your birthdate?</div>
<label for="year">Year: </label><input id="year" type="text">
<label for="month">Month: </label><input id="month" type="text">
<label for="day">Day: </label><input id="Day" type="text">
</div>
On Tue, Sep 6, 2011 at 09:12, Vincent Young < = EMAIL ADDRESS REMOVED = > wrote:
> I'd just css hack it. I've always been ok with not having the cleanest css
> if semantics are at stake. This has always been one such case for me.
> On Sep 6, 2011 7:52 AM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:
> > You could use radiogroup and listbox ARIA roles with aria-labelledby
> > (example at http://webaim.org/presentations/2010/ahg/aria/radiogroup2),
> > but there's no current support that I'm aware of for these.
> >
> > So, I'd strongly recommend still using fieldset/legend, but hiding it
> > visually while providing a visual alternative. Something like...
> >
> > <fieldset>
> > <legend class="hidden">What is your birthdate?</legend>
> > <div class="legendtext">What is your birthdate?</div>
> > <label for="year">Year:</label> <input type="text" id="year">
> > ...
> > </fieldset>
> >
> > The fieldset must be hidden off-screen using CSS, NOT hidden using
> > display:none or visibility:hidden.
> >
> > The only weakness of this approach is that a screen reader user
> > reading linearly through the form would hear the "What is your
> > birthdate?" text one additional time. But, we've found this to rarely
> > be an issue because the forms are typically navigated using the tab
> > key from form control to form control. You could also give the visual
> > text a role of presentation, which may hide it from screen readers.
> >
> > This approach does not rely on ARIA, provides the native functionality
> > of the fieldset/legend, and has fewer shortcomings than your proposed
> > solution. I've seen is used very well on some very large, form-driven
> > web sites.
> >
> > Also, I hope you are recommending explicitly associated form labels
> > (using for/id) rather than implicit (label element contains the label
> > and the control). Explicit labelling is much more reliable and
> > bulletproof.
> >
> > Jared
> >
From: Vincent Young
Date: Tue, Sep 06 2011 4:00PM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | Next message →
Thanks for throwing this out there James. Not sure it would work in this
case with a platform like Drupal that has such a large market. I can only
test on a limited number of screen reader/browser combinations at work and
so far not getting the results I think Drupal requires.
On Tue, Sep 6, 2011 at 11:40 AM, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:
> Can't you use role="group" for this?
>
> <div role="group" aria-labelledby="date-legend">
> <div id="date-legend">What is your birthdate?</div>
> <label for="year">Year: </label><input id="year" type="text">
> <label for="month">Month: </label><input id="month" type="text">
> <label for="day">Day: </label><input id="Day" type="text">
> </div>
>
>
>
>
> On Tue, Sep 6, 2011 at 09:12, Vincent Young < = EMAIL ADDRESS REMOVED = >wrote:
>
>> I'd just css hack it. I've always been ok with not having the cleanest
>> css
>> if semantics are at stake. This has always been one such case for me.
>> On Sep 6, 2011 7:52 AM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:
>> > You could use radiogroup and listbox ARIA roles with aria-labelledby
>> > (example at http://webaim.org/presentations/2010/ahg/aria/radiogroup2),
>> > but there's no current support that I'm aware of for these.
>> >
>> > So, I'd strongly recommend still using fieldset/legend, but hiding it
>> > visually while providing a visual alternative. Something like...
>> >
>> > <fieldset>
>> > <legend class="hidden">What is your birthdate?</legend>
>> > <div class="legendtext">What is your birthdate?</div>
>> > <label for="year">Year:</label> <input type="text" id="year">
>> > ...
>> > </fieldset>
>> >
>> > The fieldset must be hidden off-screen using CSS, NOT hidden using
>> > display:none or visibility:hidden.
>> >
>> > The only weakness of this approach is that a screen reader user
>> > reading linearly through the form would hear the "What is your
>> > birthdate?" text one additional time. But, we've found this to rarely
>> > be an issue because the forms are typically navigated using the tab
>> > key from form control to form control. You could also give the visual
>> > text a role of presentation, which may hide it from screen readers.
>> >
>> > This approach does not rely on ARIA, provides the native functionality
>> > of the fieldset/legend, and has fewer shortcomings than your proposed
>> > solution. I've seen is used very well on some very large, form-driven
>> > web sites.
>> >
>> > Also, I hope you are recommending explicitly associated form labels
>> > (using for/id) rather than implicit (label element contains the label
>> > and the control). Explicit labelling is much more reliable and
>> > bulletproof.
>> >
>> > Jared
>> >
From: E.J. Zufelt
Date: Tue, Sep 06 2011 6:27PM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | Next message →
Hi Jared,
Let me give that a try. I'm of course open to any suggestions others may have as well.
We do use explicit for="id" on labels, I just simplified my example code.
Thanks again,
Everett Zufelt
http://zufelt.ca
Follow me on Twitter
http://twitter.com/ezufelt
View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt
On 2011-09-06, at 10:46 AM, Jared Smith wrote:
> You could use radiogroup and listbox ARIA roles with aria-labelledby
> (example at http://webaim.org/presentations/2010/ahg/aria/radiogroup2),
> but there's no current support that I'm aware of for these.
>
> So, I'd strongly recommend still using fieldset/legend, but hiding it
> visually while providing a visual alternative. Something like...
>
> <fieldset>
> <legend class="hidden">What is your birthdate?</legend>
> <div class="legendtext">What is your birthdate?</div>
> <label for="year">Year:</label> <input type="text" id="year">
> ...
> </fieldset>
>
> The fieldset must be hidden off-screen using CSS, NOT hidden using
> display:none or visibility:hidden.
>
> The only weakness of this approach is that a screen reader user
> reading linearly through the form would hear the "What is your
> birthdate?" text one additional time. But, we've found this to rarely
> be an issue because the forms are typically navigated using the tab
> key from form control to form control. You could also give the visual
> text a role of presentation, which may hide it from screen readers.
>
> This approach does not rely on ARIA, provides the native functionality
> of the fieldset/legend, and has fewer shortcomings than your proposed
> solution. I've seen is used very well on some very large, form-driven
> web sites.
>
> Also, I hope you are recommending explicitly associated form labels
> (using for/id) rather than implicit (label element contains the label
> and the control). Explicit labelling is much more reliable and
> bulletproof.
>
> Jared
>
From: Vincent Young
Date: Tue, Sep 06 2011 11:54PM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | Next message →
Everett,
As you pointed out, legend styling is a bit cumbersome, but wanted to
present a cross browser implementation for sake of clarity below:
http://www.webhipster.com/testing/accessibility/label/
This should look the same in all browsers... should. Of course, this has
simple styling and I'm sure Drupal is a different beast.
Best of luck.
- Vincent
On Tue, Sep 6, 2011 at 5:29 PM, E.J. Zufelt < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Jared,
>
> Let me give that a try. I'm of course open to any suggestions others may
> have as well.
>
> We do use explicit for="id" on labels, I just simplified my example code.
>
> Thanks again,
> Everett Zufelt
> http://zufelt.ca
>
> Follow me on Twitter
> http://twitter.com/ezufelt
>
> View my LinkedIn Profile
> http://www.linkedin.com/in/ezufelt
>
>
>
> On 2011-09-06, at 10:46 AM, Jared Smith wrote:
>
> > You could use radiogroup and listbox ARIA roles with aria-labelledby
> > (example at http://webaim.org/presentations/2010/ahg/aria/radiogroup2),
> > but there's no current support that I'm aware of for these.
> >
> > So, I'd strongly recommend still using fieldset/legend, but hiding it
> > visually while providing a visual alternative. Something like...
> >
> > <fieldset>
> > <legend class="hidden">What is your birthdate?</legend>
> > <div class="legendtext">What is your birthdate?</div>
> > <label for="year">Year:</label> <input type="text" id="year">
> > ...
> > </fieldset>
> >
> > The fieldset must be hidden off-screen using CSS, NOT hidden using
> > display:none or visibility:hidden.
> >
> > The only weakness of this approach is that a screen reader user
> > reading linearly through the form would hear the "What is your
> > birthdate?" text one additional time. But, we've found this to rarely
> > be an issue because the forms are typically navigated using the tab
> > key from form control to form control. You could also give the visual
> > text a role of presentation, which may hide it from screen readers.
> >
> > This approach does not rely on ARIA, provides the native functionality
> > of the fieldset/legend, and has fewer shortcomings than your proposed
> > solution. I've seen is used very well on some very large, form-driven
> > web sites.
> >
> > Also, I hope you are recommending explicitly associated form labels
> > (using for/id) rather than implicit (label element contains the label
> > and the control). Explicit labelling is much more reliable and
> > bulletproof.
> >
> > Jared
> >
From: Vincent Young
Date: Wed, Sep 14 2011 12:21PM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | No next message
I know this is an old bug, but wanted to make sure others are aware that in
certain browsers on touch devices when the label is touched, the associated
form field does not receive focus (forgot to mention this in a previous
post). Several possible solutions such as the following example:
http://www.webhipster.com/testing/accessibility/labeltouch/
On Tue, Sep 6, 2011 at 5:29 PM, E.J. Zufelt < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Jared,
>
> Let me give that a try. I'm of course open to any suggestions others may
> have as well.
>
> We do use explicit for="id" on labels, I just simplified my example code.
>
> Thanks again,
> Everett Zufelt
> http://zufelt.ca
>
> Follow me on Twitter
> http://twitter.com/ezufelt
>
> View my LinkedIn Profile
> http://www.linkedin.com/in/ezufelt
>
>
>
> On 2011-09-06, at 10:46 AM, Jared Smith wrote:
>
> > You could use radiogroup and listbox ARIA roles with aria-labelledby
> > (example at http://webaim.org/presentations/2010/ahg/aria/radiogroup2),
> > but there's no current support that I'm aware of for these.
> >
> > So, I'd strongly recommend still using fieldset/legend, but hiding it
> > visually while providing a visual alternative. Something like...
> >
> > <fieldset>
> > <legend class="hidden">What is your birthdate?</legend>
> > <div class="legendtext">What is your birthdate?</div>
> > <label for="year">Year:</label> <input type="text" id="year">
> > ...
> > </fieldset>
> >
> > The fieldset must be hidden off-screen using CSS, NOT hidden using
> > display:none or visibility:hidden.
> >
> > The only weakness of this approach is that a screen reader user
> > reading linearly through the form would hear the "What is your
> > birthdate?" text one additional time. But, we've found this to rarely
> > be an issue because the forms are typically navigated using the tab
> > key from form control to form control. You could also give the visual
> > text a role of presentation, which may hide it from screen readers.
> >
> > This approach does not rely on ARIA, provides the native functionality
> > of the fieldset/legend, and has fewer shortcomings than your proposed
> > solution. I've seen is used very well on some very large, form-driven
> > web sites.
> >
> > Also, I hope you are recommending explicitly associated form labels
> > (using for/id) rather than implicit (label element contains the label
> > and the control). Explicit labelling is much more reliable and
> > bulletproof.
> >
> > Jared
> >