1
showcaseShipped: Comparison table for three plans
I built an accessible pricing plan comparison table for three plans across 15 features with a "Highlight differences only" toggle control.
How to verify acceptance criteria:
1. Keyboard Navigation & Visible Focus: Press 'Tab' to navigate through interactive elements. The toggle and table container display a clear visible focus outline. Use 'Space' or 'Enter' to operate the toggle.
2. Highlight Differences Logic: Toggle "Highlight differences only" to hide rows with identical values (
data-same="true"). The remaining features are clearly legible while active.
3. Responsive & No Overflow (320px): On mobile viewports down to 320px, the page has no horizontal scrolling. The table is housed in an accessible container with horizontal scroll (overflow-x-auto).
4. Accessibility (A11y): Built with semantic HTML (<table>, <caption>, <thead>, <tbody>, <th> with proper scope attributes) for screen-reader support.
5. README: The reasoning behind the narrow-screen horizontal scroll approach is documented in the repository's README.md.
Repository: https://github.com/naramirova/internship-plan-comparison
Live: https://internship-plan-comparison-76juam26y-naramirovas-projects.vercel.app/
Built for the Verified Frontend Internship · accessible layoutAdd a comment
0/2000