Webform Accessibility Basics

Webforms pose additional challenges when built with accessibility in mind. Users and screen readers are expected to be able to navigate forms following a logical and straightforward data entry flow. The following guidelines comprise just a basic set of requirements for accessible forms:

  • Provide Explicit Labels: Every form control (text field, checkbox, radio button, etc.) must have a programmatically associated label. Use the HTML 'label' element with the 'for' attribute that points to the 'id' of the form input. This allows screen readers to announce what each field is for. (WCAG SC 3.3.2: Labels or Instructions)
  • Clearly Identify Required Fields: Indicate required fields in a way that doesn't rely on color alone. Use the 'required' and/or 'aria-required="true"' attributes on the input element, and supplement visual cues like an asterisk with text, such as including "(required)" within the 'label'.
  • Group Related Controls: For groups of related controls, like a set of radio buttons or checkboxes answering a single question, use the 'fieldset' and 'legend' elements. The 'legend' acts as the overall question or label for the group, providing essential context. (WCAG SC 1.3.1: Info and Relationships)
  • Implement Accessible Error Handling: When a user makes an error, the validation message must be clear, specific, and programmatically associated with the relevant field. Identify the field in error, describe the problem (e.g., "Please enter a valid email address"), and suggest a correction. Use ARIA attributes like 'aria-describedby' to link error messages to their corresponding inputs. (WCAG SC 3.3.1: Error Identification & SC 3.3.3: Error Suggestion)
  • Ensure Full Keyboard Accessibility: All form functionality must be operable using only a keyboard. Users must be able to tab to every field, make selections within dropdowns, check boxes, and activate the submit button without needing a mouse. (WCAG SC 2.1.1: Keyboard)
  • Maintain a Logical Focus Order: The order in which a user navigates through the form fields using the Tab key must be logical and predictable, typically matching the visual flow of the form. (WCAG SC 2.4.3: Focus Order)
  • Use the 'autocomplete' Attribute: For fields that collect user information like name, email, or address, use the 'autocomplete' attribute with appropriate values (e.g., 'autocomplete="name"', 'autocomplete="email"'). This helps users with cognitive and motor disabilities by enabling browser auto-filling. (WCAG SC 1.3.5: Identify Input Purpose)

Dynamic Webforms

Forms may contain sections that are reconfigured dynamically, based on user input in another form section. For example, on an RFI form, prospective students may identify themselves as international students. Based on that choice a section of the form may then reveal itself that pertains to international students specifically, whereas some other form section pertaining to residents only may be obscured.

It is necessary to make dynamic form behavior WCAG compliant. The key is to ensure that changes are communicated clearly to all users, especially those using assistive technologies like screen readers.

When a section on a form appears or disappears, a sighted user can see it happen. An accessible implementation must ensure a non-sighted user hears it happen and can interact with it logically.