Tooltip and Aria Label

Flow
1

From what I understand:
Tooltip: visible on screen (typically shown on mouse over)
Aria Label: Invisible, used by screen readers

Time and again I find myself doing, which, to be honest, is a bit irritating


        editProfileButton.setTooltipText("Edit Profile");
        editProfileButton.setAriaLabel(editProfileButton.getTooltip().getText());

Is there any convenient way to make the ariaLabel automatically map to the tool tip text?

OR

A better option could be (feature request)
HasAriaLabel#getAriaLabel

  • Return aria label value if explicitly set
  • Else fall back on tooltip, if explicitly set
2

You might wanna double-check with real screen reader if it’s even required to duplicate your value - it might make things even worth by reading your defined value twice, e.g. once as aria-label and once as aria-describedBy (tooltips are typically already associated with the components).

2 Likes
3

Basically, what Knoobie said :) You do not need both.

When you apply a Tooltip to a Button (or many other components), it automatically creates an aria-describedby connection between the two, which makes the tooltip announced as the button’s description by screen readers.

See Tooltip component | Vaadin components

2 Likes