Project

General

Profile

Actions

Bug #92684

open

Epic #89595: Improve accessibility of backend

Form input fields in the search detail page have insufficient color contrast and focus style

Added by Jakob Widhalm over 3 years ago. Updated over 1 year ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Start date:
2020-10-22
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
11
PHP Version:
Tags:
accessibility
Complexity:
no-brainer
Is Regression:
Sprint Focus:

Description

Pages/Tasks
  • Search
Affected WCAG 2.1 Success criterions
  • 1.4.11 Non-Text Contrast (WCAG 2.1) AA
  • 2.4.7 Focus Visible AA
Affected components
  • Text input
  • Select

Description
The form inputs and selects at the search detail page (choose "Show all" in search or activate search fields on page view) have an insufficient contrast ratio of 1.8:1 (border color: #BABBBA, background color #F9FAF9), see WebAIM Color Contrast Checker.

When focussed, the elements get a subtle box-shadow and the border-color changes from #BABBBA to #AAAAAA, which is an insufficient contrast change from 1.2:1, see WebAIM Color Contrast Checker.

Recommendation
To fulfill the minimum contrast ratio for form inputs, implement the following:

  • increase the contrast ratio of the border color for the form inputs and selects to a minimum value of 3:1.
  • increase the contrast ratio of the border color for the focussed form inputs and selects to a minimum value of 3:1

#tas2020


Files

search_contrast.png (55.3 KB) search_contrast.png Jakob Widhalm, 2020-10-22 18:22

Related issues 1 (1 open0 closed)

Related to TYPO3 Core - Task #92671: Form elements have insufficient color contrast and insufficient focus styleNew2020-10-22

Actions
Actions #1

Updated by Riccardo De Contardi over 3 years ago

  • Parent task set to #89595
Actions #2

Updated by Riccardo De Contardi over 3 years ago

  • Category set to Backend User Interface
Actions #3

Updated by Benni Mack over 3 years ago

  • Target version changed from 11.0 to Candidate for Major Version
Actions #4

Updated by Mathias Schreiber about 2 years ago

  • Sprint Focus set to Remote Sprint
Actions #5

Updated by Simon Schaufelberger about 2 years ago

  • Description updated (diff)
Actions #6

Updated by Susanne Moog over 1 year ago

  • Sprint Focus changed from Remote Sprint to On Location Sprint
Actions #7

Updated by Oliver Hader over 1 year ago

  • Sprint Focus deleted (On Location Sprint)
Actions #8

Updated by Benni Mack 9 months ago

  • Related to Task #92671: Form elements have insufficient color contrast and insufficient focus style added
Actions

Also available in: Atom PDF