- What: An accessible form ensures that every input field (text box, checkbox, or dropdown) is clearly labeled and programmatically connected to its description.
- Why: For a sighted user, it’s easy to see that a text box is for a “First Name” because the text is right next to it. However, a non-visual user needs a specific “Label” tag for the screen reader to announce what that box is for. Without it, the user just hears “Edit text, blank,” with no idea what to type.
1. Permanent Labels (Never Use Placeholders Alone)
“Placeholder text” is the light gray text inside a box that disappears when you start typing. Once a user clicks into the box, the instruction vanishes. This is a significant barrier for users with cognitive or memory impairments.
- The Rule: Always use a visible, permanent label above or beside the field.
- The Fix: Use an automated accessibility checker to review the labels on your forms. If your forms are missing permanent labels, review your platform settings for how to add these labels. If your platform does not display labels, you may need to reach out to the platform developer for a fix.
2. Clear Error Messaging
If a user misses a required field, they need to know exactly what went wrong and where the error is.
- The Rule: Don’t just turn the box red. Color alone is not accessible.
- The Fix: Use a text-based error message (e.g., “Error: Please enter a valid Boise State Email Address”) and ensure the screen reader’s “focus” jumps to that error so the user can fix it immediately. These error messages are often built into the platform settings and may need to be turned on. To test, try and submit your form with missing required content to review what happens.
3. Group Related Items
If you have a group of checkboxes (e.g., “Select your shirt size: Small, Medium, Large”), they should be grouped together.
- The Rule: Use “Fieldsets” or “Group Labels” in your form builder. This ensures that when a user tabs to “Small,” the screen reader also announces “Select your shirt size” so they have context for the choice.
- The Fix: Use the appropriate field type for the content you are asking from users. Most form platforms provide a variety of options for you to choose from. Use a radio button when a single option is required and checkboxes when multiple options are allowed. Review your platforms help documentation for more details about the different field types available.
4. Error Prevention: Set Expectations Early
Don’t wait until a user clicks “Submit” to tell them they made a mistake. Give them the tools to succeed before they even start typing.
- Provide a “Pre-Flight” Checklist in the form description: If the form requires specific documents (like a transcript or a photo ID), list those requirements at the very beginning of the page.
- Define Formats Clearly: If a date must be entered as MM/DD/YYYY, state that in the label. Don’t leave the user guessing.
- Time Limits: If the form will “time out” after 20 minutes, warn the user prominently. For users who take longer to type or navigate, an unexpected timeout can mean losing all their progress.
- The “Review” Step: For high-stakes forms (like a job application, financial information, or event registration), provide a summary page at the end. This allows the user to double-check their information for errors before the final submission.