How to css target "Tab" state of the input?

Question

I believe for accessibility cases, tab is used to navigate through different elements on the page, usually there is a dotted element around Tabbed element to indicate that it is in focus, I tried researching this, but didn't found a reference to a css rule that targets this state.

Answer 1

The css selector you want is :focus, like input:focus { ... } but not everything can be tabbed to like this. Things like anchors, inputs and buttons can be tabbed to in this way. I do not know any more off the top of my head but things like div, span, h1/2/3/4/5/6 cannot be tabbed to.

Also to note, tabbing into an item is not the only way to bring it to focus. An anchor for example, you can hold left mouse button down over it and then move the cursor away before letting go. The item will be focused by doing this (it might aid your dev time if you want to style something near the end of the page.)

Answer 2

The Tab key is indeed used to navigate parts a page by many different kinds of users. When you say "for accessibility cases" that can mean many different things, however.

A screen reader user typically relies on other keyboard actions to put the reading "cursor" on things like headings, lists, tables, and so on. These do not receive focus from the Tab key.

A keyboard-only user uses the Tab key to put focus on actionable elements, such as form controls and links. However, for reading the page a keyboard user may use arrow keys to scroll, the space bar to move ahead a screen at a time, and sometimes even Page Up, Page Down, Home, and End keys. In those cases a visual indication of focus is not needed and may be counter-productive.

Each browser has a default focus "ring" it puts on actionable elements that receive focus. It can range from a dotted line to a blue box to whatever the browser maker decides.

This alone is not always easily visible to a user when used against background colors or textures that can obscure the focus ring. As such, you cannot rely on the browser default for the best accessibility.

Also note that many libraries/frameworks explicitly disable the focus ring with a style declaration like outline : none. This is bad practice.

For your own desire to show a focus ring, note that only actionable items can receive focus. You can force it with tabindex="0" but that often does more harm than good for both screen reader and keyboard users.

The CSS selector you want to use to style something that has focus is :focus. As an example, you could try :focus {outline: 2px solid #f00;box-shadow: 0 0 2em rgba(255,255,255,.75);} and that would give you a red border and white outer glow (shadow).

So, to recap:

1. Use :focus.
2. Know that only actionable items get focus.
3. Do not use tabindex on anything just to apply focus styles.