I am improving accessibility in a web-app.

I would like to cycle through all potentially tabbable / focusable elements

I note that jQuery has its own pseudo-selector, :tabbable but this isn't native.

I've never used jQuery much and I'm in no hurry to start.

I also note that in these two blog posts:

• 2017-07-17: How to get the first and last focusable elements in the DOM
• 2020-01-29: Getting keyboard-focusable elements

the (similar) solutions look like:

const keyboardfocusableElements = document.querySelectorAll(
  'a[href], button, input, textarea, select, details, [tabindex]'
);

I'm guessing we might be able to add a few more items:

• audio
• button
• canvas
• details
• iframe
• input
• select
• summary
• textarea
• video
• [accesskey]
• [contenteditable]
• [href]
• [tabindex]

though perhaps some of these elements only bee tabbable / focusable when they include the tabindex attribute...?

Sticking with the list immediately above (for now), leaves us with the following:

const tabbableElements = document.querySelectorAll(
  'audio, button, canvas, details, iframe, input, select, summary, textarea, video, [accesskey], [contenteditable], [href], [tabindex]'
);

which isn't terrible, but you'd be forgiven for thinking there might be something more elegant.

Is there a conciser approach to grabbing all potentially tabbable / focusable elements in a document?

Something like a CSS Level 4 pseudo-selector ? (I've not found anything along those lines...)

I am improving accessibility in a web-app.

I would like to cycle through all potentially tabbable / focusable elements

I note that jQuery has its own pseudo-selector, :tabbable but this isn't native.

I've never used jQuery much and I'm in no hurry to start.

I also note that in these two blog posts:

• 2017-07-17: How to get the first and last focusable elements in the DOM
• 2020-01-29: Getting keyboard-focusable elements

the (similar) solutions look like:

const keyboardfocusableElements = document.querySelectorAll(
  'a[href], button, input, textarea, select, details, [tabindex]'
);

I'm guessing we might be able to add a few more items:

• audio
• button
• canvas
• details
• iframe
• input
• select
• summary
• textarea
• video
• [accesskey]
• [contenteditable]
• [href]
• [tabindex]

though perhaps some of these elements only bee tabbable / focusable when they include the tabindex attribute...?

Sticking with the list immediately above (for now), leaves us with the following:

const tabbableElements = document.querySelectorAll(
  'audio, button, canvas, details, iframe, input, select, summary, textarea, video, [accesskey], [contenteditable], [href], [tabindex]'
);

which isn't terrible, but you'd be forgiven for thinking there might be something more elegant.

Is there a conciser approach to grabbing all potentially tabbable / focusable elements in a document?

Something like a CSS Level 4 pseudo-selector ? (I've not found anything along those lines...)

• javascript
• html
• css
• accessibility
• focusable

• I don't think there is a more elegant way natively by just using javascript. – kennarddh Commented Nov 6, 2022 at 16:42
• 1 When not in this list MDN: ARIA states and properties why not create your own? aria-focusable as a custom attribute? Apart from traversing a list in JS, of course. – Rene van der Lende Commented Nov 6, 2022 at 16:42
• That's not a bad suggestion, @RenevanderLende. It's mildly inconvenient to have to manually stick a custom attribute on all elements that require it, but I appreciate that something like data-allows-tab-focus would be self-explanatory to anyone looking at the markup subsequently. – Rounin Commented Nov 6, 2022 at 18:20
• 1 For that matter, if I'm going to add attributes manually, to indicate tabbability... then the attribute might as well be tabindex. – Rounin Commented Nov 6, 2022 at 18:21
• 1 tabindex sure does, but that attribute already has designated functionality the browser acts upon and may interfere as such with the functionality you are aiming for. A simple data/custom = "true/false" does not. Generally speaking I'd say custom functionality needs custom attributes just not to interfere with default behavior. – Rene van der Lende Commented Nov 7, 2022 at 1:00

1 Answer 1

It occurred to me I should head over to jQuery and see what they were doing for:

• :tabbable
• :focusable

jQuery states:

Elements of the following type are focusable if they are not disabled: <input>, <select>, <textarea>, <button>, and <object>. Anchors are focusable if they have an href or tabindex attribute. <area> elements are focusable if they are inside a named map, have an href attribute, and there is a visible image using the map. All other elements are focusable based solely on their tabindex attribute and visibility.

So, the approach I'm going with is to find all the elements which satisfy the conditions above - and any other conditions I may choose to add - and ensure, manually, that each has an explicit tabindex attribute.

Then I can use:

document.querySelectorAll('[tabindex]');

to select all potentially tabbable / focusable elements.

I remain open to other approaches, but, although only semi-automated, this seems the most practical way forward I can e up with for now.