tabindex

The tabindex attribute in HTML defines the order in which elements receive focus when users press the Tab key to navigate through the page. It controls the sequence of focusable elements.

tabindex attribute

The tabindex attribute determines the order in which elements receive focus during keyboard navigation. A value of -1 makes an element focusable programmatically, 0 sets the default order, and positive values allow custom tabbing order. For better accessibility and navigation flow, it's advisable to use 0 or -1.

Syntax

index.html

<element tabindex="number">

Example

::atter-tab ::

index.html

<!DOCTYPE html>
<html>
<body>

<div tabindex="1">Qarpeo</div><br>
<div tabindex="3">Google</div><br>
<div tabindex="2">Microsoft</div>

<script>
// At start, set focus on the first div
document.getElementsByTagName('div')[0].focus();
</script>

<p tabindex="4"><b>Note:</b> Try navigating the elements by using the "Tab" button on your keyboard.</p>

</body>
</html>

Accessibility Concerns

Avoid adding tabindex to non-interactive elements (like <div>) to make them focusable. Instead, use proper interactive elements such as <button>.
Non-interactive elements with tabindex don't appear in the accessibility tree, which can cause issues for assistive technologies.
Use semantically correct interactive elements (like <a>, <button>, and <input>) to ensure proper accessibility, as they automatically come with roles and states.

Conclusion

The tabindex attribute controls the focus sequence for elements when navigating with the Tab key. For better accessibility, it's recommended to use values of 0 or -1. Always prioritize semantic elements and avoid using tabindex on non-interactive elements to maintain proper accessibility.

style

The style attribute in HTML allows you to apply CSS styles directly to an element, providing a way to quickly style it without needing external or internal style sheets.

target

The target attribute in HTML specifies where the linked content or form submission will be displayed, such as in the current window, a new tab, or a designated frame.