[HTML] Getting to know the tabindex property

what is tabindex?

tabindexis a global attribute that controls whether an HTML element can receive keyboard focus, and if so, in what order. when a user presses the Tab or Shift + Tab key on their keyboard to navigate between elements (links, buttons, input fields, etc.) within a web page, this tabindex attribute determines their order and behavior.

tabindex value and meaning

tabIndex the attribute takes an integer value, and depending on the value, it will behave completely differently.

1. tabindex="0"

makes the element keyboard navigable. interactive content (a, button,input,textarea, etc...) will have a default value of 0, even if you don't specify it. however, non-interactive content defaults to -1, so if you want to navigate via keyboard, you need to give it a value greater than 0, such as tabindex=0.

this is primarily used to make container elements that don't receive focus by default keyboard accessible.

<div tabindex="0" role="button">div로 만들어진 버튼!</div>

2. tabindex="-1"

excludes the element from keyboard navigation. non-interactive content has a default value of -1 unless otherwise specified. It won't focus via the Tab key, but it can be done programmatically.

<div id="myModalContent" tabindex="-1">모달 내용...</div>
<script>
  document.getElementById('myModalContent').focus();
</script>

3. tabindex="positive"

gives the elements an explicit tab order. 1the elements will receive focus in order, starting with the smallest number first. elements with the same number receive focus in the order of their HTML source code.

see ⚠️ for more information: considered an antipattern positive tabindexcan confuse users (especially keyboard and screen reader users) and harm web accessibility by forcing a focus order that differs from the logical document structure. it can also make maintenance difficult.

when to use it?

tabindexmay seem like a good idea at first glance, but it's an attribute that should be used with caution.

• tabindex="0"

  • creatingcustom interactive elements: Use it when you want to give keyboard accessibility to custom widgets that are difficult to implement as semantic HTML elements, such as buttons, tabs, sliders, menu items, etc. that you create yourself with <div>, <span>, etc. in this case, it is recommended that you add logic for handling keyboard events (Enter, Space, etc.) in JavaScript so that the element behaves like a real interactive element, and specify the appropriate aria-roleto let screen reader users know what the role of the element is.
  • includeelements in the tab order: This can be used when you want to include non-interactive content in the tab order that doesn't receive focus by default (for example, a block of text that you want to emphasize).

• tabindex="-1"

  • modal or dialog: When a modal window is opened, apply tabindex="-1" to the background content to disable keyboard navigation.

wrapping up

tabindex can play a huge role in making your website more accessible and improving the user experience. however, it can also be confusing if not used properly, so make sure you understand its default behavior and use it carefully.

to summarize

1. follow the natural flow of HTML as much as possible
2. avoid positive tabindex values
3. tabindex="0"should only be used for interactive elements
4. tabindex="-1"only for elements that need programmatic focus
5. Use with ARIA attributes for maximum accessibility