We recently started working with browser implementers to improve the state of
fieldset, the 21 year old feature in HTML, that provides form accessibility benefits to assistive technologies like screen readers. It suffers from a number of interoperability bugs that make it difficult for web developers to use.
Here is an example form grouped with a
<legend> caption in a
And the corresponding markup for the above example.
<label><input type=radio name=pronouns value=he> He/him</label>
<label><input type=radio name=pronouns value=she> She/her</label>
<label><input type=radio name=pronouns value=they> They/them</label>
<label><input type=radio name=pronouns value=other> Write your own</label>
<input type=text name=pronouns-other placeholder=…>
Based on a query of the HTTP Archive data set, containing the raw content of the top 1.3 million web pages, we find the relative usage of each HTML element. The
fieldset element is used on 8.41% of the web pages, which is higher than other popular features, such as the
canvas elements; however, the
legend element is used on 2.46% of web pages, which is not ideal for assistive technologies. Meanwhile, the
form element appears on 70.55% of pages, and we believe that if interoperability bugs were fixed, correct and semantic
legend use would increase, and have a positive impact on form accessibility for the web.
Fieldset standards history
In January 1997, HTML 3.2 introduces forms and some form controls, but does not include the
In July 1997, the first draft of HTML 4.0 introduces the
The FIELDSET element allows form designers to group thematically related controls together. Grouping controls makes it easier for users to understand their purpose while simultaneously facilitating tabbing navigation for visual user agents and speech navigation for speech-oriented user agents. The proper use of this element makes documents more accessible to people with disabilities.
The LEGEND element allows designers to assign a caption to a FIELDSET. The legend improves accessibility when the FIELDSET is rendered non-visually. When rendered visually, setting the align attribute on the LEGEND element aligns it with respect to the FIELDSET.
In December 1999, HTML 4.01 is published as a W3C Recommendation, without changing the definitions of the
In September 2008, Ian Hickson adds the
fieldset element to the HTML standard.
In February 2009, Ian Hickson specifies rendering rules for the
fieldset element. The specification has since gone through some minor revisions, e.g., specifying that
fieldset establishes a block formatting context in 2009 and adding
min-width: min-content; in 2014.
In August 2018, I proposed a number of changes to the standard to better define how it should work, and resolve ambiguity between browser implementer interpretations.
As part of our work at Bocoup to improve the interoperability of the
legend child element, we talked to web developers and browser implementers, proposed changes to the standard, and wrote a lot of tests. At the time of this writing, 26 issues have been reported on the HTML specification for the
fieldset element, and the tests that we wrote show a clear lack of interoperability among browser engines.
Of the 26 issues filed against the specification, 17 are about rendering interoperability. These rendering issues affect use cases such as making a
fieldset scrollable, which currently result in broken scroll-rendering in some browsers. These issues also affect consistent
legend rendering which is causing web developers avoid using the
fieldset element altogether. Since the
fieldset element is intended to help people who use assistive technologies to navigate forms, the current situation is less than ideal.
HTML spec rendering issues
In April of this year, Mozilla developers filed a meta-issue on the HTML specification “Need to spec fieldset layout” to address the ambiguities which have been leading to interoperability issues between browser implementations. During the past few weeks of work on
fieldset, we made initial proposed changes to the rendering section of the HTML standard to address these 17 issues. At the time of this writing, these changes are under review.
Proposal to extend -webkit-appearance
Web developers also struggle with changing the default behaviors of
legend and seek ways to turn off the “magic” to have the elements render as normal elements. To address this, we created a proposal to extend the
-webkit-appearance CSS property with a new value called
fieldset and a new property called
legend that are together capable giving grouped rendering behavior to regular elements, as well as resetting
legend elements to behave like normal elements.
The general purpose proposed specification for an “unprefixed” CSS ‘appearance’ property, has been blocked by Mozilla’s statement that it is not web-compatible as currently defined, meaning that implementing
appearance would break the existing behavior of websites that are currently using CSS
appearance in a different way.
We asked the W3C CSS working group for feedback on the above approach, and they had some reservations and will develop an alternative proposal. When there is consensus for how it should work, we will update the specification and tests accordingly.
We had also considered defining new
display values for
legend, but care needs to be taken to preserve web compatibility. There are thousands of pages in HTTP Archive that set ‘display’ to something on
legend, but browsers typically behave as
display: block was set. For example, specifying
display: inline on the legend needs to render the same as it does by default.
In parallel, we authored an initial specification for the ‘-webkit-appearance’ property in Mike Taylor‘s WHATWG Compatibility standard (which reverse engineers web platform wonk into status quo specifications), along with accompanying tests. More work needs to be done for the ‘-webkit-appearance’ (or unprefixed ‘appearance’) to define what the values mean and to reach interoperability on the supported values.
We have started looking into testing accessibility explicitly, to ensure that the elements remain accessible even when they are styled in particular ways.
This work has uncovered ambiguities in the specification, which we have submitted a proposal to address. We have also identified interoperability issues in the accessiblity mapping in implementations, which we have reported.
As of September 18 2018, the following issues have been fixed in Gecko:
fieldset’s default padding to match other browsers
<legend>not child of
<fieldset>should have 2px padding
- interaction in between border-image,
<legend>auto inline margins doesn’t work correctly
In Gecko, the bug Implement
legend in terms of ‘-webkit-appearance’ currently has a work-in-progress patch.
The following issues have been fixes in Chromium:
fieldsetshould have min-inline-size instead of min-width in UA stylesheet
- The field set border is broken with
<legend>in vertical layout
The WebKit and Edge teams are aware of bugs, and we will follow up with them to track progress.
legend elements are useful to group related form controls, in particular to aid people who use assistive technologies. They are currently not interoperable and are difficult for web developers to style. With our work and proposal, we aim to resolve the problems so that they can be used without restrictions and behave the same in all browser engines, which will benefit browser implementers, web developers, and end users.
(This post is cross-posted on the WHATWG blog.)