Task #92648
openEpic #89595: Improve accessibility of backend
Page column header has insufficient color contrast and no <h2>-tag, the icon has no discernible text
0%
Description
Text must have a color contrast ratio of 4.5:1, icons a color contrast ratio of 3:1. The headline in .t3-page-column-header has insufficient color contrast of 2.84 (foreground color: #999999, background color: #ffffff), see WebAIM Color Contrast Checker.
Since this is a heading, a <h2>-tag should be used.
A screenreader doesn't know the purpose of the link because the link and icon have no discernible text.
#tas2020 TYPO3-60
Updated by Gerrit Code Review almost 4 years 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/+/66875
Updated by Gerrit Code Review almost 4 years ago
Patch set 2 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/+/66875
Updated by Christian Kuhn over 3 years ago
- Status changed from Under Review to New
Updated by Christian Kuhn over 3 years ago
The pending patch did not find consensus and is stalled. Issues is kept open for now for a fresh approach when work is picked up here again.
Updated by Riccardo De Contardi 6 months ago
- Related to Bug #103583: Improve accessibility of elements with low opacity on focus by keyboard added
Updated by Riccardo De Contardi 6 months ago
On TYPO3 13.2.0-dev the column areas have been redesigned; now the text is
12px bold #000000
while the background-color is #f2f2f2
It is sufficient to be AAA compliant for small texts (https://www.learnui.design/tools/accessible-color-generator.html)
what's left?
- Still, it is not a heading, but a plain text inside a
<div>
. - The "Edit this column icon" on its normal state has a really low contrast (disabled!) - see related issue