Accessibility Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// app/(marketing)/accessibility/page.tsx
"use client"

import Link from "next/link"
import { AccessibilityPage } from "@/components/templates/accessibility-page"

export default function AccessibilityRoute() {
  return (
    <AccessibilityPage
      linkComponent={Link}
      onDownload={() => {
        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

• designdefault "classic"
  "classic" | "minimal" | "high-contrast"

  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.

• factsdefault "ACCESSIBILITY_FACTS"
  AccessibilityFact[]

  { value, label } commitment summary under the hero.

• principlesdefault "ACCESSIBILITY_PRINCIPLES"
  AccessibilityPrinciple[]

  { id, name, summary, levelA, levelAA, supports, partial, notSupported } rows of the conformance table.

• limitationsdefault "ACCESSIBILITY_LIMITATIONS"
  AccessibilityLimitation[]

  { id, title, criterion, description, workaround, status, target? }; status is in-progress, planned or ongoing, target an ISO day.

• featuresdefault "ACCESSIBILITY_FEATURES"
  AccessibilityFeature[]

  { id, icon?, title, description, chips?, shortcuts? } product features; shortcuts use mod+k notation.

• stepsdefault "ACCESSIBILITY_STEPS"
  AccessibilityStep[]

  { id, icon?, title, description, cadence } steps of the process.

• quotedefault "ACCESSIBILITY_QUOTE"
  AccessibilityQuote | null

  { quote, name, role } under the process; null hides it.

• boarddefault "ACCESSIBILITY_BOARD"
  AccessibilityBoardColumn[]

  { id, title, cards: { id, title }[] } columns of the keyboard demo.

• contrastThemesdefault "ACCESSIBILITY_CONTRAST_THEMES"
  AccessibilityContrastTheme[]

  { id, label, background, samples: { id, label, color }[] } for the contrast checker; colors are hex.

• contactsdefault "ACCESSIBILITY_CONTACTS"
  AccessibilityContact[]

  { id, icon?, title, value, href?, description } other ways to reach the team.

• formatsdefault "ACCESSIBILITY_FORMATS"
  AccessibilityFormat[]

  { id, title, description, href? } alternate formats of the statement.

• statementdefault "ACCESSIBILITY_STATEMENT"
  AccessibilityStatement

  { prepared, reviewed, nextReview, standard, method, scope }; dates are ISO days.

• featureOptionsdefault "ACCESSIBILITY_FEATURE_OPTIONS"
  AccessibilityOption[]

  { value, label } choices of the Page or feature select.

• assistiveTechOptionsdefault "ACCESSIBILITY_ASSISTIVE_TECH"
  AccessibilityOption[]

  { value, label } choices of the Assistive technology select.

• scenedefault "ACCESSIBILITY_SCENE"
  AccessibilityScene

  The strings of the drawn hero board: { url, board, columns, captions, zoom, zoomText, highContrast }.

• labelsdefault "DEFAULT_ACCESSIBILITY_PAGE_LABELS"
  Partial<AccessibilityPageLabels>

  Every visible string: headings, demo copy and announcements, table headers, form fields and errors, success copy.

• heroLayoutdefault "split"
  "split" | "centered"

  The hero copy beside the drawn board, or centered over it. Applies to the classic design.

• defaultContrastThemedefault "light"
  string

  The contrast checker's theme on load: an id from contrastThemes.

• onDownload
  () => (void | Promise<unknown>)

  Download the VPAT. A returned promise keeps the button loading; without it the button waits 900 ms and confirms.

• onReport
  (values: AccessibilityReportValues) => (void | Promise<unknown>)

  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.

• showSummarydefault true
  boolean

  The commitment summary under the hero.

• showJumpLinksdefault true
  boolean

  The row of section chips.

• showTrydefault true
  boolean

  The four Try it yourself demos.

• showConformancedefault true
  boolean

  The conformance section.

• showLimitationsdefault true
  boolean

  The known limitations inside the conformance section.

• showFeaturesdefault true
  boolean

  The product features grid.

• showProcessdefault true
  boolean

  The process steps and the quote.

• showReportdefault true
  boolean

  The feedback form.

• showContactdefault true
  boolean

  Other ways to reach us, alternate formats and the statement details.

• alternatedefault true
  boolean

  Gray bands on every other visible section. Applies to the classic design.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Icon tiles, progress bars, step numbers, the hero accents and the demos' switches and slider.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Get started, Download the VPAT and Send report; brand is the marketing orange.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The corners of the form fields.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• heroProps
  Partial<HeroSectionProps>

  Overrides for the HeroSection (media, background...).

• animateIndefault true
  boolean

  The hero rises in once and the focus ring travels the drawn board; false keeps both still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the dates, percentages and contrast ratios.

• linkComponentdefault "<a>"
  (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<Record<AccessibilityPageSlot, string>>

  Classes for header, hero, summary, jump, try, demo, conformance, limitations, features, process, report, form, success, contact, statement and footer.

Parts