Description
According to AGENTS.md, all components must meet WCAG 2.1 accessibility standards. However, an audit of the src/sections and src/components directories shows rampant use of alt="" or completely missing alt attributes on critical <img> tags. Noteably, these aren't just decorative images; many are instructional (Kanvas-collaborate-banner.js, Features/index.js, AcademyFeaturesMobileSwiper.js) conveying important architectural context. Absence of descriptive alternative text negatively impacts screen-reader users, violating core CNCF accessibility principles.
Expected Behavior
A codebase sweep should be performed to systematically categorize images. Purely decorative images should retain alt="" with a supplemental aria-hidden="true", while meaningful images must be updated with descriptive strings (e.g., alt="Meshery collaboration architecture diagram"). This will fulfill the strict WCAG 2.1 compliance mandate in Layer5 guidelines, boost overall SEO indexing for cloud-native keyword ranking on major search engines, and significantly improve UX for visually impaired developers navigating community material.
Screenshots
Environment:
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
Join the Layer5 Community by submitting your community member form.
Description
According to
AGENTS.md, all components must meet WCAG 2.1 accessibility standards. However, an audit of thesrc/sectionsandsrc/componentsdirectories shows rampant use ofalt=""or completely missingaltattributes on critical<img>tags. Noteably, these aren't just decorative images; many are instructional (Kanvas-collaborate-banner.js,Features/index.js,AcademyFeaturesMobileSwiper.js) conveying important architectural context. Absence of descriptive alternative text negatively impacts screen-reader users, violating core CNCF accessibility principles.Expected Behavior
A codebase sweep should be performed to systematically categorize images. Purely decorative images should retain
alt=""with a supplementalaria-hidden="true", while meaningful images must be updated with descriptive strings (e.g.,alt="Meshery collaboration architecture diagram"). This will fulfill the strict WCAG 2.1 compliance mandate in Layer5 guidelines, boost overall SEO indexing for cloud-native keyword ranking on major search engines, and significantly improve UX for visually impaired developers navigating community material.Screenshots
Environment:
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the
masterbranch.