Add missing and inconsistent alt attributes to homepage images on WordPress.org for improved accessibility

[ibrahimriaz]

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.