Project

General

Profile

Actions

Task #103284

closed

Fix accessibility issues in topbar and menu

Added by Frank Nägler 2 months ago. Updated 2 months ago.

Status:
Resolved
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

Also available in: Atom PDF