Fix: Add accessible titles to comparison table icons

[huangkevin-apr]

Fixes: #1984

Changes:

Solution

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

Changes Made

Files Modified:

• website/src/components/sections/Comparison.tsx

Detailed Changes:

1. Dubbo, MQTT, Tengine and REST API to gRPC transcoding

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

2. Configuration rollback

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

3. Custom Load Balancing and routing

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

4. Plugin hot loading

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

5. Dashboard

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

6. Support any NGINX variable as routing condition

// Before
<td><Tick /></td>
<td><Cross /></td>

// After
<td><Tick title="Supported" /></td>
<td><Cross title="Not supported" /></td>

Screenshots of the change:

Fix Before

Fix After

Additional Info

The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications.
The generated fixes were manually reviewed and validated before submission.

[Copilot]

Pull request overview

This pull request adds accessibility improvements to the comparison table on the Apache APISIX website by providing accessible titles to checkmark and cross icons. The change addresses WCAG 2.1 Level A compliance issues (Success Criterion 1.1.1 - Non-text Content) identified by IBM Equal Access Accessibility Checker, ensuring screen reader users can understand feature support status in the comparison table.

Changes:

• Added descriptive title props to all <Tick> and <Cross> SVG components in the comparison table
• Tick icons now announce "Supported" to screen readers
• Cross icons now announce "Not supported" to screen readers

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.