Bug #89872
open
Epic #89595: Improve accessibility of backend
Tooltips in Backend need to become accessible
0%
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.
Updated by Michael Telgkamp over 4 years ago
- Related to Task #89566: Some buttons have missing tooltips added
Updated by Michael Telgkamp over 4 years ago
- Related to Bug #89520: Missing tooltips in info module added
Updated by
Updated by Andreas Kienast almost 4 years ago
- Status changed from New to Needs Feedback
What needs to be done to have accessible tooltips?
Updated by Michael Telgkamp almost 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
Updated by Sybille Peters over 3 years ago
- Status changed from Needs Feedback to New
Updated by Simon Schaufelberger about 2 years ago
- Related to Bug #97359: Missing tooltips in action control panel of list rows added
Updated by Annett Jähnichen about 1 year ago
- Related to Task #99569: Add optional label attribute as button label added
Updated by Christian Kuhn about 1 year ago
- Related to Task #99811: Prefer browser tooltips over bootstrap tooltips added
Updated by Michael Telgkamp about 1 month ago
- Related to Task #103292: File selector modal add button misses meaningful title added
- Related to Bug #102470: Datepicker icon has no labelling added
Updated by Michael Telgkamp about 1 month 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
Updated by Michael Telgkamp 4 days ago
- Related to Bug #102410: Filelist the magnifying glass switch has no labelling. added