Keyboard accessibility: not working with CKEditor 5 inserting image

Created on 13 October 2023, about 1 year ago
Updated 22 March 2024, 8 months ago

Problem/Motivation

Adding images via CKEditor isn't possible with keyboard only.

Persona (This is fictitious to illustrate a problem):

I work in a large organization creating content. Due to an injury, I have acquired an hand-eye coordination impairment that means I cannot use the mouse to interact with computer content. I rely on using the keyboard commands.

I am creating content using CKEditor (5) and I would like to add an image then give it alt text. I can't do it with keyboard alone.

Steps to reproduce

Step 1. Put focus in Editing area of CK Editor

Step 2. Press Alt + F10 to move keyboard focus to toolbar
Step 3. Use arrow keys to move to Insert Image button menu, then select it

Notice content area opens:

It has these controls:

  • Insert image via URL, Edit
  • Unavailable Save, Button
  • Cancel, Button
  • Link, Open File Browser

Step 4. Try to tab through expanded content

Problem: It's not possible to tab to the Open File Browser link.

Note

I initially reported this to the CKEditor team, but they suggested I report it to Drupal

This is a WCAG 2.0 issue: success criteria 2.1.1

🐛 Bug report
Status

Postponed: needs info

Version

11.0 🔥

Component
CKEditor 5 

Last updated about 17 hours ago

Created by

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Issue created by @mweiler
  • This issue is a little difficult to understand as written.

  • Sorry about the content editing problems. Made a mistake earlier on. I've tidied it up.

  • Is this issue about the inability to navigate by keyboard into the field I've indicated below?

  • Status changed to Postponed: needs info about 1 year ago
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺
  • 🇦🇺Australia jannakha Brisbane!
  • Video demonstration of the problem added .

  • 🇦🇺Australia jannakha Brisbane!

    to #15

    it doesn't look like it's native CKEditor5/Drupal implementation of CKEditor5:
    - which version of CKEditor5 do you have installed?
    - do you have a custom plugin enabled?

    here's a screenshot of CKEditor5 native feature:

  • 🇨🇦Canada ryanrobinson_wlu

    I have not been able to replicate the interface shared by @jannakha. I can say that part of the difference is the IMCE file browser module. If I disable that, and check the "Enable image uploads" button in the text format configuration, I will see the icon shared by jannakha, the one with the up arrow. But if I click on that, it immediately opens my Windows Explorers for an upload, with no in-between options shown here to distinguish between "upload from computer", "insert with file manager", or "insert image via URL."

    If, with IMCE disabled, I uncheck the "Enable image uploads," I get the icon with the link on it instead, and clicking on it gives the prompt to enter a URL, like @mweiler's initial report but without the IMCE file browser button beside the link box.

    That is consistent with the wording of the "Enable image uploads" option, which says "When enabled, images can only be uploaded. When disabled, images can only be added by URL." It can do "only" one or the other, not both, without IMCE.

    Drupal core with CKEditor5 10.2.4, the latest stable as of this writing. Maybe the @jannakha version is Drupal 11 and this has been improved to allow both without needing IMCE? I have not yet started our Drupal 11 update tests so don't have an environment ready to try that.

    So, conclusion 1 is that the problem @mweiler is reporting is probably coming from IMCE, not CKE5 in core. Conclusion 2 is that we can't have both mechanisms for adding images without IMCE, so then the question becomes whether we want one button with an inaccessible-by-keyboard file upload, or two buttons that are maybe more confusing to differentiate at a glance.

Production build 0.71.5 2024