Project

General

Profile

Actions

Task #103284

closed

Fix accessibility issues in topbar and menu

Added by Frank Nägler 9 months ago. Updated 4 months ago.

Status:
Closed
Priority:
Should have
Assignee:
Category:
Backend User Interface
Start date:
2024-03-05
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
12
PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

 • Img element with empty alt text must have absent or empty title attribute.

   (html > body > div > div:nth-child(1) > div:nth-child(1) > div > div > div > a > span:nth-child(1) > img)

   <img src="/_assets/081fa96a07de1dccb64a8a83e1567439/Images/typo3_logo_orange.svg" width="22" height="22" title="TYPO3 Content Management System" 
   alt="">

 • The heading structure is not logically nested. This h3 element appears to be the primary document heading, so should be an h1 element.

   (#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem > div > h3)

   <h3 class="dropdown-headline">Bookmarks</h3>

 • The heading structure is not logically nested. This h3 element should be an h1 to be properly nested.

   (#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem > div > h3)

   <h3 class="dropdown-headline">Bookmarks</h3>

 • Check that this link's link text contains information indicating that the link will open in a new window.

   (#typo3-cms-backend-backend-toolbaritems-helptoolbaritem > div > nav > ul > li:nth-child(2) > a)

   <a class="dropdown-item" role="menuitem" href="https://docs.typo3.org/" target="_blank" rel="noreferrer"> <span clas...</a>

 • The relationship between td elements and their associated th elements is not defined. As this table has multiple levels of th elements, you must
   use the headers attribute on td elements.

   (#typo3-cms-backend-backend-toolbaritems-systeminformationtoolbaritem > div > table)

   <table class="dropdown-table"> <tbody><t...</table>

 • If this table is a data table, consider using a caption element to the table element to identify this table.

   (#typo3-cms-backend-backend-toolbaritems-systeminformationtoolbaritem > div > table)

   <table class="dropdown-table"> <tbody><t...</table>

 • Img element is marked so that it is ignored by Assistive Technology.

   (#typo3-cms-backend-backend-toolbaritems-usertoolbaritem > a > span:nth-child(1) > span > span > img)

   <img src="/_assets/1ee1d3e909b58d32e30dcea666dd3224/Icons/T3Icons/svgs/avatar/avatar-default.svg" width="24" height="24" alt="" loading="lazy">

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(1))

   <li role="presentation" data-modulemenu-level="1"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2))

   <li role="presentation" data-modulemenu-level="1" class="modulemenu-group modulemenu-group-expanded"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2) > ul > li:nth-child(1))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2) > ul > li:nth-child(2))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2) > ul > li:nth-child(3))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2) > ul > li:nth-child(4))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2) > ul > li:nth-child(5))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2) > ul > li:nth-child(6))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2) > ul > li:nth-child(7))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2) > ul > li:nth-child(8))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(2) > ul > li:nth-child(9))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(3))

   <li role="presentation" data-modulemenu-level="1" class="modulemenu-group modulemenu-group-expanded"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(3) > ul > li)

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(4))

   <li role="presentation" data-modulemenu-level="1" class="modulemenu-group modulemenu-group-expanded"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(4) > ul > li:nth-child(1))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(4) > ul > li:nth-child(2))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(4) > ul > li:nth-child(3))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(4) > ul > li:nth-child(4))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(5))

   <li role="presentation" data-modulemenu-level="1" class="modulemenu-group modulemenu-group-expanded"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(5) > ul > li:nth-child(1))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(5) > ul > li:nth-child(2))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(5) > ul > li:nth-child(3))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(5) > ul > li:nth-child(4))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(5) > ul > li:nth-child(5))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(5) > ul > li:nth-child(6))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(6))

   <li role="presentation" data-modulemenu-level="1" class="modulemenu-group modulemenu-group-expanded"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(6) > ul > li:nth-child(1))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(6) > ul > li:nth-child(2))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(6) > ul > li:nth-child(3))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(6) > ul > li:nth-child(4))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(6) > ul > li:nth-child(5))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(6) > ul > li:nth-child(6))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(6) > ul > li:nth-child(7))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

 • This element's role is "presentation" but contains child elements with semantic meaning.

   (#modulemenu > ul > li:nth-child(6) > ul > li:nth-child(8))

   <li role="presentation" data-modulemenu-level="2"> ...</li>

Actions #1

Updated by Gerrit Code Review 9 months ago

  • Status changed from In Progress to Under Review

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

Actions #2

Updated by Gerrit Code Review 9 months ago

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

Actions #3

Updated by Gerrit Code Review 9 months ago

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

Actions #4

Updated by Gerrit Code Review 9 months ago

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

Actions #5

Updated by Gerrit Code Review 9 months ago

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

Actions #6

Updated by Benjamin Franzke 9 months ago

  • Description updated (diff)
Actions #7

Updated by Benjamin Franzke 9 months ago

  • Target version changed from 13.1 to Candidate for patchlevel
  • TYPO3 Version changed from 13 to 12
Actions #8

Updated by Gerrit Code Review 9 months ago

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

Actions #9

Updated by Frank Nägler 9 months ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
Actions #10

Updated by Benni Mack 4 months ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF