Skip to content

Commit

Permalink
add a11y concern and aria-label note (mdn#25587)
Browse files Browse the repository at this point in the history
* add a11y concern and aria-label note

* Update files/en-us/web/accessibility/aria/roles/tooltip_role/index.md

Co-authored-by: dawei-wang <[email protected]>

* Update files/en-us/web/accessibility/aria/roles/tooltip_role/index.md

Co-authored-by: dawei-wang <[email protected]>

* Update files/en-us/web/accessibility/aria/roles/tooltip_role/index.md

* edits based on review

* Update files/en-us/web/accessibility/aria/roles/tooltip_role/index.md

---------

Co-authored-by: dawei-wang <[email protected]>
  • Loading branch information
estelle and dawei-wang authored Mar 29, 2023
1 parent 33a8d9c commit dea4741
Showing 1 changed file with 5 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ The tooltip is not considered a popup in terms of the [`aria-haspopup`](/en-US/d

Though a tooltip may appear and disappear, as its appearance is automatic and not intentionally controlled by the user, the [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) role is not supported.

The accessible name of a tooltip can come from the contents, or from an [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) or [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby).
The accessible name of a tooltip can come from the contents. While, in theory, they could come from an [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) or [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby), in most cases, using ARIA properties to provide a tooltip with an accessible name is not recommended.

Tooltips provide additional information, generally with no direct interaction on the tooltip itself. They are generally associated with the content they're defining via an [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) with the `id` of the primary element. Therefore, if the tooltip has an accessible name explicitly set, that name is exposed as the primary element's description rather than the contents of the tooltip, meaning the tooltip contents may never be discovered by a screen reader user.

### Associated WAI-ARIA roles, states, and properties

Expand Down Expand Up @@ -96,6 +98,8 @@ The above hides the tooltip with CSS in the default state or if the hidetooltip

If the information is important enough for a tooltip, isn't it important enough to always be visible?

As content which appears on hover can be difficult or impossible to perceive if a user is required to keep their mouse pointer over the trigger, [WCAG 1.4.13](/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) states that content made visible should be persistent, meaning it should not disappear without user action. Tooltips fail this criterion.

## Best Practices

Instead of using tooltips and hiding important information, consider writing clear, succinct, always visible descriptions. If you have space, don't use tooltips or toggletips. Just provide clear labels and sufficient body text.
Expand Down

0 comments on commit dea4741

Please sign in to comment.