shadcn.io is not affiliated with official shadcn/ui
Accessibility Checker AI Block for React
Paste HTML into a monospace field and five real checks list the issues with their WCAG number and line, each with an Apply fix button that edits the text and re-checks at once.
Installation
Overview
Catch the markup problems a screen reader trips on, with this accessibility checker for React with Base UI. A header names Altwell, a markup checker, and a hairline frame with a plus mark on each corner holds two cells. At the start a monospace Textarea holds a typed eight-line HTML sample: an image without alt text, an icon-only button, an input without a label, a skipped heading and a "click here" link. At the end sit the issues, found by five real checks that run on the text itself on every keystroke. Each issue names its rule, a severity word (Serious, Moderate or Minor) as a Badge, its WCAG number, its line and the exact snippet, and an Apply fix Button edits the text with a typed replacement and re-checks at once. A severity Toggle Group filters the list, "Apply all fixes" clears the lot, and a Copy Button puts the real markup on the clipboard. The list is a held-height scroll region, so filtering never moves the panel. The frame is ruled by Guides.
FAQ
What stays local, and how do I wire it for real?
Everything. The sample markup and the five rules live at the top of the file, the checks are string patterns run in the browser, and Apply fix edits the text in the field and nothing else. This is not a full audit: it does not load a page, run scripts or compute colour contrast. To make it real, replace issuesOf with a call to an engine such as axe-core against a rendered page, and map its results onto the same Issue shape (rule, severity, line, snippet, replacement).
Which five checks run, and how do I add one?
Image without alt text (WCAG 1.1.1), button without a name (4.1.2), input without a label (1.3.1), skipped heading level (1.3.1) and vague link text (2.4.4). Each is a small function that returns issues with a start, an end and the replacement text; add one by writing another function and listing it in issuesOf and RULES.
Are the fixes right for every page?
They are safe starting points, not final answers. A missing alt becomes alt="Describe this image", a nameless button gets aria-label="Describe the action", and you are meant to write the real words. Heading and link fixes are worked out from the surrounding markup. After a fix the check runs again, so a fix that leaves a problem behind shows up as an issue again.
Is it usable with a keyboard and a screen reader?
The markup field has a hidden label, the severity filter is a named group of toggle buttons, and each Apply fix button says which rule and line it is for. Issues are a list with their count in the heading, and one polite status line says what a fix changed and how many issues remain.