Hi Julien A little history may help.
In the early days of standards-based markup, people were looking for more structural ways to markup content. It was a bit of a wild west and you saw various attempts to replace a table with x, y, or z. Unfortunately, the standards-based developers did not always read the html guidelines, or the documentation was just vague enough to give some flexibility (Ive been rightly blamed for bastardizing my much beloved definition list). So, there were a number of sites that began using fieldsets and legends outside of forms. You may still find documentation talking about how nice it is to work with. Unfortunately, fieldsets and legends are only for forms and you shouldnt use them otherwise. Ive actually been dealing with this recently in the zemanta firefox plugin. This inserts a fieldset with a list of links for adding related content to blog posts. I logged a bug and theyll fix it in a future release. But it just goes to show this is a commonly misused pattern. Go for the header and div. its semantic and the header gives screen readers (and Opera) something to navigate with. Ted Drake Last-child.com _____ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Julián Landerreche Sent: Tuesday, May 20, 2008 9:45 PM To: wsg@webstandardsgroup.org Subject: [WSG] Fwd: using fieldsets and legends (outside a form) for adding structural markup A workmate come with this idea, which then I have searched on web and haven't found too much information about it, but this: [1] and [2]. The idea: using fieldset and legend for adding structural markup/labes [3]. It seems that using fieldsets _outside_ forms doesn't make the code to invalidate. Also, in HTML 4.01, legend is required, but optional in XHTML. Currently, I like the approach of adding structural markup using a heading (<hn class="structural">) even just a simple <strong class="structural">, and if necessary, hide them by CSS I borrowed the idea from NetRelations.se and 456bereastreet.com. Example: <div id="main-nav"> <strong class="structural">Main navigation</strong> <!-- or <hn>Main navigation</hn> --> <ul> <li><a>Section 1</a></li> <li><a>Section 2</a></li> <li><a>Section 3</a></li> </ul> </div> So, applying fieldset and legend this could be rewritten like this: <fieldset id="main-nav"> <legend class="structural">Main navigation</legend> <ul> <li><a>Section 1</a></li> <li><a>Section 2</a></li> <li><a>Section 3</a></li> </ul> </fieldset> Another example: a list of actions (that are in fact, simple links, so, it's just another navigation) where it could make even more sense. <fieldset id="actions"> <legend class="structural">You can do the following</legend> <ul> <li><a>Create</a></li> <li><a>Delete</a></li> <li><a>Edit</a></li> </ul> </fieldset> Putting aside anything related to CSS styling (legends could be difficult to style, but aren't really difficult to hide using display:none; although using position: absolute; left:-9999px could be better for accesibility, but that positioning method on legends has inconsistencies across browsers): 1. Could there be accessibility issues using fieldset/legend outside a form? 2. Or could this method enhance the accessibility (in fact, structural labels enhance accessibility)? 3. Is there any other research/resource that can add some light on this? Thanks. Julián. [1] http://www.opendesigns.org/forum/discussion/2047/ [2] http://drupal.org/node/233928 [3] http://www.usability.com.au/resources/source-order.cfm ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ******************************************************************* ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
