shadcn.io is not affiliated with official shadcn/ui
Accessibility Check Block for React Aria
A WCAG-style self-check with seventeen criteria grouped by principle, a Passes checkbox and level badge on each, a conformance level worked out from the ticks, and a Copy report button.
Installation
Overview
Show where a product stands against the accessibility guidelines, with this accessibility check block for React with React Aria. Seventeen criteria sit in four principle bands (Perceivable, Operable, Understandable, Robust) in an Accordion that lets several stay open, the first open on load. Each criterion has a Checkbox for passing and a level Badge (A, AA or AAA). The band above them works out the conformance level from the ticks, "Not yet" with the count of level A criteria open, then "Meets level A", "Meets level AA" and "Meets level AAA", with a Progress bar of what passes. A Copy Button in the header puts a plain-text report on the clipboard. It is a self-check, not an audit, and says so. Bands are ruled by Guides. For design systems, release gates and teams tracking their own accessibility work.
FAQ
How is the level worked out?
By counting open criteria at each level. Any open level A criterion means "Not yet". With A all passing, any open AA means "Meets level A"; with AA also passing, any open AAA means "Meets level AA"; with everything passing it is "Meets level AAA". The three counts come from the item list, never typed.
What does Copy report contain?
A short plain-text summary: the title, the result and detail line, "Passed 12 of 17", and one line for each open criterion with its code, name and level. It is built from the same state, so it always matches the boxes.
Are these the full guidelines?
No. They are seventeen representative criteria so the block fits a screen; the codes and levels follow the published numbering. Replace START with the full set you test against, and the bands, counts and level adapt.