:active vs :focus

• User presses the `Tab` key to give focus to the element
• User uses the mouse to click on the element
• On touchscreen screens, user taps on the element

#Good practice

• `tabindex="0"` will bring the element into the tab order.
• As opposed to the above value, `tabindex="-1"` removes the element from the tab order. It's not possible for user to explore the element with keyboard.

<!-- The overlay which takes full size -->
<div
    tabindex="-1"
    style="
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
    "
>
    <!-- The modal element -->
    ...
</div>

#Tips

1. With Chrome DevTools, you can see the CSS classes used for `:active` and `:focus` states without activating the element.
   First, you need to inspect the element, and then select the :hov tab under the Styles tab:

   

   On Firefox, similar options can be found in the :hov tab under the Inspector tab.

   

2. Assume that you want to test the keyboard accessibility in your website.
   There's a case that the pressing the Tab key jumps to a particular element which is invisible in the viewport.
   Chrome DevTools provides the ability of tracking the focused element.
   • Open the Console
   • Click the eye icon which is located at the right of the Filter box to create a live expression
   • Type `document.activeElement`
   This live expression will represent the active element which has the focus currently. You can right click on the expression's result and then choose Reveal in Elements panel to inspect the focused element.