What’s the tabindex=”-1″ in bootstrap for

by

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.

More Related Contents:

  1. Bootstrap 3 Navbar Collapse
  2. Five equal columns in twitter bootstrap
  3. Bootstrap Rows and Columns – Do I need to use row?
  4. What is the difference between Bootstrap .container and .container-fluid classes?
  5. Responsive website zoomed out to full width on mobile
  6. Bootstrap with jQuery Validation Plugin
  7. Bootstrap Fluid grid system with different height
  8. How to remove responsive features in Twitter Bootstrap 3?
  9. Updating Bootstrap to version 3 – what do I have to do?
  10. Bootstrap – row can I have columns add up to more then 12?
  11. Bootstrap 3 breakpoints and media queries
  12. Stacked Tabs in Bootstrap 3
  13. Bootstrap 3 – Why is row class is wider than its container?
  14. How do you make Twitter Bootstrap Accordion keep one group open?
  15. bootstrap 4 responsive utilities visible / hidden xs sm lg not working
  16. How to create a sticky left sidebar menu using bootstrap 3?
  17. How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]
  18. BootStrap3 keep the dropdown menu open after click on the item
  19. Should I use Bootstrap from CDN or make a copy on my server?
  20. Bootstrap 3.0 – Fluid Grid that includes Fixed Column Sizes
  21. Bootstrap 3 Gutter Size
  22. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  23. Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
  24. Different slide duration for each item on bootstrap 3.1 carousel
  25. How can I get my Twitter Bootstrap buttons to right align?
  26. Decreasing height of bootstrap 3.0 navbar
  27. Binding to Collapse event in Twitter Bootstrap 3
  28. Disable Bootstrap 3 navbar going 2 rows in medium viewport size
  29. How to justify navbar-nav in Bootstrap 3
  30. Jquery to open Bootstrap v3 modal of remote url

Leave a Comment