Keyboard Interaction and Focus

Many users, including those who are blind or have motor impairments, navigate the web primarily with a keyboard, so keyboard interaction and focus management are central to accessibility. The tabindex attribute controls whether an element is focusable and how it participates in sequential Tab navigation. A tabindex value of 0 makes an element focusable and places it in the natural document Tab order, while tabindex="-1" makes an element programmatically focusable (such as via element.focus()) but removes it from sequential Tab order. Positive tabindex values are strongly discouraged because they jump the element to the front of the Tab order ahead of natural order, making the page sequence unpredictable for keyboard users and undermining WCAG 2.4.3 Focus Order.

Every interactive element must show a visible focus indicator so keyboard users can see where they are on the page, as required by WCAG success criterion 2.4.7 Focus Visible at level AA, with at least 3:1 contrast between the indicator and its adjacent background per WCAG 1.4.11. Removing the focus ring with outline: none without providing an alternative is a common accessibility anti-pattern. The CSS pseudo-class :focus-visible solves this elegantly by applying focus styles only when the focus comes from a keyboard or other non-pointer input, so mouse clicks do not display rings but keyboard tabbing does.

A frequent anti-pattern is creating a clickable `