Is it possible to make an HTML element non-focusable?
I understand that a list of elements that can receive focus can be defined and that a user can navigate through these elements by pressing a Tab key. I also see that it is up to the browser to control this.
But maybe there is a way to make certain elements non-focusable, say I want a user to skip a certain <a>
tag when pressing a Tab.
To disable focus on a specific element, set the tabIndex property on the element to a value of -1 . The tabIndex property can be used to specify that an element cannot be focused using keyboard navigation.
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.
Add the tabindex="0" attribute to each div you want tabbable. Then use CSS pseudo classes :hover and :focus, for example to signify to the app user that the div is in focus and clickable, for example.
Focusable. The element can be focused by script ( element. focus() ) and possibly the mouse (or pointer), but not the keyboard. Tabbable.
<a href="http://foo.bar" tabindex="-1">unfocusable</a>
A negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation.
See also: developer.mozilla.org
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With