Home » Html » How to make an HTML element non-focusable?

How to make an HTML element non-focusable?

Posted by: admin November 29, 2017 Leave a comment

Questions:

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 Anchor tag when pressing a Tab.

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.

https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/tabindex

Questions:
Answers:

To completely prevent focus, not just when using the tab button, set disabled as an attribute in your HTML element.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<input class="form-control" type="text"> Click this, you can see it's focusable.

<input class="form-control" type="text" readonly>  Click this, you can see it's focusable.

<input class="form-control" type="text" readonly tabindex="-1">  Click this, you can see it's focusable. Not tab'able.

<input class="form-control" type="text" disabled>  Click this, you can see it's <strong>not</strong> focusable.

Questions:
Answers:

TabIndex is what your looking for: http://www.w3schools.com/jsref/prop_html_tabindex.asp.

When you set a tabIndex value to -1 you will skip it when tabbing through your form.

Questions:
Answers:

For the element you do not want to be focused on tab, you have to put the tabindex as a negative value.

Questions:
Answers:

I was just reading YouTube source code, I see focusable=”false”

<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#4285F4" viewBox="0 0 24 24" height="24" width="24" style="margin-left: 4px; margin-top: 4px;"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>

Is that a more correct answer?