Help & Documentation

Getting started

AccessAI bundles five complementary tools. Each one is grounded in deterministic checks first (HTTP status, DOM stats, image bytes, readability formulas) and then enriched with AI commentary that cites WCAG criteria. You can use them in any order, but a typical workflow looks like:

1. Score a page first — paste a URL into the Accessibility Score tool to see the big picture and which WCAG areas need the most attention.
2. Drill into specifics with the Code Reviewer for HTML/CSS/JSX, the Alt Text Generator for images, and the Content Simplifier for prose.
3. Ask follow-up questions in the Chat assistant — every reply is grounded in WCAG and inclusive design best practices, with suggested follow-ups after each answer.

Chat assistant

Open the chat. Ask anything about WCAG, ARIA, assistive technology, color contrast, focus management, screen-reader testing — the assistant is tuned specifically for accessibility topics.

What you'll see

Tips for great answers

• Mention the WCAG version you care about (2.1 vs 2.2) when asking about specific criteria.
• Include the component or context ("for a custom date picker", "in a single-page app"). The assistant uses that to tailor advice.
• Paste a short snippet (under ~200 lines) for inline review. For full files, use the Code Reviewer instead.

Accessibility score

Open the scorer. Enter any public URL and AccessAI will fetch the live page, run a deterministic DOM audit, and ask the AI to prioritize fixes against WCAG 2.1 Level AA.

How the score is calculated

1. HTTP fetch — captures status, redirects, response time, page weight, security headers.
2. Deterministic DOM audit — counts headings, landmarks, images, links, ARIA usage, contrast samples, and form labels.
3. WCAG mapping — every measurable signal is paired with a Success Criterion (e.g. images without alt → 1.1.1).
4. AI prioritization — the model is given the deterministic evidence and asked to rank fixes by user impact and effort.

Score bands

Reading the report

• Differentiator callout — one-sentence headline of what makes this page's situation unusual.
• Page snapshot — the raw HTTP and timing facts that ground the rest of the report.
• Evidence captured — objective DOM signals (heading outline, image inventory, contrast samples, ARIA roles).
• WCAG compliance grid — which Level AA criteria pass / fail with citations.
• Priority issues — top 3–5 fixes ranked by impact.
• Sources — direct links to W3C "Understanding…" documents for every cited criterion.

Alt text generator

Open the generator. Upload a JPG, PNG, GIF, or WebP (up to 5 MB) and AccessAI will inspect the file then ask a vision model to draft alt text using the W3C decision tree.

Options you can tune

What you get back

• Recommended alt text with a WCAG pattern label (decorative, informative, functional, complex).
• Pattern rationale explaining why that pattern was chosen, grounded in the file analysis.
• Alternative phrasings you can pick from.
• Long description draft when the image is complex (charts, diagrams).
• Ready-to-paste HTML snippet — including aria-describedby when needed.
• File evidence — dimensions, format, aspect, dominant palette, EXIF, decorative heuristics.

Code reviewer

Open the reviewer. Paste up to 20,000 characters of HTML, CSS, JSX, or Vue. A deterministic lint runs first, then the AI annotates each finding with WCAG citations and concrete fix snippets.

What the lint catches

• Images without alt text, links without accessible names, buttons without text content.
• Form inputs missing labels, missing type attributes, or duplicate IDs.
• Click handlers on non-interactive elements (div onclick) without keyboard support.
• Heading hierarchy jumps and missing landmarks.
• ARIA roles applied incorrectly to native elements.

Severity filter chips

After results render you'll see chips above the findings list: All · Critical · High · Moderate · Low. Click any chip to filter both the static-lint findings and the AI commentary at once. Chips show counts so you can triage quickly.

Each issue includes

• Severity badge + line number + WCAG criterion (e.g. 1.3.1, 2.4.4).
• User-impact statement (who is affected and how).
• Side-by-side ❌ current vs ✅ suggested fix code snippets.
• Step-by-step remediation instructions.

Content simplifier

Open the simplifier. Paste up to ~8,000 characters of prose and pick a target reading level. AccessAI measures readability before and after, removes jargon, and rewrites for plain language (WCAG 3.1.5).

Knobs you can turn

Metrics it reports

• Flesch Reading Ease, Flesch–Kincaid grade, Automated Readability Index — before vs after.
• Word / sentence counts and average words per sentence deltas.
• Jargon replacements table (original term → plain alternative).
• Passive voice clauses reduced.
• Remaining concerns — sentences still flagged as too complex.

Progress & background work

Three of the tools (score, code reviewer, content simplifier) and the alt-text generator run AI calls that can take 10–30 seconds. While they work, AccessAI shows a rich progress panel:

• Stage breadcrumbs — see which step the tool is on (e.g. "Parsing HTML", "Asking the AI", "Building findings").
• Animated progress bar with a moving shimmer so you always know it's alive.
• Elapsed time pill updating every second.
• Cancel button — abort the request at any time without leaving the page.
• Background-friendly — switch tabs, scroll, or open another tool; the panel stays in place and updates when results return.

WCAG cheat sheet

The four POUR principles underpin every WCAG criterion. AccessAI maps every issue it finds back to one or more of these.

Common Level AA targets

• 1.1.1 Non-text Content — every image needs alt text (or empty alt if decorative).
• 1.4.3 Contrast — 4.5:1 for normal text, 3:1 for large text and UI components.
• 2.1.1 Keyboard — all functionality available without a mouse.
• 2.4.7 Focus Visible — keyboard focus indicator must be clearly visible.
• 3.3.2 Labels or Instructions — form inputs need visible labels.
• 4.1.2 Name, Role, Value — custom widgets need correct ARIA semantics.