Alt text helper text can be more educational and visual indicator of opening in new tab

[burtrw]

When viewing an image (media attachment), there is an input field for 'Alternative Text'.

Under the input field is helper text of:

Learn how to describe the purpose of the image (opens in a new tab). Leave empty if the image is purely decorative.

There should be a visual indicator that the link opens in a new tab. The helper text can also be made more concise and educational.

Suggested improvement:

Alt text describes the image's purpose. Leave it blank if the image is purely decorative. Learn more about alt text (opens in a new tab).

With the open in new tab dash icon at the end.

…st screen and media manager templates.

Updates the alt text description text in both the media attachment post screen and media manager templates. The new text is clearer and more concise, and includes an external link icon for better user experience.

Trac ticket: https://core.trac.wordpress.org/ticket/64374

---
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See ​GitHub Pull Requests for Code Review in the Core Handbook for more details.

[joedolson]

Alt text instructions in the block editor

[joedolson]

Noting that the use of an icon would be consistent with the block editor, and a visual indicator is required; the current screen reader text is insufficient.

I'm also noting that the alt text instructions are currently not consistent between the media library and the block editor, and those should be re-aligned.

I'm not convinced by the changes you're suggesting, @burtrw; they make an already long instruction even longer, and I'm not convinced we need to be that verbose. Happy to hear your arguments, though.

[burtrw]

Appreciate the feedback @joedolson.

they make an already long instruction even longer

I agree, I don't like this. And I'd prefer consistency and brevity everywhere.

I really struggle with the current text of the link being 'Describe the purpose of the image.' as I don't really know why I would click on that link. That is what prompted me to open this ticket and propose a solution.

My first attempt was closer to:

Alt text describes the purpose of the image. Leave empty if decorative. [Learn more].

But then I didn't like the 'Learn more' text as it was not descriptive enough. Hm.

[sabernhardt]

(editing ticket description to hide screen reader text visually and to show the dashicon)

[audrasjb]

I would simply start by adding the visual indicator. The current text looks good to me.

[joedolson]

I'm inclined to agree with @audrasjb. Practically, I think that the text change doesn't add much, and isn't more concise, despite that being the intention. Making the text change would introduce extra labor for translators, and I don't think the payoff is that great.

Adding the icon, however, is something we should do. That will still impact translators, but the labor involved to make the change is minimal.

[joedolson]

I've updated the PR to only add the icon, without changing the text.

Modal before:

Modal after:

Media screen before:

Media screen after:

[joedolson]

In 61597:

Media: Add external icon to alt text links.

This link opens in a new tab, and needs a visual indicator to provide an affordance to sighted users that this will happen.

Props burtrw, sabernhardt, audrasjb, westonruter, joedolson.
Fixes #64374.