1
showcase
Shipped: Comparison table fo three plans
I built a responsive and accessible comparison page for three plans: Basic, Pro, and Premium. It compares around 15 features and includes a “Show differences only” checkbox that hides rows where all three plans have the same value and highlights rows where the plans differ.
The acceptance criteria can be verified as follows:
Keyboard operation: The “Show differences only” checkbox can be reached with Tab and operated with Space.
Visible focus: The checkbox has a clear visible focus indicator when using the keyboard.
No horizontal scrolling at 320px: The desktop table changes to a stacked layout on narrow screens. I tested the page at 320px and confirmed there is no horizontal scrolling
Assistive technology: The comparison uses a semantic HTML table with a caption, table headers, row headers, and scope attributes so the table structure is properly conveyed.
* Narrow-screen treatment: The README explains why the table changes to a stacked layout on small screens and how this keeps the comparison understandable without horizontal scrolling.
The reviewer can open the repository, run the page, test the checkbox using only the keyboard, and resize the viewport to 320px to verify the criteria.
Repository: https://github.com/likhitakarri22/accessible-plans-comparison
Built for the Verified Frontend Internship · accessible layout
Add a comment
0/2000