Bug #92613

Epic #89595: Improve accessibility of backend

Mobile module menu links are missing link title

Added by Gabe Troyan about 1 month ago. Updated about 1 month ago.

Under Review
Should have
Backend User Interface
Target version:
Start date:
Due date:
% Done:


Estimated time:
TYPO3 Version:
PHP Version:
tas2020, accessibility
Is Regression:
Sprint Focus:



  • Module menu left

Affected WCAG 2.1 Success criterions

  • 2.4.4 Link Purpose (In Context) A
  • 4.1.2 Name, Role, Value A

Affected components

  • Link


When the module menu on the left is collapsed, only the icons without the titles are visible. When navigating to a link, the descriptive text must be presented to screen reader users to indicate the target of the link. The linked icons in the module menu have no descriptive text. The title-Attribute is not sufficient for all assistive technologies.

<button title="Page content" class="modulemenu-action t3js-modulemenu-action modulemenu-action-active" role="menuitem" id="web_layout" data-modulename="web_layout" data-link="/typo3/index.php?route=%2Fmodule%2Fweb%2Flayout&amp;token=a283194fa743e2f53d933e31d8bb84c801ae0af8" data-navigationcomponentid="TYPO3/CMS/Backend/PageTree/PageTreeElement">


When the module menu is collapsed, make sure that there are accessible titles available for the menu links. One solution would be to remove the CSS style "display: none" from the actual title of the menu item.

<span class="modulemenu-name">Page</span>


Related issues

Related to TYPO3 Core - Feature #92704: Make the navigation through module menu more efficient for keyboard usersUnder Review2020-10-25


Updated by Gerrit Code Review about 1 month ago

  • Status changed from New to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/66220


Updated by Riccardo De Contardi about 1 month ago

  • Parent task set to #89595

Updated by Martin Kutschker about 1 month ago

  • Related to Feature #92704: Make the navigation through module menu more efficient for keyboard users added

Updated by Martin Kutschker about 1 month ago

Suggested (and tested) solution:

// Name
.modulemenu-name {
    @extend .sr-only;

    overflow: hidden;
    flex-grow: 1;
    margin-left: 1em;
    white-space: nowrap;
    text-overflow: ellipsis;

// Scaffold
.scaffold-modulemenu-expanded {
    .modulemenu-name {
        position: static;
        margin: 0 0 0 1em;
        width: auto;
        height: auto;

Also available in: Atom PDF