# ✎ Technique: Focus order and tabindex

Interactive elements should, under most circumstances, be focusable in the order that they appear in the source code. This helps people who are using the keyboard or alternative input devices to follow focus in a logical order.

The order that elements appear in the document source should reflect the order they appear visually.

# ✎ Technique: Paragraph link focus indication

All interactive elements should be focusable so that they can be activated using a mouse, a keyboard, voice recognition software, a switch input device, and other input methods.

They should also indicate when they’re focused so that users know which element they are currently interacting with. This is where focus styles come into play.

# ✎ Technique: Keyboard operable custom controls

Sometimes, design requirements mean that you need to create an interactive element from a base <div> element or a custom element like <my-button> rather than using a native HTML element.

Your element will not be accessible by keyboard unless it is included in focus order and it can be activated using the ENTER and SPACE keys.

# ✎ Technique: Managing focus and inactive elements

Visually indicating which element has focus is important for effective keyboard navigation. It's also important to ensure that only those elements that are available visually for interaction are focusable. If an active element is intended to be unavailable in a particular state and it’s hidden from view, it should not be able to receive focus.

Having to tab through invisible controls to reach visible ones is arduous and potentially confusing for sighted users navigating the page by keyboard. Also, screen-...

# ✎ Technique: Keyboard accessible links

Links (<a> elements) are focusable by default, so it should normally be possible to activate them using the keyboard. However, under certain circumstances, they are not focusable: Unless you are deliberately trying to "disable" a link, make sure it does not take the form of any of these examples.