Below, you’ll find resources to share with your team and an activity to test your own forms for accessibility.
To start getting your team or organization to make more accessible forms, we suggest sharing these resources – even 5 minutes is enough to learn more.
You could then use the resources and activity for a live or pre-recorded training or discussion.
Check out Pope Tech’s Monthly Accessibility Focus topics to see all our topics.
Share questions, feedback, and experiences on Twitter
Resources to share
- Pope Tech’s A beginner’s complete guide to form accessibility: the 5 things accessible forms needs and how to fix common errors
- Pope Tech’s Test a form for accessibility checklist and demo video
- W3C’s labeling controls
- MDN’s client-side form validation
- WebAIM’s form validation
- WebAIM’s accessible forms
- Adrian Roselli’s Avoid default field validation
This activity includes making a plan to fix existing forms and a plan on how to create accessible content going forward.
Steps for parts of this activity are also included in Pope Tech’s A beginner’s complete guide to form accessibility so you could encourage individuals to start finding inaccessible content or thinking of ideas.
Fix errors found with automated accessibility testing
- Identify any form-related errors or alerts in your content using Pope Tech’s website scanning tool or the Canvas Accessibility Guide. If you don’t have these tools, you can use WebAIM’s free WAVE extension tool.
- If you’re a Pope Tech user, run an HTML or PDF detail report and configure it for only form-related results.
- If you’re a Canvas Accessibility Guide user, test your syllabus, home page, and other pages for one course.
- WAVE extension tool – Test four pages you contribute to.
- Fix at least ten form errors.
- If there were more than ten issues, make an achievable goal and share that goal with your team or office.
- BONUS: If you don’t have one already, schedule a monthly accessibility check-in (even if it’s just you) to celebrate progress and remove blockers.
Manually test forms for accessibility
Of the 5 things a form needs to be accessible, only one of them can be tested using automated testing. That means you’ll only find issues with the label and input with automated testing, you wouldn’t find issues with instructions, navigation, form validation, or if it’s properly read by a screen reader.
To manually test your form go through each of the questions. You should be able to answer yes for each one.
- Does your form have required fields? If so, are there instructions at the beginning for what indicates a required field or the word required is on the required input fields?
- Does each field tell the user exactly what information to enter?
- Does your form have any specific formatting or anything that might be unique to your form? If so, are there instructions before the form or on the field?
- Can you get to each field in the right order only using the tab key?
- Can you complete the entire form only using a keyboard? Check out WebAIM’s Keyboard Testing interactions to help you get started.
- When using a screen reader, does each field announce an accurate label? The two free screen reader options are Window’s NVDA and Mac’s VoiceOver.
- If something isn’t completed correctly with your form, are there clear instructions on what the issue is and how to fix it?
- If the form validation instructions are inline with the form (right next to the field with the issue), are they read when a screen reader focuses on the field? (If not, this is an issue with pragmatically tying them to the field).
- Is the form validation easy to navigate with only a keyboard?
- When using a screen reader, does all the form validation make sense when announced?
Create accessible forms going forward
Consider these questions as you plan how to create accessible forms whenever a new form is made:
- Who is responsible for designing or creating forms? Is someone else responsible for testing or quality assurance?
- Do they know how to use the WAVE extension tool, or is training needed? They can find issues with the accessible label using the WAVE extension.
- Do they know how to use one of the free screen readers, so they can manually test forms too? The two free screen reader options are Window’s NVDA and Mac’s VoiceOver.
- Would a manual testing checklist be helpful? If so, consider making the manual testing questions above part of form tasks in your task software or printing it and giving it to people who design, create, or test forms.
Get each month’s accessibility focus in your inbox
Want to receive emails when each month’s accessibility focus is launched, and about other accessibility topics?
If you subscribe, we’ll email you web accessibility insights or things we learn once a month. You can unsubscribe at any time.