# Accessibility Page > An accessibility statement: live keyboard, contrast, motion and zoom demos, WCAG 2.2 conformance, known limitations and a feedback form. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add accessibility-page` - Docs: https://wingo-ui.com/templates/accessibility-page ## Interaction The hero rises in once beside a drawn Acme board where a focus ring travels from card to card while a caption shows what a screen reader says (still under reduced motion and in thumbnails). Download the VPAT spins while onDownload runs, then confirms and announces it; Report an issue scrolls to the form and focuses its first field. Chips under the commitment summary jump to each section. Try it yourself: Tab into the mini board, arrows move between cards (Home / End too), Space or Enter picks a card up, arrows move it between columns, Space drops and Escape cancels, with every move announced in a live region and echoed in the visible transcript (pointer users get Move left / Move right / Drop / Cancel buttons); the contrast checker switches Light / Dark / High contrast and the text color, updating the WCAG ratio, the APCA Lc score and Pass / Fail badges; the Reduce motion switch (following the system setting) replays the same transition as a spring slide or a plain fade; the Text size slider grows a card to 200% and the Text spacing switch applies WCAG 1.4.12 spacing while it reflows. The conformance table becomes cards below 768px. The feedback form validates on submit, moves focus to a GOV.UK style error summary whose links focus each field, reveals a phone field when Phone is chosen, spins while onReport runs, then shows a reference number. All controls work with the keyboard and have visible focus rings. ## Installation ```bash npx wingo-ui@latest add accessibility-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/accessibility-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/accessibility-page.tsx` - `components/templates/accessibility-page-data.ts` npm dependencies: `npm i motion lucide-react` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [Hero Section](https://wingo-ui.com/components/hero-section) ([Markdown](https://wingo-ui.com/components/hero-section.md)) - [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md)) - [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Field](https://wingo-ui.com/components/field) ([Markdown](https://wingo-ui.com/components/field.md)) - [Input](https://wingo-ui.com/components/input) ([Markdown](https://wingo-ui.com/components/input.md)) - [Kbd](https://wingo-ui.com/components/kbd) ([Markdown](https://wingo-ui.com/components/kbd.md)) - [Progress](https://wingo-ui.com/components/progress) ([Markdown](https://wingo-ui.com/components/progress.md)) - [Radio Group](https://wingo-ui.com/components/radio-group) ([Markdown](https://wingo-ui.com/components/radio-group.md)) - [Segmented Control](https://wingo-ui.com/components/segmented-control) ([Markdown](https://wingo-ui.com/components/segmented-control.md)) - [Select](https://wingo-ui.com/components/select) ([Markdown](https://wingo-ui.com/components/select.md)) - [Slider](https://wingo-ui.com/components/slider) ([Markdown](https://wingo-ui.com/components/slider.md)) - [Switch](https://wingo-ui.com/components/switch) ([Markdown](https://wingo-ui.com/components/switch.md)) - [Textarea](https://wingo-ui.com/components/textarea) ([Markdown](https://wingo-ui.com/components/textarea.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/accessibility/page.tsx "use client" import Link from "next/link" import { AccessibilityPage } from "@/components/templates/accessibility-page" export default function AccessibilityRoute() { return ( { window.location.href = "/files/acme-vpat.pdf" }} onReport={async (values) => { const response = await fetch("/api/accessibility-report", { method: "POST", body: JSON.stringify(values) }) if (!response.ok) throw new Error("Could not send the report") }} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "minimal" \| "high-contrast"` | `"classic"` | The whole page's look. classic follows the layout props; minimal: a transparent header, a centered hero without the drawn board, outlined panels, flat tiles under hairlines, no gray bands and a simple footer; high-contrast: pure black and white tokens, solid 2px outlines instead of shadows, heavier headings, full-strength secondary text and 3px focus rings. The *Props overrides still win. | | `facts?` | `AccessibilityFact[]` | `"ACCESSIBILITY_FACTS"` | { value, label } commitment summary under the hero. | | `principles?` | `AccessibilityPrinciple[]` | `"ACCESSIBILITY_PRINCIPLES"` | { id, name, summary, levelA, levelAA, supports, partial, notSupported } rows of the conformance table. | | `limitations?` | `AccessibilityLimitation[]` | `"ACCESSIBILITY_LIMITATIONS"` | { id, title, criterion, description, workaround, status, target? }; status is in-progress, planned or ongoing, target an ISO day. | | `features?` | `AccessibilityFeature[]` | `"ACCESSIBILITY_FEATURES"` | { id, icon?, title, description, chips?, shortcuts? } product features; shortcuts use mod+k notation. | | `steps?` | `AccessibilityStep[]` | `"ACCESSIBILITY_STEPS"` | { id, icon?, title, description, cadence } steps of the process. | | `quote?` | `AccessibilityQuote \| null` | `"ACCESSIBILITY_QUOTE"` | { quote, name, role } under the process; null hides it. | | `board?` | `AccessibilityBoardColumn[]` | `"ACCESSIBILITY_BOARD"` | { id, title, cards: { id, title }[] } columns of the keyboard demo. | | `contrastThemes?` | `AccessibilityContrastTheme[]` | `"ACCESSIBILITY_CONTRAST_THEMES"` | { id, label, background, samples: { id, label, color }[] } for the contrast checker; colors are hex. | | `contacts?` | `AccessibilityContact[]` | `"ACCESSIBILITY_CONTACTS"` | { id, icon?, title, value, href?, description } other ways to reach the team. | | `formats?` | `AccessibilityFormat[]` | `"ACCESSIBILITY_FORMATS"` | { id, title, description, href? } alternate formats of the statement. | | `statement?` | `AccessibilityStatement` | `"ACCESSIBILITY_STATEMENT"` | { prepared, reviewed, nextReview, standard, method, scope }; dates are ISO days. | | `featureOptions?` | `AccessibilityOption[]` | `"ACCESSIBILITY_FEATURE_OPTIONS"` | { value, label } choices of the Page or feature select. | | `assistiveTechOptions?` | `AccessibilityOption[]` | `"ACCESSIBILITY_ASSISTIVE_TECH"` | { value, label } choices of the Assistive technology select. | | `scene?` | `AccessibilityScene` | `"ACCESSIBILITY_SCENE"` | The strings of the drawn hero board: { url, board, columns, captions, zoom, zoomText, highContrast }. | | `labels?` | `Partial` | `"DEFAULT_ACCESSIBILITY_PAGE_LABELS"` | Every visible string: headings, demo copy and announcements, table headers, form fields and errors, success copy. | | `heroLayout?` | `"split" \| "centered"` | `"split"` | The hero copy beside the drawn board, or centered over it. Applies to the classic design. | | `defaultContrastTheme?` | `string` | `"light"` | The contrast checker's theme on load: an id from contrastThemes. | | `onDownload?` | `() => (void \| Promise)` | | Download the VPAT. A returned promise keeps the button loading; without it the button waits 900 ms and confirms. | | `onReport?` | `(values: AccessibilityReportValues) => (void \| Promise)` | | Called with { details, feature, assistiveTech, contactBy, email, phone } once the form is valid. A returned promise keeps the button loading; a rejection shows labels.failed. Without it the form waits 900 ms and shows a reference number. | | `showSummary?` | `boolean` | `true` | The commitment summary under the hero. | | `showJumpLinks?` | `boolean` | `true` | The row of section chips. | | `showTry?` | `boolean` | `true` | The four Try it yourself demos. | | `showConformance?` | `boolean` | `true` | The conformance section. | | `showLimitations?` | `boolean` | `true` | The known limitations inside the conformance section. | | `showFeatures?` | `boolean` | `true` | The product features grid. | | `showProcess?` | `boolean` | `true` | The process steps and the quote. | | `showReport?` | `boolean` | `true` | The feedback form. | | `showContact?` | `boolean` | `true` | Other ways to reach us, alternate formats and the statement details. | | `alternate?` | `boolean` | `true` | Gray bands on every other visible section. Applies to the classic design. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Icon tiles, progress bars, step numbers, the hero accents and the demos' switches and slider. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Get started, Download the VPAT and Send report; brand is the marketing orange. | | `radius?` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | The corners of the form fields. | | `header?` | `boolean` | `true` | The marketing header; off inside a site layout. | | `footer?` | `boolean` | `true` | The marketing footer. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `heroProps?` | `Partial` | | Overrides for the HeroSection (media, background...). | | `animateIn?` | `boolean` | `true` | The hero rises in once and the focus ring travels the drawn board; false keeps both still (thumbnails). Reduced motion always does. | | `locale?` | `string` | `"en-US"` | Intl locale for the dates, percentages and contrast ratios. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for every link on the page (next/link in an app). | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, hero, summary, jump, try, demo, conformance, limitations, features, process, report, form, success, contact, statement and footer. | ## Parts ### contrastRatio (function) contrastRatio(foreground, background): the WCAG 2 contrast ratio of two hex colors. ### apcaContrast (function) apcaContrast(foreground, background): the APCA 0.0.98G lightness contrast (Lc), negative for light text on dark. ### ACCESSIBILITY_PAGE_SAMPLE (constant) All the sample content in one object. ### ACCESSIBILITY_FACTS (constant) The four commitment facts. ### ACCESSIBILITY_PRINCIPLES (constant) Perceivable, Operable, Understandable and Robust with WCAG 2.2 A and AA counts (55 criteria). ### ACCESSIBILITY_LIMITATIONS (constant) Four known limitations with workarounds and target dates. ### ACCESSIBILITY_FEATURES (constant) Eight accessibility features of the product. ### ACCESSIBILITY_STEPS (constant) Design reviews, CI tests, manual audits and research. ### ACCESSIBILITY_QUOTE (constant) A quote from Olivia Bennett, Head of Design. ### ACCESSIBILITY_BOARD (constant) The three columns of the keyboard demo. ### ACCESSIBILITY_CONTRAST_THEMES (constant) Light, dark and high contrast palettes for the checker. ### ACCESSIBILITY_CONTACTS (constant) Email, phone with relay and postal address in New York. ### ACCESSIBILITY_FORMATS (constant) Large print, plain text and easy read. ### ACCESSIBILITY_STATEMENT (constant) Prepared, reviewed and next review dates, standard, method and scope. ### ACCESSIBILITY_FEATURE_OPTIONS (constant) The Page or feature choices. ### ACCESSIBILITY_ASSISTIVE_TECH (constant) The Assistive technology choices. ### ACCESSIBILITY_SCENE (constant) The strings of the drawn hero board. ### DEFAULT_ACCESSIBILITY_PAGE_LABELS (constant) The English strings. ### ACCESSIBILITY_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "minimal", "high-contrast"]. ### AccessibilityPageProps (type) Props of AccessibilityPage. ### AccessibilityPageDesign (type) "classic" | "minimal" | "high-contrast". ### AccessibilityPageLabels (type) The strings labels can override. ### AccessibilityReportValues (type) { details, feature, assistiveTech, contactBy, email, phone } passed to onReport. ### AccessibilityPrinciple (type) One row of the conformance table. ### AccessibilityLimitation (type) One known limitation. ### AccessibilityFeature (type) One feature card. ### AccessibilityContrastTheme (type) One theme of the contrast checker. ## Examples - **High contrast design**: design="high-contrast": pure black and white tokens, solid 2px outlines instead of shadows, heavier headings and 3px focus rings. - **Minimal design**: design="minimal": a transparent header, a centered hero without the drawn board, outlined panels, no gray bands and a simple footer. - **Brand orange, centered hero**: heroLayout centered with tone and ctaTone brand; the contrast checker opens on the dark theme. - **Statement only**: Without the demos, the features and the process: the conformance table, the form and the contact details, in en-GB. - **When the report fails**: onReport rejects: after the spinner the form keeps everything and shows the error above the button. ## See also - [Legal Page](https://wingo-ui.com/templates/legal-page) ([Markdown](https://wingo-ui.com/templates/legal-page.md)) - [Security Page](https://wingo-ui.com/templates/security-page) ([Markdown](https://wingo-ui.com/templates/security-page.md)) - [Contact Page](https://wingo-ui.com/templates/contact-page) ([Markdown](https://wingo-ui.com/templates/contact-page.md)) - [Kbd](https://wingo-ui.com/components/kbd) ([Markdown](https://wingo-ui.com/components/kbd.md)) - [Progress](https://wingo-ui.com/components/progress) ([Markdown](https://wingo-ui.com/components/progress.md)) --- Canonical: https://wingo-ui.com/templates/accessibility-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt