Bug #89872

Epic #89595: Improve accessibility of backend

Tooltips in Backend should become accessible

Added by Michael Telgkamp 12 months ago. Updated about 1 month ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2019-12-06
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
10
PHP Version:
Tags:
accessibility, tooltip
Complexity:
Is Regression:
Sprint Focus:

Description

The title attribute is not sufficient for an accessible tooltip. There are screenreaders that do not announce the title attribute and also users of mobile devices have not chance to see the tooltip.

It would be nice to have a new globally available tooltip option that is accessible and can be used in cases where currently title attributes or other alternatives are used.


Related issues

Related to TYPO3 Core - Task #89566: Some buttons have missing tooltipsClosedOliver Bartsch2019-11-01

Actions
Related to TYPO3 Core - Bug #89520: Missing tooltips in info moduleNew2019-10-26

Actions
#1

Updated by Michael Telgkamp 12 months ago

  • Related to Task #89566: Some buttons have missing tooltips added
#2

Updated by Michael Telgkamp 12 months ago

  • Related to Bug #89520: Missing tooltips in info module added
#3

Updated by Riccardo De Contardi 12 months ago

  • Parent task set to #89595
#4

Updated by Andreas Fernandez 6 months ago

  • Status changed from New to Needs Feedback

What needs to be done to have accessible tooltips?

#5

Updated by Michael Telgkamp 6 months ago

When having a look at the WAI-ARIA practices it shows they are still "work in progresss" https://www.w3.org/TR/wai-aria-practices-1.1/#tooltip

But there is other (more informative) information on accessible tooltips on the following two pages:
https://inclusive-components.design/tooltips-toggletips/
https://www.sarasoueidan.com/blog/accessible-tooltips/

The most important things are:
- do not rely on the title attribute, that is not sufficient (and not usable on mobile devices at all)
- use aria-describedby to identify the tooltip for the element the tooltip is attached to
- use role="tooltip" for the tooltip itself
- tooltips should appear on focus as well as on hover

#6

Updated by Sybille Peters about 1 month ago

  • Status changed from Needs Feedback to New

Also available in: Atom PDF