Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make an HTML element non-focusable

Tags:

html

dom

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.

like image 748
Alvis Avatar asked Feb 05 '12 19:02

Alvis


People also ask

How do you turn off focus on an element?

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.

Which HTML elements are focusable?

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.

How do you make something Tabbable in HTML?

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.

What does focusable mean in HTML?

Focusable. The element can be focused by script ( element. focus() ) and possibly the mouse (or pointer), but not the keyboard. Tabbable.


1 Answers

<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

like image 86
Fedor Skrynnikov Avatar answered Oct 19 '22 13:10

Fedor Skrynnikov