Is focus outline useful on elements that can't be focused with tab?

1. Should I use focus or focus-visible?
2. How do you make an element focusable?
3. Which pseudo-class allows you to selectively show a focus ring on elements only if keyboard navigation is detected?
4. What elements can be focused HTML?

Should I use focus or focus-visible?

Adding the :focus pseudo-class to an element will make it show a focus specific styles and disregard browsers heuristics. The :focus-visible , in contrast, applies custom styling only if it would be shown natively. It's a win-win situation, a nice custom look and years of research in one CSS property.

How do you make an element focusable?

Interactive elements must be focusable

You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

Which pseudo-class allows you to selectively show a focus ring on elements only if keyboard navigation is detected?

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)

What elements can be focused HTML?

Elements of the following type are focusable if they are not disabled: input , select , textarea , button , and object . Anchors are focusable if they have an href or tabindex attribute. area elements are focusable if they are inside a named map, have an href attribute, and there is a visible image using the map.