WordPress.org

Make WordPress Core

Opened 4 weeks ago

Last modified 6 days ago

#50066 new enhancement

Make alt text input a textarea on classic editor

Reported by: edent Owned by:
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-patch needs-testing
Focuses: ui, accessibility Cc:

Description

The alt text interface is a single line which only shows a few characters of text.

If we want people to add meaningful alt text, this should be improved.

I suggest making it a textarea element.

This is already the case in the Gutenberg editor - see https://github.com/WordPress/gutenberg/pull/6119

The code is in /src/wp-includes/media-template.php :

<span class="setting has-description" data-setting="alt">
        <label for="attachment-details-alt-text" class="name"><?php _e( 'Alt Text' ); ?></label>
        <input type="text" id="attachment-details-alt-text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
</span>

That input type="text" can be changed to a <textarea> element.

Attachments (4)

50066.diff (2.6 KB) - added by sabernhardt 3 weeks ago.
50066.edit-media.diff (3.4 KB) - added by sabernhardt 3 weeks ago.
including the Edit Media screen alt text field, without editing styles
edit-media-alt-text-textarea.png (8.7 KB) - added by sabernhardt 3 weeks ago.
Edit Media screen with textarea field for Alternative Text
50066 edit media diff.png (215.8 KB) - added by afercia 10 days ago.

Download all attachments as: .zip

Change History (14)

This ticket was mentioned in PR #246 on WordPress/wordpress-develop by edent.


4 weeks ago

Trac ticket: https://core.trac.wordpress.org/ticket/50066
This makes it easier to add meaningful alt text to images. It brings the interface in line with the caption and description fields.

See also https://github.com/WordPress/gutenberg/pull/6119/files

<!--
Hi there! Thanks for contributing to WordPress!

Pull Requests in this GitHub repository must be linked to a ticket in the WordPress Core Trac instance (https://core.trac.wordpress.org), and are only used for code review. No pull requests will be merged on GitHub.

See the WordPress Handbook page on using PRs for Code Review more information: https://make.wordpress.org/core/handbook/contribute/git/github-pull-requests-for-code-review/

If this is your first time contributing, you may also find reviewing these guides first to be helpful:

-->

#2 @pigsonthewing
3 weeks ago

This would be a good step towards improving accessibility; please apply ASAP!

#3 @heatherherbert
3 weeks ago

Sounds a good idea to me. I wonder if a larger field may make it more prominent in the user's mind as well and therefore more likely to be used.

#4 @afercia
3 weeks ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.5

Related: #47456.

@sabernhardt
3 weeks ago

@sabernhardt
3 weeks ago

including the Edit Media screen alt text field, without editing styles

#5 @sabernhardt
3 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

Thanks @edent for the pull request!

50066.diff includes the 4 fields you identified for switching to textarea tags. I just moved the data.model.alt variable inside the tag for the last item (the Image Details modal).

The option 50066.edit-media.diff also changes the alt text field to a textarea on the Edit Media screen (editing an image under Media -> Library). The current input is already wide, but this would be more consistent with the post editor then. The caption field there has a height of 4em, yet I did not set the height for alt text as well.

If the additional textarea is desired, I'm not sure whether it's better to change the CSS selector to .wp_attachment_details textarea.widefat or to add the alt text ID explicitly along with the caption like this:

.wp_attachment_details #attachment_alt,
.wp_attachment_details #attachment_caption {
	height: 4em;
}

@sabernhardt
3 weeks ago

Edit Media screen with textarea field for Alternative Text

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


13 days ago

#7 @JavierCasares
12 days ago

Hi... we should review also these files:

Unit Tests:

  • /tests/qunit/index.html:1166
  • /tests/qunit/index.html:1331
  • /tests/qunit/index.html:1623
  • /tests/qunit/index.html:1678

About the CSS, we should check:

  • /build/wp-admin/css/media.css:808
  • /build/wp-admin/css/media-rtl.css:809

And the plugin experiments

  • /src/wp-content/plugins/design-experiments/sass/new-colors.scss:9543
  • /src/wp-content/plugins/design-experiments/css/new-colors.css:9322

#8 @afercia
10 days ago

Thanks @JavierCasares the QUnit index.html is pretty out of date but yes we should at least update it with the new textarea. Re: the CSS: files in the build directory shouldn't be touched, as they're generated during the build process. Same applies to the rtl files, which are generated automatically.

#9 @afercia
10 days ago

Regarding the patch, this ticket was discussed during last weekly accessibility bug-scrub. The only concern is that by making the alt text textarea have the same size of the Caption and Description textareas, users might think entering a long text is a good thing. Instead, ideally the alt text should be short. Longer descriptions of the image's purpose should go in the caption or in the page content.

See the attached screenshot, which illustrates the new textarea will have (almost always) the same size of the other textareas. Maybe some visual hierarchy might help, by making the alt text textarea have a smaller height (let's say the equivalent of two lines of text?).

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 days ago

Note: See TracTickets for help on using tickets.