WordPress.org

Make WordPress Core

Opened 21 months ago

Closed 6 weeks ago

Last modified 5 days ago

#41612 closed enhancement (fixed)

"URL" field in Media Modal confusing for newer users

Reported by: melchoyce Owned by: audrasjb
Milestone: 5.2 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch commit
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 (4)

41612.png (209.0 KB) - added by audrasjb 15 months ago.
41612.diff (3.7 KB) - added by audrasjb 14 months ago.
41612 image insertion modal fields reordering
41612.2.diff (14.9 KB) - added by afercia 7 weeks ago.
41612.3.diff (17.7 KB) - added by afercia 6 weeks ago.

Download all attachments as: .zip

Change History (47)

#1 follow-up: @afercia
21 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
20 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
16 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.


15 months ago

#5 @afercia
15 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
15 months ago

Source file?

File location?

#7 @afercia
15 months ago

Related: #43169 (for the focus issue)

@audrasjb
15 months ago

#8 @audrasjb
15 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
14 months ago

  • Keywords has-patch added

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

@audrasjb
14 months ago

41612 image insertion modal fields reordering

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


14 months ago

#11 @afercia
7 months ago

Re: the field being automatically focused, there's a pending patch on #43169 waiting for review since a few months.

I'd also like to remark, kindly, that this ticket was created 14 months ago and still there's no feedback from the Media component maintainers.

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


7 months ago

#13 @afercia
7 months ago

  • Milestone changed from 5.0 to 4.9.9

Discussed during today's accessibility bug-scrub an agreed we'd like to propose this for 4.9.9 consideration.

#14 @melchoyce
7 months ago

  • Milestone changed from 4.9.9 to Future Release

Sounds like 4.9.9 is off, so I'm punting this to a future release.

#15 @audrasjb
5 months ago

  • Milestone changed from Future Release to 5.0.1

#16 @pento
4 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#17 @pento
4 months ago

  • Milestone changed from 5.0.2 to 5.0.3

#18 @audrasjb
4 months ago

  • Milestone changed from 5.0.3 to 5.1

Hello,

5.0.3 is going to be released in a couple of weeks.

It doesn't appear this ticket can be handled in the next couple of weeks (still needs feedback from media/design component maintainers/team). Let's address it in 5.1 which is coming in February. Feel free to ask for changing the milestone if you think this issue can be quickly resolved.

Cheers,

Jb

#19 @afercia
4 months ago

See also #43178.

#20 @pento
4 months ago

  • Keywords dev-feedback added
  • Milestone changed from 5.1 to Future Release

#21 @audrasjb
3 months ago

  • Keywords dev-feedback removed
  • Milestone changed from Future Release to 5.2
  • Owner set to audrasjb
  • Status changed from new to assigned

#22 @audrasjb
2 months ago

  • Keywords ui-feedback added

Hi,

Adding ui-feedback keyword.
We need a media component and/or design team feedback on https://core.trac.wordpress.org/attachment/ticket/41612/41612.png

Thanks

#23 @afercia
7 weeks ago

  • Keywords needs-refresh added

This ticket was mentioned in Slack in #core-media by audrasjb. View the logs.


7 weeks ago

#25 @afercia
7 weeks ago

Noticed a few things that need to be addressed, will try to update the patch.

Re: the URL field label, I'm not sure "Permalink" would be appropriate, as that's a term WordPress uses specifically for the posts links. Considering this URL field:

  • is read-only
  • its main purpose is to allow users to copy the attachment URL
  • users don't need a specific term like "Media URL", "Attachment URL", etc.
  • the label text needs to be short

What about to just say what it's meant for? "Copy URL":

http://cldup.com/fzfMAO2ly7.png

/Cc @melchoyce @audrasjb

#26 @audrasjb
7 weeks ago

Thanks for your feedback @afercia . I love that idea. Although it is definitely a permanent link (so it's ok to call it by it's name), I think focusing on the main available action (copy-paste the URL) is a great idea.

#27 @melchoyce
7 weeks ago

I like "Copy URL" 👍

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


7 weeks ago

#29 @afercia
7 weeks ago

  • Keywords needs-refresh removed

41612.2.diff updates the patch and changes the URL field label to "Copy link".

