Intermediate
Open
Pro
Reviewing a Custom Tab Component Before Launch
A teammate built a custom tabbed interface (Overview / Pricing /
Reviews) for a product page: three visually styled <div> elements
side by side, each with an onclick that swaps which content panel
is visible below. Clicking a tab changes its background color to
indicate it's active. There is no keyboard support, no ARIA
attributes, and the currently active tab is indicated only by the
background color change.
- Walk through this component against the four WCAG POUR principles and identify at least one violation under each.
- Which specific ARIA roles and attributes would you add to fix the semantic gaps (not the keyboard gaps)?
- Prioritize your fixes: which one should ship first if the team can only address one before a deadline, and why?
Share this question