Make alt text input a textarea on classic editor

[edent]

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.

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:

• FAQs for New Contributors: ​https://make.wordpress.org/core/handbook/tutorials/faq-for-new-contributors/
• Contributing with Code Guide: ​https://make.wordpress.org/core/handbook/contribute/
• WordPress Coding Standards: ​https://make.wordpress.org/core/handbook/best-practices/coding-standards/
• Inline Documentation Standards: ​https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/
• Browser Support Policies: ​https://make.wordpress.org/core/handbook/best-practices/browser-support/
• Proper spelling and grammar related best practices: ​https://make.wordpress.org/core/handbook/best-practices/spelling/

-->

[pigsonthewing]

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

[heatherherbert]

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.

[afercia]

Related: #47456.

[sabernhardt]

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

[sabernhardt]

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]

Edit Media screen with textarea field for Alternative Text

[JavierCasares]

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

[afercia]

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.

[afercia]

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?).