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:
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
- 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
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.