You can prevent an HTML element from receiving focus when navigating through a webpage using the TAB key on the keyboard by setting the tabindex attribute on the element to -1.
For example:
<button>Button 1</button> <button tabindex="-1">Button 2 (skipped)</button> <button>Button 3</button>
In the example above, "Button 2" will be skipped when the user navigates through the buttons using the TAB key (as it is removed from the normal tab order).
Skipping an element using tabindex="-1" doesn't mean it is entirely inaccessible to keyboard-only users, as they can still access the element using other keyboard navigation techniques (such as, using the arrow keys to navigate between elements, using access keys to jump directly to specific elements, etc.).
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.