User:Mtanalin/legend-placement

From W3C Wiki

Change proposal for LEGEND element (HTML5)

Summary

LEGEND element should be allowed to be wrapped in elements other than FIELDSET to make it possible to achieve arbitrary styling of LEGEND — exactly as it's possible currently with other styleable elements like H1 or P that are not forced to be children of specific parent elements or to have exact sibling position in document tree.

To make browsers' transition to new behavior smoother, new ILEGEND element should be introduced. The ILEGEND element should have ability to wrap it in elements other than FIELDSET. Unlike old LEGEND, new ILEGEND has no special styling at all (e.g. display:inline does not work for LEGEND in current versions of Opera and WebKit-based browsers).

This proposal has originally been made via W3 bug tracker: see bug 12834.

Rationale

LEGEND element should be allowed to be wrapped in elements other than FIELDSET to make it possible to achieve arbitrary styling of LEGEND — exactly as it's possible currently with other styleable elements like H1 or P that are not forced to be children of specific parent elements or to have exact sibling position in document tree.

Currently, LEGEND element is allowed solely as exact first child of a FIELDSET. This is purely formal limitation that makes styling of LEGEND too complicated, unreliable/non-future-proof, or literally impossible.

Currently, when wrappers for LEGEND are needed for styling, web developers are forced to just drop LEGEND element and use another — less suitable — element (like H2-H6 or DL/DT) instead of LEGEND just because "validator said this is invalid".

Wrapping LEGEND in arbitrary elements generally works right now in all browsers (see testcases).

For example, following code should be valid:

    <fielset>
        <div>
            <ul>
                <li><a href="#">Minimize</a></li>
                <li><a href="#">Close</a></li>
            </ul>
            <legend>Example</legend>
        </div>

        <input type="text" name="something" />
        <input type="text" name="another-field" />
        ...
    </fieldset>

A usecase where inline legend helps to provide more DRY markup without need for duplicating legend text ("credentials" is both legend text and a part of hint paragraph):

    <fieldset>
        <p>Please provide your <ilegend>credentials</ilegend></p>

        <input type="text" name="username" />
        <input type="password" name="password" />
    </fieldset>

To make browsers' transition to new behavior smoother, new ILEGEND element should be introduced, and the ILEGEND element should have same definition as new definition for LEGEND element described above. (The i prefix in proposed ILEGEND tag-name means "inline" like for IFRAME compared with FRAME.) Benefit of introducing new element is that, unlike old LEGEND element, new element has no any special legacy styling at all while LEGEND element has some cross-browser issues (main issue is that display:inline does not work for LEGEND in current versions of Opera and WebKit-based browsers).

In discussion of similar issue (dedicated to allowing wrapping DT/DD elements in DIV or DI element) raised by Ian Hickson (HTML5-spec editor) in www-style@w3.org mailing-list, fantasai (one of major CSSWG chairs) said:

I don't think this is a CSS problem. I think it's an HTML problem.

Pseudo-elements are a non-trivial thing to spec, and a non-trivial thing to implement, and a comparatively confusing thing to use.

Details

Currently, contexts in which LEGEND element can be used are defined in the HTML5 spec as:

As the first child of a fieldset element.

Instead, definition should be following:

As a descendant of a fieldset element.

New ILEGEND element should be introduced. The ILEGEND should have following definition (due to insurmountable limitations of Wiki engine itself, below is almost plain-text version of proposed spec text marked-up simplified way. For HTML version suitable for direct copying to the spec, see separate external page located on proposal-author's website):

The ilegend element

Categories:
None.

Contexts in which this element can be used:
As a descendant of a fieldset element.

Content model:
Phrasing content.

Content attributes:
Global attributes

DOM interface:

interface HTMLLegendElement : HTMLElement {
  readonly attribute HTMLFormElement? form;
};

The ilegend element represents a caption for the rest of the contents of the fieldset element (if any) that contains that ilegend element and, if the ilegend element has multiple fieldset containers nested in each other, is a fieldset element nearest to the ilegend element up in the DOM tree.

    ilegend . form
    Returns the element's form element, if any, or null otherwise.

The form IDL attribute's behavior depends on whether the ilegend element is in a fieldset element or not. If the ilegend has a fieldset element as its container, then the form IDL attribute must return the same value as the form IDL attribute on fieldset element nearest to the ilegend element up in the DOM tree. Otherwise, it must return null.

Impact

Positive Effects

Wrapping LEGEND in elements other than FIELDSET works right now in all browsers and allows:

  • to get rid of most of "special" styling of LEGEND such as "magic" nonresettable margins of LEGEND and its parent FIELDSET, and margin-bottom of LEGEND working inconsistently across browsers (e.g. in WebKit we are forced to use padding-bottom instead of margin, which leaves us without collapsing margins in particular);
  • if styles are not applied to LEGEND itself in some browsers, then we could just apply arbitrary styling to wrapper instead of LEGEND itself while still having LEGEND for semantics purposes;
  • get rid of just improper, purely theoretical legacy limitation of the HTML spec.

Negative Effects

For visual browsers, there are no negative effects. Existing websites are unaffected. On new sites, if LEGEND has wrapper other than FIELDSET, then it's most likely done for styling purposes, and therefore default styling (lost when adding wrapper for LEGEND) of LEGEND/FIELDSET pair is unneeded/undesirable, and therefore current browsers' rendering is perfectly OK without even need for them to be changed (only thing to fix is that Webkit and Opera do not apply display:inline to LEGEND element; Firefox and IE are OK).

There is some possibility that current versions of nonvisual browsers (speech browsers, screen readers) will not be able to understand that LEGEND that is not first direct child of FIELDSET is actually LEGEND for its ancestor FIELDSET. But that eventually would be naturally resolved as software is updated. Right now, for such cases when accessible LEGEND is absolutely required for web-application to be used, the HTML spec should contain corresponding note:

For web-applications where LEGEND/FIELDSET semantic relations are critical to work with web-application, it's recommended to make LEGEND first direct child of FIELDSET to make it more backward-compatible with older nonvisual accessibility tools like screen readers.

Introducing new ILEGEND element has same possible negative effects as for any new element introduced in new version of HTML standard (e.g. DETAILS/SUMMARY).

Conformance Classes Changes

LEGEND element should now get allowed to be wrapped in elements other than FIELDSET.

Also, new ILEGEND element should be introduced, and the ILEGEND element should have same definition as new proposed definition for LEGEND.

Risks

See negative effects.

References