Propose CI tests to validate mandatory ALT text for new content

[TineoC]

Proposed Solution

Implement a CI check that validates Markdown files for the presence of alt text in both Markdown image syntax ![]() and HTML <img> tags.

Requirements

• Scan Scope: All Markdown files under content/en/.
• Validation Rules:
  • Fail if an image tag is empty: ![ ](...).
  • Fail if an <img> tag lacks an alt attribute.
  • (Optional) Fail if alt text is generic (e.g., "image", "screenshot", "placeholder").
• Exemptions: Allow a specific override if an image is purely decorative (e.g., alt=""), though this should be rare for blog content.

Implementation Ideas

1. Markdown Linting: Use markdownlint with a custom rule.
2. Custom Script: A Python or Go script that parses the AST of the Markdown files.
3. Vale: Integrate a rule into our existing Vale configuration to check for accessibility standards in image descriptions.

Impact

• SEO: Better indexation in Google Image Search.

/area accessibility
/area seo
/kind feature

[k8s-ci-robot]

@TineoC: The label(s) area/accessibility, area/seo cannot be applied, because the repository doesn't have them.

Details

In response to this:

Problem Statement

An SEO and accessibility audit of kubernetes.dev identified 46 images missing alt attributes, primarily in the blog/ and events/ directories. While existing content can be fixed manually, we need a sustainable way to prevent new content (especially blog posts from various contributors) from being merged without proper image descriptions.

Proposed Solution

Implement a CI check (GitHub Action or pre-commit hook) that validates Markdown files for the presence of alt text in both Markdown image syntax ![]() and HTML <img> tags.

Requirements

• Scan Scope: All Markdown files under content/en/.
• Validation Rules:
• Fail if an image tag is empty: ![ ](...).
• Fail if an <img> tag lacks an alt attribute.
• (Optional) Fail if alt text is generic (e.g., "image", "screenshot", "placeholder").
• Exemptions: Allow a specific override if an image is purely decorative (e.g., alt=""), though this should be rare for blog content.

Implementation Ideas

1. Markdown Linting: Use markdownlint with a custom rule.
2. Custom Script: A Python or Go script that parses the AST of the Markdown files.
3. Vale: Integrate a rule into our existing Vale configuration to check for accessibility standards in image descriptions.

Impact

• SEO: Better indexation in Google Image Search.
• Accessibility: Compliance with WCAG 2.1 AA standards for screen readers.
• Consistency: Maintains high editorial standards for the contributor site.

/area accessibility
/area seo
/kind feature

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[jberkus]

Seems like a good improvment.

[jberkus]

/lgtm