huangkevin-apr opened a new issue, #1984: URL: https://github.com/apache/apisix-website/issues/1984
### Current State ## Description of the current state/issue The comparison table on the Apache APISIX website contains checkmark (✓) and cross (✗) icons that lack accessible names, making it impossible for screen reader users to understand whether features are supported or not. ### Current Problems: 1. **12 accessibility violations** detected by IBM Equal Access Accessibility Checker 2. Screen readers cannot announce the meaning of the icons (supported vs. not supported) 3. Violates **WCAG 2.1 Level A** - Success Criterion 1.1.1 (Non-text Content) 4. Creates a barrier for users relying on assistive technologies <img width="2560" height="921" alt="Image" src="https://github.com/user-attachments/assets/c1c49bab-d924-4988-9887-a0526c03ab66"; /> **Why is this important?** An SVG component with a graphics role can contain essential information as well as multiple shapes. When viewed together, these elements give the impression of a single image. Providing a text alternative (accessible name and description) makes the equivalent information available through assistive technologies. With the explicit use of roles and attributes, the author provides a clear indication that the content should convey meaning via the accessibility name and description to assistive technology users. ### Affected Features in Comparison Table: - Dubbo, MQTT, Tengine and REST API to gRPC transcoding - Configuration rollback - Custom Load Balancing and routing - Plugin hot loading - Dashboard - Support any NGINX variable as routing condition ### User Impact: Users with visual impairments using screen readers cannot: - Determine which features are supported in APISIX vs other API gateways - Make informed decisions about API gateway selection - Understand the comparison table content independently ### Technical Details: The `<Tick>` and `<Cross>` components in the comparison table are rendered without accessible names: ```tsx // Current implementation (inaccessible) <td><Tick /></td> <td><Cross /></td> ``` Screen readers announce these as "image" or nothing at all, providing no semantic meaning. ## Link to the page **Production URL:** `https://apisix.apache.org/` **File Location:** `website/src/components/sections/Comparison.tsx` **Lines affected:** 53, 54, 58, 59, 63, 64, 68, 69, 73, 74, 78, 79 ## Screenshots (if relevant) <img width="2560" height="921" alt="Image" src="https://github.com/user-attachments/assets/c1c49bab-d924-4988-9887-a0526c03ab66"; /> ### IBM A11Y Checker Results:  ### Comparison Table:  ### Code View:  ## Expected Behavior Icons in the comparison table should have accessible names that clearly communicate their meaning: - Checkmark icons should be announced as "Supported" - Cross icons should be announced as "Not supported" ## Proposed Solution Add descriptive `title` props to the `<Tick>` and `<Cross>` components: ```tsx // Proposed fix (accessible) <td><Tick title="Supported" /></td> <td><Cross title="Not supported" /></td> ``` This will ensure screen readers can properly announce the status of each feature. ## Accessibility Standards Violated - **WCAG 2.1 Level A** - Success Criterion 1.1.1 (Non-text Content) - **WCAG 2.1 Level A** - Success Criterion 1.3.1 (Info and Relationships) ## Environment - **Browser:** Chrome/Firefox/Safari (issue affects all browsers) - **Detection Tool:** IBM Equal Access Accessibility Checker ## Labels - `accessibility` - `a11y` - `bug` - `WCAG` - `screen-reader` - `good first issue` --- **Note:** I'm preparing a PR to fix this issue. Would appreciate review from the team on whether the proposed solution aligns with the project's accessibility standards. ### Desired State **Description of the change you are proposing**: Added descriptive `title` props to all `<Tick>` and `<Cross>` components in the comparison table: - `<Tick title="Supported" />` - Clearly indicates the feature is supported in APISIX - `<Cross title="Not supported" />` - Clearly indicates the feature is not supported in other API gateways ### Would you like to fix this issue? Yes! Count me in -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