Additionally:

  • the alt text field is now the first one in all the 3 templates involved:
    • Media Library grid > Attachment Details modal
    • Add Media modal (when adding an image )
    • Image Details modal (when editing an image)
  • removes the initial focus on the field: this also prevented navigation to next/previous attachments in the Media Library modal, see also #43169
  • changes the alt text description: this is temporary: a better wording will be proposed by the accessibility team
  • moves the description out of the label
  • adds aria-describedby to target the description
  • adjusts the CSS accordingly
  • updates the QUnit index.html file

#30 @afercia
7 weeks ago

  • Keywords ui-feedback removed

Screenshots (description text is temporary also, in the patch "Copy Link" is title cased):

http://cldup.com/V-jloFv9lu.png

http://cldup.com/Yr-jYYXF2c.png

http://cldup.com/JWQ5Agsf9W.png

Last edited 7 weeks ago by afercia (previous) (diff)

@afercia
7 weeks ago

#31 @melchoyce
7 weeks ago

Looks like the other labels are all title case, so we should make it "Copy Link" to match. Otherwise, visually looks good to me.

#32 @afercia
7 weeks ago

Screenshots (description text is temporary also, in the patch "Copy Link" is title cased):

🙂I've taken the screenshots before the last refinements and didn't feel like making new screenshots 😝

#33 @melchoyce
7 weeks ago

Hahaha totally fair!

#34 @afercia
6 weeks ago

Only thing left here is finding a better text to replace the temporary:

Functional replacement for the image. Leave empty if the image is not a key part of the content.

It needs to:

  • clarify that the alt text is not a description of the image
  • instead, the alt text needs to describe the function or purpose of the image in its specific context
  • only in some cases it can be the image content, for linked images it can be the link destination, for purely decorative images it needs to be an empty string, etc.
  • maybe add a link to the W3C "alt decision tree" tutorial

#35 @michelleweber
6 weeks ago

For the Alt Text copy, can we just be super direct? I wouldn't belabor it, and just be as clear as possible about the main purpose for including Alt Text. Something like:

Alt Text is a verbal description/explanation of an image. It’s used by screen readers, and allows people with vision impairments to get a sense of the image’s content. Alt Text is recommended for all key images used on a website.

(I prefer "description," but if there's a reason that word isn't appropriate here, "explanation" also works.)

If you need something shorter:

Alt Text is a verbal description/explanation of an image that allows people with vision impairments to get a sense of the image’s content.

#36 @afercia
6 weeks ago

@michelleweber thanks. To avoid (historical) misconceptions about the alt text, we should really avoid the word "description". See also a related issue for Gutenberg: https://github.com/WordPress/gutenberg/issues/14326

#38 @afercia
6 weeks ago

See https://github.com/WordPress/gutenberg/issues/14326#issuecomment-473058366 leaning towards the following text:

Describe [ link ] the purpose of the image [ /link ]. Leave empty if the image is purely decorative.

where the link points to the W3C alt decision tree tutorial.

@afercia
6 weeks ago

#39 @afercia
6 weeks ago

  • Keywords commit added

41612.3.diff refreshes the patch with the new alt text description. Also, moves the alt text field to the top and adds the description in the "Insert from URL" template (missed in the previous patches).

Screenshots:

http://cldup.com/rEOw58IORo.png

http://cldup.com/2bBP-c_HnH.png

http://cldup.com/mpNqwiKpFS.png

http://cldup.com/O9XWRiMUpu.png

#40 @afercia
6 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 44900:

Accessibility: improve the "URL" and "Alt text" fields in the media modals.

Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into.
Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized.

  • changes the URL field label to "Copy link"
  • moves the alt text field to the top as first field
  • avoids to set initial focus on the alt text field
  • adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial
  • adds aria-describedby to target the explanatory text
  • adjusts the CSS accordingly
  • updates the QUnit index.html file

Props melchoyce, audrasjb, afercia.
Fixes #41612.

#41 @afercia
4 weeks ago

In 45038:

Accessibility: Improve the "Alt text" description.

Moves the word "Describe" within the link.

Amends [44900].
See #41612.

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


13 days ago

#43 @afercia
5 days ago

In 45248:

Accessibility: Improve the "Alt text" description styles for small screens.

Amends [44900].
See #41612.

Note: See TracTickets for help on using tickets.