Building accessible forms with WCAG 2.0
Recently I’ve been working on some forms that are a little more complicated and require a little more interactivity than your average blog comment or contact form.
Of course I wanted to make sure that using JavaScript to hide and display content and form controls as the user interacts with the forms wouldn’t cause accessibility problems. The user group I’m mostly concerned about in this context is screen reader users.
While doing some testing and research on this I came across Roger Hudson’s article Accessible Forms using WCAG 2.0, which proved to be very useful.
The article contains quite a few examples of how screen readers interact with forms. The JavaScript-specific examples are displaying form validation error messages, dynamically populating select elements, and showing and hiding form sections. These examples are accompanied by videos showing a screen reader user interacting with the forms. Throughout the article, relevant WCAG 2.0 Success Criteria are referenced.
This is recommended reading, especially if you use JavaScript to make forms more interactive.