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.

Status:
Under Review
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2020-10-20
Due date:
% Done:

0%

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

Description

Pages/Tasks

  • 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

Description

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">
 ...
</button>

Recommendation

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>

https://typo3.audit.gugler.at/issues#TYPO3-75


Related issues

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

Actions
#1

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

#2

Updated by Riccardo De Contardi about 1 month ago

  • Parent task set to #89595
#3

Updated by Martin Kutschker about 1 month ago

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

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