[wp-meta] [Making WordPress.org] #8125: Add missing and inconsistent alt attributes to homepage images on WordPress.org for improved accessibility

[Making WordPress.org]

#8125: Add missing and inconsistent alt attributes to homepage images on
WordPress.org for improved accessibility
------------------------------+--------------------------------------------
 Reporter:  ibrahimriaz       |      Owner:  (none)
     Type:  defect (bug)      |     Status:  new
 Priority:  normal            |  Milestone:
Component:  WordPress.org     |   Keywords:  needs-patch accessibility a11y
  Site                        |
------------------------------+--------------------------------------------
 During an accessibility review of the WordPress.org homepage, I found
 several images missing alt attributes or using non-descriptive text. This
 creates accessibility barriers for screen reader users and reduces overall
 usability.

 According to **WCAG 2.1** – Non-text Content (1.1.1) and WordPress’s
 accessibility standards, every image should have a meaningful alt text if
 it conveys information. Purely decorative images should use an empty alt
 (alt="") and role="presentation".

 **Examples Observed**

 **1. Hero Section**

 {{{
 <img src="https://wordpress.org/files/2024/04/brush.png" alt />
 }}}

 **Issue:** The image is purely decorative but lacks the appropriate
 accessibility attributes. It should have an empty alt attribute and a
 role="presentation" to indicate that it conveys no meaningful content.

 **Suggested fix:** Add role="presentation" to ensures screen readers
 ignore the image, improving accessibility for visually impaired users.

 {{{
 <img src="https://wordpress.org/files/2024/04/brush.png" alt=""
 role="presentation" />
 }}}


 **2. Whats New Section**

 {{{
 <img src="https://wordpress.org/files/2024/10/whats-new-visual-6-7.png"
 alt />
 }}}

 **Issue:** Missing alt attribute.
 **Suggested fix:** Alt text should describe the image.
 {{{
 <img src="https://wordpress.org/files/2024/10/whats-new-visual-6-7.png"
 alt="What's New Visual in WordPress" />
 }}}


 **3. Showcase Section**

 {{{
 <img src="https://wordpress.org/files/2023/10/showcase-top-row-full.png"
 alt />
 <img src="https://wordpress.org/files/2023/10/showcase-middle-row.png" alt
 />
 <img src="https://wordpress.org/files/2023/10/showcase-bottom-row.png" alt
 />
 }}}

 **Issue:** Missing alt text for showcase images.
 **Suggested fix:** Alt text should describe the context.
 {{{
 <img src="https://wordpress.org/files/2023/10/showcase-top-row-full.png"
 alt="Top Showcase Image" />
 <img src="https://wordpress.org/files/2023/10/showcase-middle-row.png"
 alt="Middle Showcase Image" />
 <img src="https://wordpress.org/files/2023/10/showcase-bottom-row.png"
 alt="Bottom Showcase Image" />
 }}}


 **Suggested Improvements:**
 Audit all <img> elements on the WordPress.org homepage.

 **Add appropriate alt attributes:**
 Descriptive text for informative images.
 alt="" + role="presentation" for decorative ones.

 Review block-rendered images (wp-block-image, wp-block-media-text, etc.)
 for consistent accessibility output.
 Optionally consider automated linting for missing alt attributes during
 the build process.


 **Benefits**

 - Improves compliance with WCAG 2.1 AA and WordPress Accessibility Coding
 Standards.
 - Enhances user experience for assistive technology users.
 - Supports SEO and improves overall content clarity.
 - Reinforces WordPress’s accessibility-first approach.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/8125>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org