DevConnectDevConnect
Sign up · Log in
← back to the feed
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 layout
Add a comment
0/2000