Forms

Step 1: Understand your goals

1. Required fields - Required fields are clearly marked with “(required)” and the field’s code includes the <required> attribute.
2. Associated labels - Each field has a text label, not placeholder text, that is programmatically associated with the field.
3. Keyboard accessible - Fields that contain a calculator, calendar-date pickers, or time pickers also provide a keyboard-accessible option such as allowing users to type in the info.
4. Grouping controls - Groups of fields are placed in a <fieldset> with a <legend> to describe the collection.
5. Form instructions - When appropriate, there are clear instructions for completing the form or entering data.
6. Error feedback - Error messages help users know where an error occurred and they are announced by the screen reader. 
7. Timing adjustable - Users can extend a form’s time limit or save their data, or the timeout is set for more than 20 hours.

Form accessibility resources
Forms tutorial on w3.org

Step 2: Watch the video

People use forms to interact with websites and apps. For example, many websites have forms so users can register, log in, submit questions, chat with a person or chatbot, add comments, and make purchases. These forms need to work for people who:

• Navigate with their keyboards
• Have low vision
• Cannot distinguish colors

Review these goals and basic testing steps to find out how accessible your forms are.

Step 3: Practice your new skill

Basic tests

• Verify there is a visible way to identify required fields.
• If an asterisk or symbol is used, ensure there is a legend that defines it at the top of the form.
• Verify the word ‘required’ (lower case) is in the ANDI Output for required fields.
• Make sure there is a text label for each field that is not placeholder text (not inside of the field).
• Verify that the label for each field is in the code by seeing that it appears in the ANDI Output.
• Use the keyboard to access all form fields and interact with them.
• Use Tab and Shift+Tab to navigate between fields.
• Use the up and down arrows to move between radio buttons.
• Use the Enter key to simulate a mouse click.
• Verify that you do not get stuck in any field.
• Try to use any date or time pickers with your keyboard. If you cannot, make sure there is also a way to type in the numbers manually.
• If there are form instructions, verify they appear before the form field and are helpful.
• Intentionally skip a required field and submit the form. Verify that the error messages are clear and helpful for the user. 
• If the form is timed or has a timeout feature, verify that there is a way for you to save your data or extend the timer/timeout.

Advanced tests

• Activate the NVDA screen reader (keyboard shortcuts for NVDA) and listen for the error message when you click Submit. Verify that it clearly tells the user where the error occurred.
• Click in a field that is part of a related group (checkboxes, radio buttons) and look in the ANDI Components section to verify there is a “Legend” defined.

Next lesson: Images and media