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: jp Jamous
Date: Feb 23, 2025 10:24AM

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.