Test forms for accessibility
Forms that have already been made but not assessed for accessibility can be tested using the WAVE browser extension to help identify issues such as form fields that are missing labels, incorrect heading structure and images that are missing alternative text.
While many errors can be found through using WAVE a manual review is always recommended. Questions about form accessibility can be sent to accessibility@wayne.edu.
Provide a summery and instructions
At the top of every form page, include a summary of the form that includes:
- The purpose of the form
- Who should be filling out the form
- Any documents that the user needs to have to complete the form
- A time estimate to complete the form
- Contact information for any support or questions relating to the form
Form structure and comprehension
Use tables to arrange all form elements
Putting form elements in tables ensures that form labels remain near the corresponding elements. Here is an example of two form fields where the “First name” item was placed in a table and the “Last name” item was not:
When using tables ensure to use appropriate names, as these names may be read out to screen reader users. While deciding how many tables to use is up to you, a good strategy is to use a table per section.
Using data tables
Tables can be switched to “data tables” which changes a table from a design feature to something that holds tabular data. When using data tables, ensure that every column has a proper heading that is descriptive.
Use headers to structure page content
Headers are helpful for all users to navigate and understand form content. Ensure headings are nested properly as screen reader users rely on logical heading structures to navigate content. Do not use bold typeface or large font size to denote headings.
Avoid asking for repetitive information
Avoiding making a user submit the same information more than once to avoid any additional strain or burden on the user.
Use plain language
Avoid jargon and complex sentence structures.
Break forms up into multiple pages
Forms are easier for users to process and complete if broken into multiple pages instead of one long form.
Hyperlinks
Set all hyperlinks to open in a new window
Generally, in web accessibility, it is not recommended to have hyperlinks open in a new window. However, forms are the exception to this rule because links would otherwise send users away from the form, which may be disruptive or make the user lose progress.
Avoid ambiguous link text
Links connected to phrases like Click here do not provide the necessary context for some users to understand the action that the link will perform. This language is also difficult for screen readers and is a common red flag for scams. Instead, always use hyperlinks that are descriptive and clear.
Underline all hyperlinks
All hyperlinks must be underlined to ensure link text is appropriately signified. However, Dynamic Forms does not make this standard. When you add a link in the text editor, it will look like it is underlined. However, if you preview the page, the link will lose its underline. You must manually make the text be underlined in the text editor for links to be visibly underlined when published.
Add alternative text for all images
All images should either have alternative text or be marked as decorative. Decorative images are images that do not include any essential or relevant content the user needs to complete the form. If the image is a chart or a graph, consider building it with a Dynamic Forms table.
Color contrast
Use tools such as The Colour Contrast Analyser to determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators to meet AA Web Content Accessibility Guidelines (WCAG).
Form item requirements
Form names
Form item names are the technical name of a form item that won’t be visually shown. However, every form item must have a clear and descriptive name, as these names can be read by screen reader users. Names must be unique and relate their purpose or function. While no spaces are allowed, underscores can be used.
Form labels
Labels are set to be visible to users and provides the specific instructions for a form item. Form items must always have a label associated with them. Screen reader users need to have the label associated with each input and the default label is what the screen reader will read (even if the label is marked as hidden).
Avoid placeholder text
Placeholder text within a text box can cause usability issues, instead use a label to describe the exact format and/or custom validation text to guide data input expectations and prevent errors.
Accessibility resources
For general accessibility support, information and resources please visit the Wayne State Accessibility website.