0
showcase
Shipped: Comparison table for three plans
1. What was built
Wheelhouse Clay Studio — Membership Comparison Page (built for Brief C: "Comparison table for three plans").
Overview: A responsive, accessible membership comparison interface comparing three studio tiers (Drop-in, Regular, and Resident) across 15 distinct features.
Tech Stack: Pure semantic HTML5, modern CSS, and vanilla JavaScript (zero dependencies, no build step, light/dark mode support, Atkinson Hyperlegible typeface).
Key Features:
Plan Cards: Top-level overview cards displaying monthly pricing and selection action buttons.
Comprehensive Comparison Table: A complete feature matrix categorized across studio access, clay allowances, firing, and storage.
"Highlight Differences" Control: An accessible toggle button that dynamically identifies and highlights rows that differ between plans while keeping identical rows understandable and legible.
Per-Feature Mobile Reflow: On screens below 640px (down to 320px), rows reflow so all three plan values for a given feature sit side-by-side with localized plan labels, eliminating the need to scroll horizontally or memorize values between stacked cards.
2. How a reviewer can see that acceptance criteria are met
A reviewer can run and test the application directly by opening index.html in any browser (or serving with npx serve .).
Here is how each acceptance criterion can be verified step-by-step:
A. Operable end-to-end via keyboard in visual order
How to verify:
Press Tab starting from the top of the page.
First Tab reveals the Skip Link ("Skip to the comparison"). Pressing Enter jumps directly to #compare-heading.
Continue tabbing: the focus moves naturally to the three plan selection buttons ("Choose Drop-in", "Choose Regular", "Choose Resident"), followed by the "Highlight differences" toggle.
Activate any button or toggle using Enter or Space.
Verification: DOM order strictly matches visual order with no artificial tabindex > 0 or CSS order disruptions.
B. Clear visible focus indicators
How to verify:
Tab through interactive elements in both Light and Dark mode (or using system dark mode preference).
Verification: Every interactive element shows an unmistakable 3px cobalt outline with an offset (:focus-visible), exceeding WCAG 3:1 contrast against both backgrounds.
C. Fully responsive with no horizontal scrolling at 320px
How to verify:
Open DevTools (F12), toggle Device Toolbar, and set viewport width to 320px (as well as 375px and 1280px).
Run in the console:
javascript
document.documentElement.scrollWidth === document.documentElement.clientWidth
Verification: Evaluates to true (no horizontal scrollbar). Long strings wrap cleanly, and each feature cleanly displays the feature title above the three plan values side-by-side with small localized labels (Drop-in, Regular, Resident).
D. Semantic table structure conveyed to Assistive Technology
How to verify:
Inspect the table elements in browser DevTools (Accessibility tree):
Uses native <table>, <caption>, <thead scope="col">, and <th scope="row"> headers.
Carries explicit ARIA roles (role="table", role="row", role="columnheader", role="rowheader", role="cell") to ensure screen readers (such as VoiceOver/Safari or NVDA) do not drop table semantics when CSS display: block / grid is applied on mobile widths.
Mobile labels inside cells use aria-hidden="true" to prevent screen readers from repeating column headers twice.
E. "Highlight differences" functionality & accessibility
How to verify:
Click or press Space/Enter on the "Highlight differences" button.
Visual cue: Rows with differences receive a tinted background, a solid cobalt border on the left, and a "Differs" tag. Rows with identical values show a "Same on every plan" badge.
Color-independence: Highlighting does not rely on color alone; text remains above 4.5:1 contrast, and tags remain clear in Windows High Contrast / Forced Colors mode.
Screen Reader announcements:
The toggle has aria-pressed="true|false".
An aria-live="polite" status region announces the outcome (e.g., "10 of 15 features differ between plans.").
Because tags are inside <th scope="row">, assistive technology reads the feature name alongside its comparison state (e.g., "Clay included, Differs").
Repository: https://github.com/aleewains/plan-comparison
Live: https://plan-comparison-jet.vercel.app/
Built for the Verified Frontend Internship · accessible layout
Add a comment
0/2000