0

I am programming a desktop application and I use some icon-buttons without labels. I do not want to use Labels because of layout. So I set to every icon a descriptive tooltip text, because some icons are not self-explanatory. On mouse over the tooltip text is shown to the user.

However what about the Keyboard-only users? When they are tabbing through the application and the icon Buttons there will be no tooltip text shown. I did not found in any guideline (WCAG, ISO 9241,...) a recommandation how to implement a support for not self-explanatory icon buttons. Can anyone tell the norm? I cannot imagine that this issue has not been ruled.

I thought of some solutions:

  • showing the tooltip text on Focus, but this will be a bit irritating for the user if he knows the function of the icon button.
  • showing a context specific help pressing [F1] whil on focus.

What do you think about it? Or maybe are there some norms in the Guidelines (WCAG, ISO 9241,...)?

2

https://www.nngroup.com/articles/tooltip-guidelines/ has good information about it:

Definition: A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI). Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.

Provide tooltips for unlabelled icons.

Most icons have some level of ambiguity, which is why we recommend text labels for all icons. If you’re too stubborn to provide text labels for the icons on your site, the least you can do is provide your users with a descriptive tooltip.

Ensure tooltips have moderate contrast against the background.

Users generally look where they click (or hover). However, since tooltips lack, a moderate contrast is important to ensure users see the text in the tooltip. Additionally, for users with visual impairments, a white page with light-grey tooltips is especially difficult to read.

Position tooltips so they don’t block related content.

When tooltips block the content they’re related to, they cause users to repeat steps (i.e. move their mouse to close the tooltip, read the information or field again, hover to reveal tooltip). Test your tooltip positioning to ensure that the content does not block other information pertinent to the user’s goal.

Windows desktop example:

  1. Border displayed when icon is in focus
  2. Uninstructive tooltip displayed when item is in focus

enter image description here

If you're worried about:

Showing the tooltip text on Focus, but this will be a bit irritating for the user if he knows the function of the icon button.

You could try introducing settings and let user enable/disable this option as desired.

enter image description here

1

On top of the great NN Group article suggested by Mindaugas, I'd also recommend reading the Inclusive Components guide on tooltips and toggletips. WCAG 2.1 also has a new success criterion that's relating to tooltip behaviours which you may want to look at.

Making them appear on request (using F1) sounds pretty obscure unless you add very clear instructions about that, and can be annoying for new users of the application if they want to get used to the interface and have to press F1 on every button to know what it does.

Most importantly:

showing the tooltip text on Focus, but this will be a bit irritating for the user if he knows the function of the icon button.

If that's not a worry for mouse users, then that shouldn't be a worry for keyboard users. They appear in both cases, and the tooltips aren't going to obscure what's below until the user has specifically navigated to the icon they want to use.

If you're really worried about that, you can add a setting to disable it, but just look at how major accessible applications do it and you'll see that they just show like regular tooltips.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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