What Is the HTML Tabindex Attribute

What's the tabindex= -1 in bootstrap for

The tabindex attribute explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.
[Both] tabindex="0" and tabindex="-1" have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements, but this does allow other elements to be focusable and trigger interaction.
A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it), but it allows it to receive programmatic focus, meaning focus can be set to it from a link or with scripting.** This can be very useful for elements that should not be tabbed to, but that may need to have focus set to them.
A good example is a modal dialog window - when opened, focus should be set to the dialog so a screen reader will begin reading and the keyboard will begin navigating within the dialog. Because the dialog (probably just a <div> element) is not focusable by default, assigning it tabindex="-1" allows focus to be set to it with scripting when it is presented.
A value of -1 can also be useful in complex widgets and menus that utilize arrow keys or other shortcut keys to ensure that only one element within the widget is navigable with the tab key, but still allow focus to be set on other components within the widget.

Source: http://webaim.org/techniques/keyboard/tabindex

This is why you need tabindex="-1" on the modal <div>, so users can access common mouse and keyboard shortcuts. Hope that helps.

HTML's `tabindex` - can it become regional or not?

Is the browser supposed to use the tabindex attribute for the whole document

Yes.

or its scope can be considered regional in some cases

No.

If several elements share the same tabindex, their relative order follows their relative position in the document).

Does this mean that tabindex cannot be regional?

No, it means that if you have

<label><input tabindex="1"> A</label>
<label><input tabindex="2"> B</label>
<label><input tabindex="1"> C</label>
<label><input tabindex="2"> D</label>

…then the order will be A (the first 1), C (the second 1), B (the first 2), D (the second 2).

Can I dynamically set tabindex in JavaScript?

document.getElementById("link3").tabIndex = 6;

Why tabindex='-1' prevents keyboard

tabindex sets the order that editable-elements on the page will be iterated using the tab key. -1 seems like a reasonable value, from that sense, to make an element unapproachable.

For more information: http://webaim.org/techniques/keyboard/tabindex

Meaning of the tab-index tag

The tabindex attribute allows you to set the order of the fields in the order you'd like to access them when pressing the tab key on your keyboard.

Adding a tabindex of -1 simply means "Do not put this field in the tab cycle". Therefore, it will never be highlighted or selected in the tab-pressing cycle. You can still select the field manually (with your cursor), but not in the tab cycle.

In HTML 4, you can only add tabindex to form elements. However, in HTML5, you can add it to a div as well as other elements.

Normally, when a div becomes selected in the tabindex, you won't see it. However, by adding some CSS, it's visible.

body         {background: gray}.panel       {background: white; padding:10px}.panel:focus {background: red}

<div class="panel" tabindex="1">Click on me first, then press tab</div><div class="panel" tabindex="3">Third</div><div class="panel" tabindex="4">Fourth</div><div class="panel" tabindex="-1">This div is excluded</div><div class="panel" tabindex="2">Second</div>

Why would an `a` tag need `tabindex=0`?

As per your question:

What would cause an anchor element to be skipped as I tab through the
interactive elements of a page?

If you add tabindex="-1" the element will be skipped.

And if your <a> tag has no href, it will be skipped as well.

How to set custom tabindex in html

Remove direction from div.id="myComponent" setting multiple direction will cause problem or is confusing. Rearrange the #myComponent elements.

    <body style="direction: rtl;">
        <input type="text" />  <!-- I can not set tabindex for this elements. beacuse these are generate the dynamically. -->
        ...
        <!-- any elements -->
        <div id="myComponent" >
            <span><input type="text" placeholder="d" /></span>
            <span><input type="text" placeholder="m" /></span>
            <span><input type="text" placeholder="y" /></span>
        </div>
        <input type="text"  />
    </body>

Working example can be found at here

Update:

To set ltr direction to elements inside #myComponent use following css property -
```
#myComponent > *{ 
 direction: ltr 
}  
```
To preserve the element placing direction in 'ltr', wrap the span elements inside other div with property float:left.
The updated example can be found at here