Skip to main content Accessibility Feedback

Targeting focusable links with vanilla JavaScript

A few weeks ago I shared a trick for getting the first and last focusable element in the DOM.

var focusable = document.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
var firstFocusable = focusable[0];
var lastFocusable = focusable[focusable.length - 1];

Reader Csaba Varszegi asked (shared with permission):

A small question: what is the reason that you are using [href] instead of a? Because if an anchor has no href, it is not focusable? Or because you want other elements with an href (valid?) to be selected? Or both?

Great question!

Simply put, links are only focusable if they have an href. Otherwise, tabbing through the DOM just skips right over them.


🔥 Level-up your JavaScript skills! All of the Vanilla JS Pocket Guides have been updated for ES6 with new methods, techniques, and browser APIs. Learn more →

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips