1
showcase
Shipped: Comparison table for three plans
I built a responsive, keyboard-accessible comparison table for three plans with around 15 features and a “Show differences only” control.
A reviewer can verify the acceptance criteria by:
* Using only the keyboard: Tab through the interface and use Enter/Space on the comparison button. Focus indicators are clearly visible.
* Checking the Tab order, which follows the visual order.
* Testing the page at 320px width; the layout switches to a stacked mobile presentation with no horizontal scrolling.
* Inspecting the table with accessibility tools or a screen reader; it uses semantic
<table>, <caption>, <thead>, <tbody>, and properly scoped row/column headers.
* Activating “Show differences only” and confirming that identical features are hidden while the feature names and remaining plan values stay understandable.
* Reviewing the README for the keyboard-operation details and the reasoning behind the narrow-screen treatment.
Repository: https://github.com/vanshika2723/Accessible-Plan-Comparison.git
Live: https://vanshika2723.github.io/Accessible-Plan-Comparison/
Built for the Verified Frontend Internship · accessible layoutAdd a comment
0/2000