Gmail shows tooltip on keyboard navigation. My question is whether the Tooltip can be shown on keyboard navigation?

enter image description here

3 Answers 3


The answer is yes. You should give as similar as possible experience for users independently of how they are visiting your site. Here is a quote from Google Material specifically about accessibility and hover information:

Keyboard/mouse interfaces should have every task and all hover information accessible by keyboard-only.

As @SteveD says in the comments it is also a requirement in "WCAG 2.0 under 2.1 Keyboard Accessible":

When all functionality of content can be operated through a keyboard or keyboard interface, it can be operated by those with no vision as well as by those who must use alternate keyboards or input devices that act as keyboard emulators like speech input software or on-screen keyboards.

  • Yes, only Google has given tooltip on keyboard navigation. Is there any UI standards.
    – Pradeep
    Commented Nov 24, 2016 at 10:36
  • I usually refer to Google standards (in the link I posted). Other than those you can check several guides in this answer.
    – Alvaro
    Commented Nov 24, 2016 at 10:46
  • It is also an accessibility requirement in WCAG 2.0 under 2.1 Keyboard Accessible.
    – SteveD
    Commented Nov 24, 2016 at 15:28

For accessibility your system/product should be capable of showing tooltips for both mouse and keyboard users alike.

If you're asking about how to make it work (which you should really be asking on Stack Overflow and not here) then the :focus pseudo class in CSS and JQuery is what you want to be looking for.


The most awesome experience involving tooltips I have had as a heavy keyboard user, was when I recently stumbled across the ESTA application process.

I don't like to use a mouse, and will forcefully Tab my way through forms at pretty much any cost. However, I was pleasantly surprised when I found that the tooltip button attached to each form input had hijacked an increment of the tabindex property.

As a result, the first Tab press focused and opened the tooltip, while my second Tab press focused on the actual form input. This meant that it effectively took two Tab presses to proceed to the next form input -- however, the extra time it took me to press Tab twice instead of once, was inarguably time saved not having to reach for the mouse and hover over the tooltip button.

All in all, a surprisingly awesome -- and accessible -- implementation (in that that it conforms to the relevant WCAG 2.0 guideline). Especially considering that the ESTA application process involves a lot of form inputs where the user (often foreign like me) has to get it explained by the tooltip.

ESTA Accessibility

(Sorry for potato gif - screen capturing is not my strongest asset.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.