WordPress.org

Make WordPress Core

Opened 10 months ago

Last modified 4 months ago

#41612 new enhancement

"URL" field in Media Modal confusing for newer users

Reported by: melchoyce Owned by:
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch
Focuses: ui, accessibility Cc:

Description

When testing the image widget recently, I found that many of the folks I tested with confused the image URL field with a place to add a link to their image. It says "URL," so people expect they can select and paste a URL into it. It's also is automatically focused when you select an image, which immediately draws some attention to it.

We could consider reorganizing this sidebar so that that the URL is placed either lower down, or in a different location, and have something like “Title” first. We could also, at the very least, consider updating the Image URL label, maybe even just from “URL” to “Image URL?”

Attachments (2)

41612.png (209.0 KB) - added by audrasjb 4 months ago.
41612.diff (3.7 KB) - added by audrasjb 4 months ago.
41612 image insertion modal fields reordering

Download all attachments as: .zip

Change History (12)

#1 follow-up: @afercia
10 months ago

  • Focuses accessibility added

It's also is automatically focused when you select an image, which immediately draws some attention to it.

+ 1. I'd like to remove any focus moved programmatically from the media modal, was working on a patch but couldn't find time to finish it 😬

We could consider reorganizing this sidebar

+ 1k :) and maybe move the alt text up, since it's even more important than "Title"

#2 in reply to: ↑ 1 @melchoyce
10 months ago

Replying to afercia:

and maybe move the alt text up, since it's even more important than "Title"

Could also be a good to tell people in a sentence why they should add alt text. Maybe even quickly describe all of the fields and what they do... I'll think about this and try sketching some ideas :)

#3 @afercia
5 months ago

Could also be a good to tell people in a sentence why they should add alt text.

Now that Gutenberg does something similar, that makes even more sense to me.

https://cldup.com/NhuWddz99U.png

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


5 months ago

#5 @afercia
5 months ago

  • Milestone changed from Awaiting Review to 5.0

Played a bit with this and re-ordering fields, changing text, adding some info for the alt-text seems doable. However "Image URL" wouldn't be appropriate because there are different kinds of attachments. On the other hand, "Attachment URL" is a bit too long and breaks in 2 lines... I;d try to limit the changes to text and re-ordering fields though. Thoughts?

#6 @melchoyce
5 months ago

Source file?

File location?

#7 @afercia
5 months ago

Related: #43169 (for the focus issue)

@audrasjb
4 months ago

#8 @audrasjb
4 months ago

  • Keywords has-screenshots added

Hi @melchoyce @afercia

Here is a first workaround for this ticket (see screenshot above):

  • URL field: moved to the bottom. I replaced "URL" label with "Permalink", so it's more relevant, not relative to media mime type and ok for the UI.
  • Alt text field: moved just after the title (which is not the title html attribute but the Title of the media in the media library) and I added a description for this field.

If it seems ok for you, I can make the patch. If not… let me know! :)

Cheers, Jb

#9 @audrasjb
4 months ago

  • Keywords has-patch added

Ok finally here is my first patch for this ticket. Tested, works as (I) expected :D

@audrasjb
4 months ago

41612 image insertion modal fields reordering

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


4 months ago

Note: See TracTickets for help on using tickets.