shadcn/ui Accessibility Checker for WCAG 2.2 Reviews

shadcn/ui is popular because it gives teams editable components instead of a sealed component library. That is also the accessibility catch: once you copy and modify the component, the accessibility outcome is yours.

The right question is not "is shadcn accessible?" The right question is:

Does the version in your product still pass the keyboard, focus, label, contrast and error-message checks your buyer will ask about?

Why a component checklist beats a generic scanner

Generic scanners are useful, but they do not understand how your component is composed.

They may catch:

• missing form labels;
• empty buttons;
• duplicate IDs;
• some colour-contrast failures;
• missing language attributes.

They usually cannot judge:

• whether a combobox communicates expanded/collapsed state clearly;
• whether a dialog returns focus to the trigger;
• whether a custom chart communicates meaning to screen readers;
• whether focus remains visible after Tailwind theme changes;
• whether form errors are connected to fields;
• whether keyboard users can escape popovers, drawers and sheets predictably.

That is why shadcn accessibility work should be component-by-component.

Components to test first

Dialog, Sheet and Drawer

Check:

• focus moves into the open surface;
• Escape closes it where appropriate;
• focus returns to the trigger;
• background content is not reachable while open;
• the title and description are announced.

Combobox, Select and Command

Check:

• keyboard navigation works without a mouse;
• selected and highlighted states are announced;
• labels are programmatically connected;
• no result / error states are readable;
• focus does not disappear into custom wrappers.

Forms

Check:

• every input has a useful label;
• required fields are not indicated by colour alone;
• errors are tied to fields;
• help text is connected;
• submit failure is announced.

Buttons, links and icon controls

Check:

• icon-only buttons have accessible names;
• disabled states have enough contrast;
• focus rings are visible against your theme;
• links are not only distinguished by colour.

Charts and data display

Check:

• the chart has an accessible summary or data table alternative;
• screen-reader output is meaningful;
• colour is not the only distinction;
• tooltips are not the only way to access values.

The shadcn/ui GitHub issue tracker includes real accessibility discussions, including chart screen-reader behaviour and low-contrast palette concerns. Treat those as reminders that "library default" is not the same as "your implementation is audit-ready."

The evidence gap

Most teams stop at "we ran axe." A buyer or public-sector procurement reviewer often wants more:

• which components were tested;
• what failed;
• what was fixed;
• which criteria were considered;
• when the review happened;
• who owns the follow-up.

That is evidence, not just linting.

Run the free checker

Use the free component accessibility diagnostic to triage the riskiest component patterns before a buyer asks. It is a self-assessment and runs in your browser.

If you need a documented pack, Conformance Studio turns the findings into a dated evidence bundle for GBP 129 one-time. It is not a legal guarantee or formal audit. It helps you organise the work so a qualified reviewer or buyer can see what you tested and fixed.

FAQ

Is shadcn/ui accessible out of the box? It depends on the component, the Radix primitive, and your own modifications. You still need to test the implementation in your product.

Does axe catch every shadcn accessibility issue? No. Automated tools miss many keyboard, focus, composition and semantics problems. Use them, but add manual tests.

Should I test WCAG 2.1 or 2.2? Use the standard your buyer, contract or market requires. WCAG 2.2 adds criteria that can matter for target size and focus appearance, so many teams now review against 2.2 even where 2.1 is the formal minimum.

Can this replace an accessibility audit? No. It is a self-assessment and evidence organiser. Use a qualified accessibility professional for high-stakes assurance.

Bottom line

shadcn gives you control. Control means responsibility. Test the components your users actually touch, record the fixes, and keep a dated evidence file before procurement asks for one.