search

WordPress / wporg-main-2022

A block-based child theme for WordPress.org, plus local environment
62 stars 22 forks source link

Missing Alt Attribute on WordPress.org Image Elements #462

Closed bbertucc closed 3 days ago

bbertucc commented 5 days ago

Description:

An issue has been identified where image elements on several web pages lack the alt attribute. This attribute is essential for web accessibility as it provides alternative text for screen readers, ensuring that visually impaired users can understand the content conveyed by images.

Current Code:

Here is a CSV that contains all the items with missing alt text and URLs related to them: query_result.csv

Correcting Alt Text:

Alt text for many of the images will be straight-forward (for example: a McDonald's logo can be "Logo for McDonalds"). That said, here is an article that I appreciate around creating useful alt text: https://adrianroselli.com/2024/05/my-approach-to-alt-text.html

ryelle commented 3 days ago

I think all of these are technically not valid… which means we're using alt attributes correctly everywhere else, hopefully?

I de-duplicated the source list to identify which pages were affected, and I'll drop that here:

List of de-duplicated source URLs 1. https://wordpress.org/enterprise/content-marketing/ 1. https://wordpress.org/enterprise/ecommerce/ 1. https://wordpress.org/enterprise/education/ 1. https://wordpress.org/enterprise/integrations/ 1. https://wordpress.org/enterprise/media/ 1. https://wordpress.org/files/2022/08/community-photo-2-q50-scaled.webp 1. https://wordpress.org/files/2022/08/community-photo-2-scaled.webp 1. https://wordpress.org/files/2022/08/Community-Photo-scaled.webp 1. https://wordpress.org/files/2022/08/Community-Photo_2560.webp 1. https://wordpress.org/files/2022/08/Disney.png 1. https://wordpress.org/files/2022/08/editor-bg-scaled-1.webp 1. https://wordpress.org/files/2022/08/Editor-scaled.webp 1. https://wordpress.org/files/2022/08/embed-image.png 1. https://wordpress.org/files/2022/08/Showcase_2560.webp 1. https://wordpress.org/files/2022/08/Sony-Music.png 1. https://wordpress.org/files/2022/08/Spotify.png 1. https://wordpress.org/files/2022/08/theme-styles.png 1. https://wordpress.org/files/2022/08/Time-Magazine.png 1. https://wordpress.org/files/2022/08/Vogue.png 1. https://wordpress.org/files/2022/08/Wired.png 1. https://wordpress.org/files/2022/10/a.png 1. https://wordpress.org/files/2022/10/showcase_thumb_a.png 1. https://wordpress.org/files/2022/10/showcase_thumb_b.png 1. https://wordpress.org/files/2022/10/showcase_thumb_c.png 1. https://wordpress.org/files/2022/10/showcase_thumb_d.png 1. https://wordpress.org/files/2022/10/showcase_thumb_e.png 1. https://wordpress.org/files/2022/10/showcase_thumb_f.png 1. https://wordpress.org/files/2022/10/showcase_thumb_g.png 1. https://wordpress.org/files/2022/10/showcase_thumb_h.png 1. https://wordpress.org/files/2022/10/showcase_thumb_i.png 1. https://wordpress.org/files/2022/10/showcase_thumb_j.png 1. https://wordpress.org/files/2022/11/a-1.png 1. https://wordpress.org/files/2022/11/a-2.png 1. https://wordpress.org/files/2022/11/a.png 1. https://wordpress.org/files/2022/11/b-1.png 1. https://wordpress.org/files/2022/11/b-2.png 1. https://wordpress.org/files/2022/11/b.png 1. https://wordpress.org/files/2022/11/c.png 1. https://wordpress.org/files/2022/11/enterprise-logos-1.png 1. https://wordpress.org/files/2022/11/enterprise-logos-e1669846375339.png 1. https://wordpress.org/files/2022/11/logo-people.png 1. https://wordpress.org/files/2022/11/logo-readers.png 1. https://wordpress.org/files/2022/11/logo-sun.png 1. https://wordpress.org/files/2022/11/logo-variety.png 1. https://wordpress.org/files/2022/11/logo-wwd.png 1. https://wordpress.org/files/2022/11/NYP.png 1. https://wordpress.org/files/2022/11/showcase_thumb_a-2.png 1. https://wordpress.org/files/2022/11/showcase_thumb_a-3.png 1. https://wordpress.org/files/2022/11/showcase_thumb_b-4.png 1. https://wordpress.org/files/2022/11/showcase_thumb_b-5.png 1. https://wordpress.org/files/2022/11/showcase_thumb_c-2.png 1. https://wordpress.org/files/2022/11/showcase_thumb_c-3.png 1. https://wordpress.org/files/2022/11/showcase_thumb_c-4.png 1. https://wordpress.org/files/2022/11/wordpress-enterprise-header.png 1. https://wordpress.org/files/2022/12/CNN-1.png 1. https://wordpress.org/files/2022/12/CNN.png 1. https://wordpress.org/files/2022/12/enterprise-use-cases-full.png 1. https://wordpress.org/files/2022/12/Enterprise-Use-Cases.png 1. https://wordpress.org/files/2022/12/facebook-1.png 1. https://wordpress.org/files/2022/12/facebook.png 1. https://wordpress.org/files/2022/12/Logos-BW-1.png 1. https://wordpress.org/files/2022/12/Logos-BW.png 1. https://wordpress.org/files/2022/12/microsoft-1.png 1. https://wordpress.org/files/2022/12/microsoft.png 1. https://wordpress.org/files/2022/12/NYP-1.png 1. https://wordpress.org/files/2022/12/NYP.png 1. https://wordpress.org/files/2022/12/People-1.png 1. https://wordpress.org/files/2022/12/RD-1.png 1. https://wordpress.org/files/2022/12/RD.png 1. https://wordpress.org/files/2022/12/showcase_thumbs_a-75-scaled.webp 1. https://wordpress.org/files/2022/12/showcase_thumbs_b-50-scaled.webp 1. https://wordpress.org/files/2022/12/showcase_thumbs_c-50-scaled.webp 1. https://wordpress.org/files/2022/12/sotw-drawer-background.png 1. https://wordpress.org/files/2022/12/sotw-logo-large-1.png 1. https://wordpress.org/files/2022/12/Spotify-1.png 1. https://wordpress.org/files/2022/12/Spotify.png 1. https://wordpress.org/files/2022/12/Sun-1.png 1. https://wordpress.org/files/2022/12/Sun.png 1. https://wordpress.org/files/2022/12/TED-1.png 1. https://wordpress.org/files/2022/12/TED.png 1. https://wordpress.org/files/2022/12/Variety-1.png 1. https://wordpress.org/files/2022/12/Variety.png 1. https://wordpress.org/files/2022/12/WordPress-Enterprise.png 1. https://wordpress.org/files/2022/12/WWD-1.png 1. https://wordpress.org/files/2022/12/WWD.png 1. https://wordpress.org/files/2023/01/CNN.webp 1. https://wordpress.org/files/2023/01/Extensibility.png 1. https://wordpress.org/files/2023/01/facebook.webp 1. https://wordpress.org/files/2023/01/Microsoft.webp 1. https://wordpress.org/files/2023/01/NYP.webp 1. https://wordpress.org/files/2023/01/Open_Source.png 1. https://wordpress.org/files/2023/01/People-1.png 1. https://wordpress.org/files/2023/01/People.webp 1. https://wordpress.org/files/2023/01/RD.webp 1. https://wordpress.org/files/2023/01/Security.png 1. https://wordpress.org/files/2023/01/Spotify.webp 1. https://wordpress.org/files/2023/01/Sun.webp 1. https://wordpress.org/files/2023/01/TED.png 1. https://wordpress.org/files/2023/01/TED.webp 1. https://wordpress.org/files/2023/01/Variety.webp 1. https://wordpress.org/files/2023/01/WordPress-Enterprise.png 1. https://wordpress.org/files/2023/01/WWD.webp 1. https://wordpress.org/files/2023/03/swag-bulk.png 1. https://wordpress.org/files/2023/05/wp20-logo-white.png 1. https://wordpress.org/files/2023/07/image-3-edited.png 1. https://wordpress.org/files/2023/07/screencapture-wordpress-org-download-releases-6-3-2023-07-19-11_33_08.png 1. https://wordpress.org/files/2023/08/Highlight-Grid.png 1. https://wordpress.org/files/2023/10/270319241-c2f85fca-c6a3-4eb4-9e02-5b02ba8212c0.png 1. https://wordpress.org/files/2023/11/Frame-52.png 1. https://wordpress.org/files/2023/11/Group-51.png 1. https://wordpress.org/files/2023/11/sotw-hero-2.png 1. https://wordpress.org/files/2023/12/SotW-horizontal.png 1. https://wordpress.org/files/2024/02/ele.png 1. https://wordpress.org/files/2024/04/brush-hero.png 1. https://wordpress.org/files/2024/04/brush.png 1. https://wordpress.org/files/2024/04/feature-build.png 1. https://wordpress.org/files/2024/04/feature-publish.png 1. https://wordpress.org/files/2024/04/feature-style.png 1. https://wordpress.org/files/2024/04/feature-whatsnew.png 1. https://wordpress.org/files/2024/04/photo-community-1.png 1. https://wordpress.org/files/2024/04/photo-community.png 1. https://wordpress.org/files/2024/04/wordpress-homepage-ogimage-202404.png 1. https://wordpress.org/files/2024/05/patterns-collage.jpg 1. https://wordpress.org/files/2024/06/charcoal-logo.png

Pages 1-5 are real pages, but they were never launched (see https://meta.trac.wordpress.org/ticket/4825). The content on here is also not complete. I don't think we need to fix anything here — if we decide to launch these pages, they'll be recreated in the new theme.

Pages 6-124 (the rest) are all links to image files. I'm assuming this came from the fact that attachment pages (which had been indexed) are now redirecting to the image itself, and it looks like the node_html for these is just the img tag that Chrome renders for an image.

So I'm going to close this issue (and I'll leave some meta-feedback in slack).

bbertucc commented 2 days ago

@ryelle - makes sense to close this issue. I added a note to tune future scans to exclude scanning media items as pages.

I would also caution to say “we're using alt attributes correctly everywhere else”. This test just flag media items that didn’t have the alt attribute present. It skipped looking at how the alt attribute was used. For instance, media at this url https://wordpress.org/download/releases/6-5/ have the alt attribute but the alt attributes are empty. An empty alt attribute, like this alt=“”, is used for decorative images. Following W3C’s decision tree (link), I would say the images on that page “contribute meaning to the current page or context”. In that case, they should be described.

Unfortunately, I haven’t come across a good test to alert us to see if an image is truly decorative when alt text is empty. Most people choose to just look at every image that has alt=“”, and I can consider that approach next scan.

ryelle commented 2 days ago

For instance, media at this url https://wordpress.org/download/releases/6-5/ have the alt attribute but the alt attributes are empty.

They were determined to be "decorative" by the a11y team, using the same criteria as we do for the about page— the content near it is describing what the image is showing. See https://github.com/WordPress/wporg-main-2022/issues/425 for that request.

I would also caution to say “we're using alt attributes correctly everywhere else”.

Of course, I'm well aware that alt text is more than just missing-or-there, and you can't automated-scan for meaning-related issues like whether the alt text is relevant. But I'm also (pleasantly) surprised that it didn't flag any other missing alt texts on the site.

bbertucc commented 2 days ago

Yes! It should be noted that the automated report turned up a lot fewer issues than expected. I will followup with the A11y team.

joedolson commented 2 days ago

The image cited by @bbertucc under the heading "And Much More" is different from all the other images on that page, in that it isn't accompanied by any supporting text. Instead, the image contains all of the information described by the heading. So, right now, for a screen reader experience, there's a heading "And Much More", then an empty image, and no additional features.

There's too much text in that panel to be really effective as alt text, and it also fails on other points - namely, 1.4.5: Images of Text.

Ideally, that panel would be a grid format with text & accompanying images. However, lacking that, there needs to be a bulleted list that provides all of the feature points on the page in simple text. Right now, it's clearly not an equal experience.