Form focus / screen reader issues related to server side form validation

Created on 12 October 2021, almost 3 years ago
Updated 17 April 2024, 5 months ago

Problem/Motivation

So as part of my job, I help maintain a website that has several forms. We are seeing a few WCAG violations via Level Access (our accessibility management platform) mainly related to form focus on server side validation.

Steps to reproduce

We are seeing 2 issues here:

1. We have our main contact us form, with a few required fields. Now the browsers HTML5 validation prevents this form from being submitted if a field is not filled out (the focus goes up to the first field that is not filled out, and the screen reader reads the error message correctly). However, one of these fields is a phone number field, and we have server side validation for checking if that number is valid or not. If an invalid phone number is entered, you don't see the error until the page refreshes. Level access is saying that focus should be placed on that phone number field, and it currently does not. The screen reader seems to have issues here as it does not read the error message either. This could be just an issue with the screen reader...however I would expect the focus to be on the phone number field here. Now a user using a keyboard to navigate the site needs to tab several times to get into the form.

2. We have another form on our site that opens up in a modal. This is an ajax form, and we are running into the same issues. This form has an e-mail address field, however we have server side validation for this (we have a blacklisted domain list we compare against). Again, if a user inputs an invalid e-mail, the focus does not get sent to the e-mail field. The focus remains on the submit button. I believe this is standard for an ajax form...however it seems that the focus should still jump to the first field with an error? Also, the screen reader does not know what to read if this occurs.

I know Drupal 8 is supposed to be 100% WCAG 2.0 compliant...however based on what we have heard from Level Access, it appears these are the WCAG 2.0 rules that we are breaking:

Violation 1: Provide a clear indication of fields in error for information that is submitted
3.3.1 Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

Violation 2: Inform assistive technologies of changes in content
When content is inserted, made visible, or made invisible on a page via scripting after the page loads, users of assistive technologies such as screen readers may not be aware that a change in the page occurred. Developers must use certain methods to alert assistive technologies that content has changed through JavaScript. When these methods are not used, users of assistive technology such as screen readers may have an outdated/stale view of page content.
2.4.3 Focus Order:
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

I've looked into a few other drupal.org issues related to form validation, but it seems they have gone in a different direction. I figured I would open up a new issue here. Just curious if these issues are truly accessibility violations?

πŸ› Bug report
Status

Active

Version

11.0 πŸ”₯

Component
FormΒ  β†’

Last updated 1 minute ago

Created by

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024