Accessibility: Alt Text Metadata is not imported but Description is

[jhmonroe]

Originally posted to GitHub: ​GB71395

Accessibility issue:
When you upload an image that has existing metadata for description and alt text, the description is automagically added to the image block as the caption, but the alt text is ignored.

I am working with clients using assistive technology who know how to add metadata to images, and this would save them a step of needing to navigate the block editor so much if their metadata is imported correctly and more fully!

(Presumably this is some issue with updating content in the right sidebar versus in the block you're inserting which requires no refresh)

Only semi-related issue I found was this: ​GB66491

Step-by-step reproduction instructions

• add metadata to an image in both description and alt text fields
• upload image to an image block
• watch the caption populate from description but alt text is not added in right sidebar

Screenshots, screen recording, code snippet

Metadata for description and alt text added in Adobe Bridge:

Description appears as caption, nothing shows in metadata:

[jhmonroe]

screenshot showing metadata placed on file

[jhmonroe]

screenshot showing description coming thru as caption but alt text being ignored

[jhmonroe]

screenshot showing the same result, but viewed in media library

[rishabhwp]

I was going through this ticket and noticed that ticket #55535 seems to be closely related and could offer useful context. Adding it here for reference.

[jhmonroe]

@rishabhwp thank you for sharing! i looked thru a few pages of tickets after searching for alt text and this didn't come up.

it's an interesting record of some of the things the accessibility team considered.

ultimately if they decide they don't want existing alt text to auto-populate, it will be useful for me to have some explanations to give my blind clients on why a more tedious path was chosen for them (where they have to do something twice in this case)

@mmzeroexpcom comments there are especially interesting. as are @Jesterman about why we should not make people do work twice that they're already done, especially if those people are blind and we're creating more work for them to navigate menus, blocks, etc. If someone has gone thru the trouble to add alt text metadata once, we should honor that.

[adamsilverstein]

Based on the discussion in #55535 I don't know if this is planned, I'm curious what @joedolson thinks. If this isn't planned, we can go ahead and close these tickets.

In the meantime, I created a mini plugin based on the code provided in #55535 by @pbiron. This plugin will extract the alt meta data and insert it automatically into the Alt field in the media library.

Plugin: ​https://gist.github.com/adamsilverstein/e9c9993d938eae80e559d9eda8c0fdcc

Instructions for installing a Gist mini plugin: ​https://gist.github.com/westonruter/6110fbc4bef0c4b8c021a112012f7e9c

[adamsilverstein]

@jhmonroe can you give this plugin a test, it worked in my testing - however I only tested the single image provided. If this works for you you could install it as an mu plugin on your client's sites.

[adamsilverstein]

test image after uploading with mini plugin enabled

[jhmonroe]

@adamsilverstein thanks for this! Can confirm it works

The only error it causes for me is the following when I don't have a title added:

Warning: Undefined array key "title" in /Users/[my-username]/Local Sites/blanksite/app/public/wp-admin/includes/media.php on line 395
103

If it's this minimal, would be great to have this feature in the media library core uploader! #55535 should def consider

[joedolson]

It's definitely still under consideration; it's on the agenda for the accessibility team meeting this Thursday.

[adamsilverstein]

Thanks @joedolson!

My main goal with the plugin besides providing a stop-gap solution was to get some wider testing of the code to make sure it worked with a variety of images. If you do decide to add this to core, I am happy to help contribute the code or review.

@jhmonroe I would appreciate any additional manual testing you can do with various images to see if any other issues come up in your testing.

The only error it causes for me is the following when I don't have a title added:
Warning: Undefined array key "title" in /Users/[my-username]/Local Sites/blanksite/app/public/wp-admin/includes/media.php on line 395

can you please provide a sample image that throws this error when uploaded? this will help me debug the issue.

[jhmonroe]

Hi @adamsilverstein here's the image in question. I only added a description and alt text since those were the fields I was concerned with for clients. So perhaps your plugin simply needs a way to ignore fields that aren't present. Guessing it was only looking for description, alt text, and title?

​https://www.dropbox.com/scl/fi/1rob8ro4p2d9m2txrdhju/1Cottekill-1024px-Metadata4.jpg?rlkey=smextxn491atx6chyfx7bg0su&dl=0

@joedolson thank you!

[joedolson]

To assess the risk of this, we're going to review how the alt text metadata fields are used by major image creation and sourcing services. The major risk in adding this is if image creators or sharing services are mis-using the metadata field, e.g., adding branding or other meaningless non-content into the field. If that is the case, then importing that data would make automated detection of missing alternative text considerably harder. Right now, with the default being empty, it's very easy to find which images need alternative text. If a lot of images import bad information, then that becomes difficult.

@sajjad67 is going to go through the major image editors and sources and see if there's anything they do that would be a point of concern, so that we can go into this with good information about the possible consequences.

[sajjad67]

For our first phase testing, I’ve shortlisted the following tools and resources:

Photo Editing Softwares

1. Photoshop (Already Have)
2. Lightroom (Already Have)
3. Canva (Already Have)
4. GIMP (Already Have)
5. Photopea (Already Have)
6. DxO PhotoLab
7. Capture One Studio
8. Affinity Photo
9. Luminar Neo
10. Figma (Already Have)

Stock Photo Websites

1. Shutterstock
2. Adobe Stock
3. Getty Images
4. iStock
5. Depositphotos (Already Have)
6. Alamy
7. Stocksy
8. Envato Elements (Already Have)
9. Pexels (Already Have)
10. Unsplash (Already Have)

AI-Generated Image Platforms / Tools

1. DALL·E (Already Have)
2. MidJourney (Already Have)
3. Stable Diffusion (Already Have)
4. Adobe Firefly
5. Runway Gen-2
6. Leonardo AI (Already Have)
7. NightCafe (Already Have)
8. Fotor AI (Already Have)
9. Artbreeder
10. Canva AI Image Generator (Already Have)

If anyone already has a subscription to any of the above tools or platforms, it would be great if you could share a test image generated through them. I currently don’t have access to all subscriptions, so any contributions here would help speed up testing.

[sajjad67]

I have completed a review of the following external image sources and tools to check whether they add any default alt descriptions to images on export or download.

Photo Editing Software

• Photoshop ✅
• Lightroom ✅
• Canva ✅
• GIMP ✅
• Photopea ✅
• Figma ✅

Stock Photo Websites

• Depositphotos ✅
• Envato Elements ✅
• Pexels ✅
• Unsplash ✅

AI-Generated Image Platforms / Tools

• DALL·E ✅
• MidJourney ✅
• Stable Diffusion ✅
• Leonardo AI ✅
• NightCafe ✅
• Fotor AI ✅
• Canva AI Image Generator ✅

Findings:
After testing all of the above, none of these applications, stock photo providers, or AI image generation platforms include any default alt description or accessibility metadata (AltTextAccessibility) in the exported/downloaded images.

So far, there appears to be no external source that automatically provides usable alt text at image creation or download.

[JeffPaul]

<following>