WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Is it no longer necessary to use tabindex="-1" to allow JavaScript focus movement?

for

From: Mark Magennis
Date: Feb 24, 2025 1:01AM

I don't remember where I heard that but it turns out it isn't true. It's a pity because sometimes it makes sense to move focus to a list or list element but if you put any tabindex on a list or list element JAWS will automatically enter focus mode and announce a listbox. Maybe JAWS heuristics cause it to assume a focusable list is a badly coded listbox? Or does anyone know another reason? It's been logged as a bug in the JAWS repository since 2019.

Mark


From: jp Jamous < <EMAIL REMOVED> >
Sent: Sunday 23 February 2025 17:24
To: WebAIM Discussion List < <EMAIL REMOVED> >
Cc: Mark Magennis < <EMAIL REMOVED> >
Subject: [EXTERNAL] RE: Is it no longer necessary to use tabindex="-1" to allow JavaScript focus movement?

Where did you hear that?

Based on object oriented programming logic, an object must have a tabindex in order for the browser to set the keyboard focus on it. What I mean is that a non-focusable item would not obtain keyboard focus unless you indicate to the browser that it should. If you use the value of 0, that would cause the visible focus indicator to show. However, a value of -1 would set the keyboard focus on that element as a starting point if you will. In other words, the browser informs the keyboard that from this tabindex="-1" jump to the next item in the tab order based on the tab order array in the browser.

If you set the focus on a non-focusable element using JS without tabindex="-1", different screen readers might function differently. NVDA might start from that non-element in the accessibility tree. Whereas, JAWS might not honor that. Having tabindex="-1" would be honored by most if not all Assistive Technologies including standard keyboard movement.

I recently worked on a site where <main> had an ID but the "Skip to Main Content" link would not set focus on it. It would fire a page refresh and keep the screen reader cursor at the top of the DOM. Only TabIndex="-1" allowed it to work.

In another recent job, the same tag was obtaining focus using a JS function. JS was not setting focus on the <main> tag, because it was not in the tabindex array, since it is a non-focusable item. Only tabindex="-1" allowed the JS function to work.

I am not claiming that it may not work without tabindex. It depends on what type of JS framework being used and whether the page is a part of a SPA project. My claim above only represents standard HTML and JS. It does not include any JS frameworks like React, JQuery, AJAX and many others. Those might have different functionality to achieve the focusability on a non-focusable item. You would need to understand what is happening behind the scenes when the framework executes its functions and methods.