Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Accordion Accessibility Pledge About Block for Ark UI

An accessibility pledge for a checker product: an accordion of the four principles with a conformance word and how each is met, beside an audit history rail of four audits.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An accessibility pledge for React with Ark UI, written for Inclusio, a fictional accessibility checker. A split with a divider: at the start, a header and an accordion of the four principles, Perceivable, Operable, Understandable and Robust. Each row has a drawn initial, the principle, one conformance word in a badge ("Supports", "Partially supports") and what it asks in a line; it opens to how Inclusio meets it, and the one partial row names its known gap and when it is due. One row is open at a time and the first is open on load. At the end, an audit history: four audits as a numbered rail, newest first, each with what was found and fixed. On a phone the history sits under the accordion. It's built from Accordion, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For an about page or a trust page. The conformance words and the audits are example data, not a real statement.

FAQ

How do I change the principles and the audits?

PRINCIPLES holds each principle with its conformance word, what it asks and how it is met; AUDITS holds the history, newest first. The first audit gets the filled node. Write a gap as a plain line in a principle's list, as the example does, rather than hiding it. The words and numbers here are example data.

Which conformance words should I use?

The example uses the words an accessibility report usually does: Supports, Partially supports and Does not support. Use the ones your own review gives you, and say what is missing for any partial row.

How does the keyboard work?

Tab moves between the four rows; Enter or Space opens and closes one. Up and Down arrows also move between the rows. Opening a row closes the one that was open.

What happens on a phone?

The audit history drops under the accordion, behind a rule from rail to rail, and the badge wraps under the principle's name when the row is narrow.

Do the dates stay current?

They are the company's own years and quarters ("Year 6, Q1"), written in the data, so nothing is worked out from today's date. Add a new audit at the top when one happens.

Does it work right to left?

Yes. The initial, the rail and the dates follow the reading direction, and the chevron sits at the end of each row.

All 150 about blocks