Images Can't Be Read by Screen Readers

WordPress / five-for-the-future

Plugins and themes for the Five for the Future subsite

https://wordpress.org/five-for-the-future/

51 stars 24 forks source link

Images Can't Be Read by Screen Readers #326

Open bbertucc opened 3 days ago

bbertucc commented 3 days ago

Problem

There are many images with missing alt text, meaning screen readers can't read the images.

For instance, every headshot is missing alt text on https://wordpress.org/five-for-the-future/testimonials/.

Here is a complete list of images with missing text for your review: missing-alt.csv

ryelle commented 3 days ago

Thanks for the issue! It would be helpful to have some more details for each page/case, since they're not all equal. Here's the list from the CSV, with some notes and questions.

Homepage All images have empty alt, but some actually are decorative (ex, the icons). I can see adding alt text to the two group photos & maybe headshots.
Testimonials The headshots are missing alt text, but would "Photo of [Name]" be acceptable/useful, since the name is right next to it?
My pledges This is the current user's avatar (or a placeholder if logged out). Kind of same question as above, is "Your avatar" really a helpful alt text?
For individuals page The steps screenshotted here are described in text, so does this need alt text?
Handbook: Onboarding Same as above, these screenshots are just illustrating the text
Handbook: About This image should probably just be text. If having a shareable infographic is important it could be additional on the page.

Once it's determined which images actually need alt text and what alt text would be useful, I can see that those changes are made.

bbertucc commented 3 days ago

Tagging @joedolson on this one. I'm not quite sure of WordPress alt text policies myself.

joedolson commented 3 days ago

Homepage: Icons and testimonial headshots should stay empty; adding descriptive text for the photos would be good.

Testimonials: Leave headshots empty.

My pledges: I think it could be beneficial for a user to know that their gravatar is present on this page, so add alt text here. It's not duplicate text like it would be in testimonials.

For individuals: No, those steps are described in detail. Alt text would be redundant.

Handbook: Onboarding: These are a bit less directly related to the text, so maybe, but I wouldn't consider it necessary.

(Aside: I don't think the 3rd bullet point under "How to resent the confirmation email..." is right. "Click the Resend Confirmation button near the contributor you want to remove.". You're not trying to remove a contributor at this point.)

About: Agreed; this image should just be converted into text.