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.
<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.
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.
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.
For the element you do not want to be focused on tab, you have to put the tabindex as a negative value.
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?