CODEWITHSUNDEEP
htmltwitter-bootstrap
nous3k
nous3k

Reputation: 35

Meaning of the tab-index tag

I found a piece of code from bootstrap which Im trying to understand. Still, there is one part that I don't fully get.

<div class="modal fade" tabindex="-1" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Flexibilní mřížka</h4>
        </div>
        <div class="modal-body">
          <p>content</p>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Zavřít</button>
        </div>
      </div>
    </div>
    </div>

What does the tabindex="-1" do?

Upvotes: 1

Views: 444

Answers (3)

krlzlx
krlzlx

Reputation: 5822

From the W3C WAI-ARIA 1.0 Authoring Practices. See section 3.2.1. Using Tabindex to Manage Focus among Widgets

Setting a tabindex value of -1 to an element enables the element to receive focus via JavaScript using the element.focus() method. This method is used to enable arrow key navigation to elements. Each element that can be navigated to via arrow keys must have a tabindex of -1 to enable it to receive focus.

Upvotes: 1

Wes Foster
Wes Foster

Reputation: 8900

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>

Upvotes: 1

Sir_Faenor
Sir_Faenor

Reputation: 897

From MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation;
0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;
a positive value which means should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute: the sequential follow the increasing number of the tabindex. If several elements share the same tabindex, their relative order follows their relative position in the document).

Upvotes: 2

Related Questions