1
showcase
Shipped: Comparison table for three plans
## Acceptance Criteria
### Responsive
* 3 plans are compared across 15 features.
* Desktop uses a semantic comparison table.
* At 320px and other narrow widths, plans switch to stacked cards.
* No horizontal scrolling is required on mobile.
### Accessibility
* The comparison uses semantic table markup with column and row headers.
* The “Show differences only” control is a native keyboard-accessible checkbox.
* All interactive elements are reachable using the keyboard.
* Focus indicators are clearly visible.
* A skip link allows keyboard users to jump directly to the comparison.
* The comparison remains understandable when differences-only mode is enabled.
### Interaction
* “Show differences only” hides features where all three plans have the same value.
* A live status message communicates how many features/differences are currently displayed.
### Verification
Tested at:
* 320px mobile
* 375px mobile
* 768px tablet
* Desktop
Keyboard test:
Tab → Space/Enter → Tab through all interactive elements with no keyboard traps.
Repository: https://github.com/Zainab-Ashraf-786/Comparison-Table/tree/main/my-app
Live: https://my-app-six-opal.vercel.app/
Built for the Verified Frontend Internship · accessible layoutAdd a comment
0/2000