Web Forms Quick Start Guide
Learn how to create accessible forms from the World Wide Web consortium (W3C).
- Provide Clear Labels and Instructions. Every form control (text fields, checkboxes, radio buttons, etc.) must have a meaningful, programmatically associated label. Instructions for the entire form and individual fields should be clear and concise, especially regarding required inputs, data formats, and time limits.
- Structure and Grouping. Use semantic HTML elements to convey meaning and structure. Use the <fieldset> and <legend> elements to group related form controls (e.g., a set of radio buttons for a single question).
- Keyboard Accessibility. All interactive elements must be keyboard accessible, as many users with disabilities do not use a mouse.
- Error Prevention and Correction. Help users avoid and correct mistakes by providing highly visible, specific, and helpful inline error messages that explain how to fix the issue. Error messages should be descriptive and include the field’s label text.
- Use Standard HTML Elements. Whenever possible, use native HTML form elements (e.g., <input type=”date”> instead of custom date pickers) as they have built-in accessibility features.
- Visual Design. Ensure sufficient contrast between form elements and the background, and provide clearly defined boundaries for input fields. Avoid using color alone to convey information, such as marking required fields only in red.
Reference List: World Wide Web Consortium. (2014, September 15). Forms tutorial. W3C Web Accessibility Initiative. https://www.w3.org/WAI/tutorials/forms/.
Web Forms Courses & Tutorials