Project

General

Profile

Actions

Task #92651

open

Epic #89595: Improve accessibility of backend

Delete button in the text input field is not accessible

Added by Martin Binder over 3 years ago. Updated 2 months ago.

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

0%

Estimated time:
TYPO3 Version:
11
PHP Version:
Tags:
accessibility
Complexity:
Sprint Focus:

Description

When you type in a text input field, a button with a "x" appears at the end of the input field.

<button type="button" tabindex="-1" class="close" style="visibility: visible;">
With this button the user can delete the text in the input field. This button has several accessibility problems:

The user cannot reach the button with the keyboard.
The button has no discernable text for screenreader users.
The contrast ratio of the "x" icon on white background is too low. It has a contrast ratio of 1.5:1, see WebAIM Color Contrast Checker. Input fields with dark background and white font color are not affected by this issue.


Related issues 2 (0 open2 closed)

Related to TYPO3 Core - Task #102372: Make clearable button more accessibleClosed2023-11-14

Actions
Related to TYPO3 Core - Task #103417: Add title and aria-label to clear input buttonClosed2024-03-18

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 Riccardo De Contardi 2 months ago

  • Related to Task #102372: Make clearable button more accessible added
Actions #4

Updated by Riccardo De Contardi 2 months ago

  • Related to Task #103417: Add title and aria-label to clear input button added
Actions #5

Updated by Riccardo De Contardi 2 months ago

Many thanks to Willi Wehmeier for his insights - I am going to write here his findings:

This issue addresses 3 problems:

1. The user cannot reach the button with the keyboard.
2. The button has no discernable text for screenreader users.
3. The contrast ratio of the "x" icon on white background is too low. It has a contrast ratio of 1.5:1, see WebAIM Color Contrast Checker

Problem 1. is a won't fix. the behavior has been patched but the patch got reverted because it has a negative impact for "normal" users. See https://forge.typo3.org/issues/102372#note-6

Problem 2. Fixed with https://forge.typo3.org/issues/103417

Problem 3. Still exists.

Actions

Also available in: Atom PDF