Increase size of alternative text field in Media dialogs

Created on 7 February 2024, 5 months ago
Updated 14 May 2024, about 2 months ago

Problem/Motivation

The alternative text field in the CKEditor5 Add or Select Media dialog only allows for about 65-70 characters. This places a cognitive load on content editors whenever appropriate alternative text requires more than 65-70 characters.

The alternative text field in the CKEditor5 Media Alternative Text Override dialog only allows for about 90 characters. This places a cognitive load on content editors whenever appropriate alternative text requires more than 90 characters.

My understanding is that ideal alternative text is about 127 characters or less.

It would be better, whenever the alternative text needs to be larger than the field size, to have the default be that all such alternative text is visible while the content editor is initially entering or later reviewing it.

The only currently available work around is to type the alternative text elsewhere and copy it. Again, this places a cognitive load on content editors as well as adding steps to the work.

Steps to reproduce

Steps (in Google Chrome):
1. Go to simplytest.me
2. Type core in the field
3. Select Drupal core, latest version
4. Click the button to create the site
5. Log in as admin
6. If the management menu is not displayed, click Manage
7. Click Extend
8. In the search field, type media
9. Check the box for both unchecked modules displayed (Media and Media Library)
10. Click Install
11. Click Configuration
12. Click Text formats and editors
13. On the row for Basic HTML, click Configure
14. Drag the media icon into the active toolbar
15. Under enabled filters, check Embed media
16. Under filter settings, if Embed media is not the active tab, click Embed media
17. Check Image
18. Click Save configuration
19. Click Content
20. Click Add content
21. Click Basic page
22. Click in the Body field
23. Click the media icon in the WYSIWYG toolbar
24. Click Choose files
25. Navigate to an image in your computer's file system
26. Click Open
27. In the alternative text field, type "012345678 12345678 22345678 42345678 52345678 62345678 72345678"

Expected result: I can see everything that I have typed.
Actual result: Earlier-typed content scrolls out of the visible field contents.

28. Click Save
29. Click the edit pencil on the image in the gallery

Expected result: I can see everything that I have typed.
Actual result: Only the beginning of the alternative text is visible.

30. Click Save
31. Check the blank square on the image
32. Click Insert selected
33. In the body field click the image.
34. Click the override alternative text icon
35. In the alternative text override field, type "02345678 12345678 22345678 32345678 42345678 52345678 62345678 72345678 82345678 92345678"

Expected result: I can see everything that I have typed.
Actual result: Earlier-typed content scrolls out of the visible field contents.

Proposed resolution

Option one: Enlarge the two alternative text fields to as wide as feasible.
Option two: Grow the fields horizontally as the content exceeds the field width.
Option three: Grow the fields vertically as the content exceeds the field width. I recognize that this is not typical for a plain text field, but it would allow the alternative text to be as long as it needs to be to be as is appropriate for the given image.

I recommend against shrinking the text to fit, as that overrides the content editor's choices regarding font size, an accessibility issue.

Merge request link

Remaining tasks

User interface changes

Same as proposed resolution.

API changes

Data model changes

Release notes snippet

✨ Feature request
Status

Active

Version

11.0 πŸ”₯

Component
MediaΒ  β†’

Last updated about 3 hours ago

Created by

πŸ‡ΊπŸ‡ΈUnited States Charles Belov San Francisco, CA, US

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

Production build 0.69.0 2024