Fieldsets, Legends and Screen Readers
Italian translation Fieldset, Legend e Screen Reader by Roberto Castaldo.
The grouping and labelling of thematically related controls within a form is an important aspect of providing semantic information so users can understand and complete a form successfully. Differences in quality and implementation of support across user agents can hamper some users’ ability to benefit from this information. This must not be taken as disincentive to developers, as the benefits of using these elements outweighs the negatives. But it is clear that some assistive technology vendors need to improve implementation of HTML features that enhance accessibility, so their users can gain the most benefit.
Using the fieldset and legend elements
The HTML 4.1 specification provides a method for grouping and labeling related form controls. This capability is provided by the use of the
fieldsetelement allows authors to group thematically related controls and labels. 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.
legendelement allows authors to assign a caption to a
fieldset. The legend improves accessibility when the
fieldsetis rendered non-visually.
Whenever a label is needed to provide information about a related set of controls consider using the
fieldset elements. They can be used to group any thematically related controls in a form such as address details, date of birth and sets of radio buttons or check boxes.
Note: It is required that the
legend are used in conjunction. A
fieldset cannot be used without a
legend and visa versa.
<input type="radio" name="filter" id="a">
<input type="radio" name="filter" id="b">
<input type="radio" name="filter" id="c">
Presentation to users
The default rendering of the
legend elements is fairly uniform across the major visual browsers. The
fieldset is displayed with a solid border and the
legend text is overlaid on the top left border. This provides a clear visual indication of the controls that are contained within the group and the caption (legend) that applies to the grouped controls.
Default visual display in Internet Explorer, Firefox and Opera
For visual users, the association can be represented by the position of the legend and the enclosing of related controls within a bordered box. How should non visual user agents such as screen readers convey the structural associations provided by the legend and fieldset elements? The most important relationship is that of the
legend text to the individual controls contained in a fieldset, as the legend serves to describe the context of the data or choices required. As the content is accessed linearly by screen readers, the apparent simple visual association is not so easily or clearly expressed.
The UAAG 1.0 (User Agent Accessibility Guidelines) provide this advice on implementation:
HTML 4 specifies the FIELDSET element , which allows authors to group thematically related elements and labels. The LEGEND element assigns a caption to a
FIELDSET. For example, the
LEGENDelement might identify a
FIELDSETof radio buttons as “Connection Rate.” Each button could have a LABEL element, stating a rate. When it receives content focus, identify the radio button as “Connection Rate: Radio button X of Y: 28.8kpbs”, where “Y” represents the total number of radio buttons in the grouping and “28.8kbps” is the information contained in the
With this implementation advice in mind, 2 of the major screen readers were tested using an example
fieldset containing 3 radio buttons labelled “television, radio, cinema” with a
legend of “filter by”. It was found that what is announced varies depending on the software, mode and navigation keys used.
In Virtual PC cursor and Forms mode the
legend is announced when each of the controls contained in a
fieldset receive focus.
virtual PC cursor ‘browse’ mode
If the user moves through the content using a “Say All” (ins+down arrow) command or “Say Next Line” command (down arrow), the
legend is announced when intitally encountered, but no indication of association to related controls is provided:
filter by radio button televsion, radio button radio, radio button cinema
If the “Move To Next Form Field” (F) command (only available in ‘browse’ mode) is used to move through radio buttons within the
fieldset the result is different:
filter by radio button television, filter by radio button radio, filter by radio button cinema
The results for navigating through controls contained within the
fieldset are the same as when the “Move To Next Form Field” command is used, the
legend text is prefixed to each control label contained within the fieldset.
Using the default settings no indication of the
legend is announced in any mode. For the user to be made aware of the presence of a
fieldset, the user must first modify the Window Eyes browse mode verbosity settings
Insert Beginning / End Message (Fieldsets) This option will notify the user of both the beginning and end of a
Browse mode – announce fieldset option enabled
When this option is enabled, if the user navigates using the down arrow, the start and end of the
fieldset is announced as is the
filter by fieldset start radio button television, radio button radio, radio button cinema filter by fieldset end
The user can also navigate using the “Next Fieldset” (E) and “Previous Fieldset” (shift+E) commands. When these commands are used, the end of a fieldset is not announced. If the “Next Control” (C), “Previous Control” (shift+C) or the TAB key is used to navigate,
legends are not announced.
When using Firefox, Window Eyes does not recognize or announce the presence of the
legend elements. So for example, when using the “Next Fieldset” (E) command “no fieldset” is announced.
Browse mode off (forms mode)
When the user is not in browse mode (has to be disabled to for the user to interact with edit boxes, text areas and dropdown lists) the user is confined to navigating through controls using the TAB key and no
legend information is announced.
- JAWS 8 and Window Eyes 5.5 were used for testing. The fieldset test page was viewed in Internet Explorer 7 and Firefox 2 on Windows XP.
- The examples of screen reader output have been edited to include only pertinent announcements.
legend elements are a useful part of a web developer’s toolkit for making forms more accessible to people with disabilities. The support in Window Eyes is quite different from the advice given in UAAG1.0. Due to this, Window Eyes users will not be able to gain the full benefit of the additional information provided through the use of these elements. In fact no
legend text will be announced to users unless they first enable an option to announce such information. Even when the option is enabled Window Eyes users will not receive this important information when they are inputting data into form fields. Furthermore if they use Window Eyes in conjunction with the Firefox browser no
fieldset information will be provided.
The situation for JAWS users is much better. The JAWS implementation is consistent with the advice in UAAG 1.0. The grouping of controls using the
fieldset is not explicitly announced (as it is in Window Eyes), but the announcing of the fieldset is not advised in UAAG and may be of limited value or overly obtrusive for the users, which could be why it is not enabled by default in Window Eyes. Importantly the association of
legend text with controls contained within a
fieldset is reliably conveyed by the announcement of the
legend along with a control’s text label. This behaviour works when the user is browsing or interacting with form fields and across supported browsers.
Due to the nature of the advice in UAAG 1.0 and its implementation in JAWS (legend text being announced before a control’s label text), developers should be mindful of the length of
legend texts, as lengthy
legend texts have been found to make forms difficult to use. Another potential pot hole is the JAWS behaviour when headings are included within a
fieldset. In this case JAWS will typically use the heading text in place of the
legend text, this is a quirk or bug, which can lead to unexpected and problematic consequences. This needs to be fixed in JAWS, but until it is, perhaps the use of headings within fieldsets should be minimised.
legend elements are well supported by many user agents. While it is helpful to have knowledge of some of the quirks and failings of particular user agents, the poor support in software such as Window Eyes must not stop developers using these elements or accessibility practitioners recommending their use. Their use can make it easier for a wide range of disabled users to fill out forms. In order to improve accessibility for all disabled users, web standards must be adhered to so that developers can code for accessibility with confidence. It is the assistive technology vendor’s job in these cases to fix their implementations.