Build an Accessible Contact Form
Combine labels, ARIA attributes, keyboard navigation, and color contrast to build a fully accessible contact form.
Step 1 of 5
What we're building
In this capstone, you will combine everything from this module to build a fully accessible contact form. Contact forms are on almost every website — from Amazon's customer service page to your local restaurant's website. They look simple, but they are one of the most common sources of accessibility failures on the web. Missing labels, no error feedback, keyboard traps in custom dropdowns, low-contrast placeholder text, and missing ARIA attributes make forms unusable for millions of people.
Our contact form will have: - A proper form structure with
Web Standard
WCAG has multiple success criteria specifically about forms: 1.3.1 (Info and Relationships — labels must be programmatically associated), 3.3.1 (Error Identification — errors must be described in text), 3.3.2 (Labels or Instructions — inputs must have labels), and 4.1.2 (Name, Role, Value — all form controls must have accessible names). Our form will satisfy all of these.
Learn more on MDN
HTMLREAD ONLY
PREVIEW