Project

General

Profile

Actions

Bug #89872

open

Epic #89595: Improve accessibility of backend

Tooltips in Backend need to become accessible

Added by Michael Telgkamp over 4 years ago. Updated 3 months 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:
13
PHP Version:
Tags:
accessibility, tooltip
Complexity:
Is Regression:
Sprint Focus:

Description

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

Equally, the aria-label attribute is not sufficient, as it does not show a tooltip and is only announced for screen reader users.

Adding both attributes is also not optimal, as some assistive technologies announce the same twice, and touch device users still cannot access the title attribute.

We need a new, globally available tooltip option, that is accessible and can be used in cases where currently title attributes or other alternatives are used.

When the new solution is in place, all usages of the title attribute and the aria-label attribute should be checked and there should be a decision whether it should be changed to the tooltip solution or not.


Related issues 8 (2 open6 closed)

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
Related to TYPO3 Core - Bug #97359: Missing tooltips in action control panel of list rowsClosed2022-04-11

Actions
Related to TYPO3 Core - Task #99569: Add optional label attribute as button labelUnder ReviewAnnett Jähnichen2023-01-17

Actions
Related to TYPO3 Core - Task #99811: Prefer browser tooltips over bootstrap tooltipsClosed2023-02-03

Actions
Related to TYPO3 Core - Task #103292: File selector modal add button misses meaningful titleResolved2024-03-06

Actions
Related to TYPO3 Core - Bug #102470: Datepicker icon has no labellingResolved2023-11-22

Actions
Related to TYPO3 Core - Bug #102410: Filelist the magnifying glass switch has no labelling.Resolved2023-11-20

Actions
Actions #1

Updated by Michael Telgkamp over 4 years ago

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

Updated by Michael Telgkamp over 4 years ago

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

Updated by Riccardo De Contardi over 4 years ago

  • Parent task set to #89595
Actions #4

Updated by Andreas Kienast about 4 years ago

  • Status changed from New to Needs Feedback

What needs to be done to have accessible tooltips?

Actions #5

Updated by Michael Telgkamp about 4 years 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

Actions #6

Updated by Sybille Peters over 3 years ago

  • Status changed from Needs Feedback to New
Actions #7

Updated by Simon Schaufelberger about 2 years ago

  • Related to Bug #97359: Missing tooltips in action control panel of list rows added
Actions #8

Updated by Annett Jähnichen over 1 year ago

  • Related to Task #99569: Add optional label attribute as button label added
Actions #9

Updated by Christian Kuhn over 1 year ago

  • Related to Task #99811: Prefer browser tooltips over bootstrap tooltips added
Actions #10

Updated by Michael Telgkamp 3 months ago

  • Related to Task #103292: File selector modal add button misses meaningful title added
  • Related to Bug #102470: Datepicker icon has no labelling added
Actions #11

Updated by Michael Telgkamp 3 months ago

  • Subject changed from Tooltips in Backend should become accessible to Tooltips in Backend need to become accessible
  • Description updated (diff)
  • TYPO3 Version changed from 10 to 13
Actions #12

Updated by Michael Telgkamp 2 months ago

  • Related to Bug #102410: Filelist the magnifying glass switch has no labelling. added
Actions

Also available in: Atom PDF