WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Including non-interactive elements in the tab order

for

From: Geethavani.Shamanna
Date: Feb 27, 2024 3:21AM

They do use aria-describedby, and have considered using aria-live for dynamic error messages, although that presents its own challenges. Role="alert" is a good option. However, if a screen reader user is merely exploring the form, they will hear the alerts as they tab through each required field.

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of <EMAIL REMOVED>
Sent: Monday, February 26, 2024 6:50 PM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Including non-interactive elements in the tab order

External email: if the sender or content looks suspicious, please click the Report Message icon, or forward it to report-phishing

I think that some times people may misunderstand how screen readers work and they may assume that the screen reader needs to be able to tab to items to read them.

I typically try to explain that most people who rely on the keyboard can see and do not use a screen reader. Also, screen reader users have other mechanisms that allow them to access non-interactive elements.

If they are concerned that screen reader users will miss the inline validation messages, talk them through using something like aria-describedby to associate the error message with the field and use either role="alert" or an assertive live region to ensure the screen reader notifies the user immediately when the error message appears. That will end up being a better user experience for everyone.

Thanks!
Tim
-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of <EMAIL REMOVED>
Sent: Monday, February 26, 2024 11:18 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Including non-interactive elements in the tab order

Including non-interactive elements like error messages in the tab order generally isn't considered a best practice for accessibility. While it might not explicitly fail SC 2.4.3 (Focus Order), it can still pose usability challenges for users navigating the form, especially those who rely on keyboard navigation or assistive technologies.

It's important to ensure that users can navigate through interactive elements in a logical and predictable order. Placing non-interactive elements like error messages within the tab order can disrupt this flow and confuse users. It's usually better to keep error messages separate from the tab order and provide alternative methods for users to locate and address any issues with form validation.
Dean Vasile


617-799-1162

> On Feb 26, 2024, at 9:43 AM, Geethavani.Shamanna < <EMAIL REMOVED> > wrote:
>
> Hello all,
>
> I am trying to convince some developers that including non-interactive elements (such as error messages) in the tab order is not best practice. The forms in question are validated in real-time and error messages are dynamically inserted into the tab order if a required field is left blank. The error message appears as the next tab stop following the unpopulated required field.
>
> I came across a discussion in the archives about how including non-interactive elements in the tab order does not fail SC 2.4.3, Focus Order. In this instance, where error messages are included within the tab order, does this not fail SC 2.4.3?
>
> Thank you.