E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Mark Magennis
Date: Fri, Feb 21 2025 9:09AM
Subject: Is it no longer necessary to use tabindex="-1" to allow JavaScript focus movement?
No previous message | Next message →

Is it true that it's not longer necessary to add tabindex=3D"-1" to a non-focusable element in order to allow focus to be moved to it using JavaScript?



Mark Magennis (he)
Senior Accessibility Specialist

[Skillsoft]<http://www.skillsoft.com/>;
www.skillsoft.com<;http://www.skillsoft.com/>;

From: jp Jamous
Date: Sun, Feb 23 2025 10:24AM
Subject: Re: Is it no longer necessary to use tabindex="-1" to allow JavaScript focus movement?
← Previous message | Next message →

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.

From: Birkir R. Gunnarsson
Date: Sun, Feb 23 2025 6:34PM
Subject: Re: Is it no longer necessary to use tabindex="-1" to allow JavaScript focus movement?
← Previous message | No next message

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