E-mail List Archives

Search E-mail List Archives for

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

From: E.J. Zufelt
Date: Tue, Sep 06 2011 12:57AM
Subject: Looking for an alternative to fieldset / legend
No previous message | Next message →

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: Bryan Garaventa
Date: Tue, Sep 06 2011 1:45AM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | Next message →

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: Vincent Young
Date: Tue, Sep 06 2011 7:36AM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | Next message →

> 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: Bryan Garaventa
Date: Tue, Sep 06 2011 8:21AM
Subject: Re: Looking for an alternative to fieldset / legend
← Previous message | No next message

True, which is why Fieldsets and Legends are the prefered methods for
ensuring the accessibility of complex form field groupings despite visual
rendering.

One other solution is to use screen reader accessible hidden text within the
Label tag for each form field, front loading the legend text, which wouldn't
appear visually. This may duplicate the screen text, which some might find
confusing however.

Bryan Garaventa
www.WhatSock.com

----- Original Message -----
From: "Vincent Young" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, September 06, 2011 6:38 AM
Subject: 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
>> >
>> >
>> >
>> >