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: Birkir R. Gunnarsson
Date: Feb 23, 2025 6:34PM

I was playing with the autofocus attribute, both on page load and when
using HTML <dialog>.
In order to use the autofocus attribute on non-focusable elements ((such as
the main element or the heading) you have to add tabindex="-1", else it
doesn't work.
So, based on the replies to this thread I'd say, yes, you still need
tabindex="-1" on a non-focusable element if you want to send focus to it
via Javascript, link or the autofocus attribute.


On Sun, Feb 23, 2025 at 12:24 PM jp Jamous via WebAIM-Forum <
<EMAIL REMOVED> > wrote:

> 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.