Proper organization of information within a web page is of paramount importance when developing content. One commonly-overlooked aspect to content organization relates to correlated fields on a form, oftentimes sharing the same “name.” Fieldsets are an easy but important way to group together related inputs and give them a common label. They can be utilized for any form field type as well, allowing developers to group together a collection of fields such as “Shipping Address” which may include text, checkbox, radio, and other controls. Fieldsets can also be used for a small collection of radio buttons such as On/Off, and everything in between.

Accessibility & Usability Considerations

Input fields are used on almost every website, and are utilized by end-users on almost every site visit. Because of this, it is extremely important that developers understand how assistive technologies (AT), such as screen readers, interact with form inputs, and also understand how ambiguous naming schemes can be when accessed by AT users. For instance, there may be a function that can be turned on or off, and a developer may want to name both of the radio buttons, “feature”, and have the values of “on” and “off” for the two controls. When navigating to the radio group, an AT User and hear “feature” for On, and “feature” for Off. Fieldsets are a great way to present contextual information that is important for ensuring a usable and fully optimized user experience, such as, in this example, using “feature On” and “feature Off.”

Relation to WCAG/Section 508

The World Wide Web Consortium (W3C) outlines the following WCAG 2.0 relationships between carousels and accessibility compliance:

Success Criteria:

1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)

3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

How AudioEye Makes Forms Better

AudioEye has done extensive research on form element preferences and has crafted an accessible solution that satisfies a wide spectrum of users. The AudioEye Digital Accessibility Platform is a great tool for running automated scans of entire websites, individual pages or code blocks, or content fed through an API. As part of the results of the automated scanning process, the Digital Accessibility Platform identifies fieldset-related issues and provides developers with suggested best-practices and remediation techniques.

AT User Solution

In line with the above mentioned guidelines, AudioEye works with its customers to ensure conformance with these WCAG 2.0 Success Criteria. To ensure optimal usability for all users, AudioEye works with its customers to update fieldsets through the application of updates made to the client source or by dynamically applying improvements through the integration of the AudioEye JavaScript. The focus of this effort includes the following:

  • Ensuring elements on a form are fully understandable to users of Assistive Technologies
  • Maintaining all visual aspects of the existing UI

AudioEye Web Personalization Tools Solution

For customers adopting AudioEye’s Ally Toolbar, end-users are provided an optimized user experience when engaging and interacting with fields. For users that do not engage any of the AudioEye tools, remediations delivered via JavaScript will programmatically resolve the issue, behind the scenes.

As is the case with many digital technologies, there are multiple acceptable methods for providing comprehensive information to AT users. For remediation purposes, when simply editing the source code is not an immediate option, AudioEye prefers not to alter the overall structure of the website’s markup, instead using an aria-describedby attribute. We create a block level element with an ID (e.g. div, h3) to substitute for the fieldset legend, and then each radio or checkbox receives an aria-describedby equal to that ID. The screen reader will concatenate the aria-describedby reference with any labels associated with the field, and that will provide the expected context for the form field.

Helpful Links & Resources

Grouping Controls

H71: Providing a description for groups of form controls using fieldset and legend elements

Mark Baker

Read more posts by this author.

Subscribe to the AudioEye nClusion Newsletter

Get the latest industry news & insights delivered right to your inbox.

  or subscribe via RSS with Feedly!