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:
- 12 accessibility violations detected by IBM Equal Access Accessibility Checker
- Screen readers cannot announce the meaning of the icons (supported vs. not supported)
- Violates WCAG 2.1 Level A - Success Criterion 1.1.1 (Non-text Content)
- Creates a barrier for users relying on assistive technologies
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:
// 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)
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:
// 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
accessibilitya11ybugWCAGscreen-readergood 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
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:
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:
User Impact:
Users with visual impairments using screen readers cannot:
Technical Details:
The
<Tick>and<Cross>components in the comparison table are rendered without accessible names: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.tsxLines affected: 53, 54, 58, 59, 63, 64, 68, 69, 73, 74, 78, 79
Screenshots (if relevant)
IBM A11Y Checker Results:
Comparison Table:
Code View:
Expected Behavior
Icons in the comparison table should have accessible names that clearly communicate their meaning:
Proposed Solution
Add descriptive
titleprops to the<Tick>and<Cross>components:This will ensure screen readers can properly announce the status of each feature.
Accessibility Standards Violated
Environment
Labels
accessibilitya11ybugWCAGscreen-readergood first issueNote: 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
titleprops 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 gatewaysWould you like to fix this issue?
Yes! Count me in