PayslipIQ Accessibility Statement

Non-text Content

Decorative imagery is rendered via CSS gradients or marked aria-hidden; meaningful imagery (e.g. PayslipIQ logo, hero illustrations) carries an alt attribute set in src/components/OptimisedImage.tsx and src/components/Hero.tsx. The dynamically generated /api/og social card is consumed only by crawlers and uses a descriptive alt at injection sites in src/app/layout.tsx.

• OG image alt text is auto-derived from the route title rather than authored per page; manual alt text per route is scheduled for 2026-Q4.

Remediation target: 2026-12.

Audio-only and Video-only (Prerecorded)

PayslipIQ hosts no prerecorded audio-only or video-only media. All explanatory content is HTML text or static imagery.

Captions (Prerecorded)

No prerecorded synchronised media is published on the site.

Audio Description or Media Alternative (Prerecorded)

No prerecorded video content exists.

Captions (Live)

PayslipIQ does not broadcast live audio or video.

Audio Description (Prerecorded)

No prerecorded video content exists.

Info and Relationships

Pages use semantic HTML5 landmarks (header, nav, main, footer, article, section). Forms in src/components/PayslipForm.tsx and src/components/IePayslipForm.tsx pair every input with a programmatic <label htmlFor>; error messages are linked through aria-describedby and surface aria-invalid when validation fails.

Meaningful Sequence

Reading order matches DOM order across the site; CSS layout is built with flow-friendly Tailwind utilities and no absolute-positioned content out of source order. Verified manually against Firefox Reader View on the calculators and tools surfaces.

Sensory Characteristics

Form errors and CTAs are conveyed through text plus colour plus icon, never through colour or position alone. Reviewed in src/components/PayslipForm.tsx (error rows render <p role="alert">) and src/components/AnomalyAlert.tsx.

Orientation

No CSS or JavaScript locks the viewport to a single orientation. The responsive grid in src/styles/globals.css works in both portrait and landscape down to 320px viewport width.

Identify Input Purpose

Inputs that map to WCAG 2.1 autocomplete tokens (e.g. email on the contact form) carry the appropriate autocomplete attribute. Bespoke payroll fields (gross_period, tax_code) have no standard token and rely on labelling alone.

• Audit all form inputs for autocomplete coverage where a standard token applies; in-progress for 2026-Q3.

Remediation target: 2026-09.

Use of Colour

Status, error and warning states always include a text label or icon; colour is only used as a redundant cue. The DeductionRow and AnomalyAlert components combine colour with leading symbols and copy.

Audio Control

No audio plays automatically on any page.

Contrast (Minimum)

Body and UI text meets 4.5:1 against background and large text meets 3:1. Wave 17 Domain A bumped low-contrast secondary copy from text-gray-300 to text-gray-700 across affected components, and the brand button hover token in src/styles/globals.css was darkened to #065F46 for 4.5:1 against white.

Resize Text

Typography uses rem and clamp() units (see .stat-number rule in src/styles/globals.css). Content reflows without loss of function up to 200% browser zoom; verified in Chrome 132 and Firefox 132.

Images of Text

No images of text are used for body content. Logotype is the only exception permitted under SC 1.4.5 and is delivered as SVG with an accessible name.

Reflow

The Tailwind responsive grid reflows down to 320px without horizontal scrolling on the home, calculators and check surfaces. A handful of programmatic city/role pages embed wide comparison tables that scroll horizontally - permitted by the data-table exception, but flagged for re-layout.

• Wide comparison tables on /tax-codes/compare horizontally scroll below 480px.

Remediation target: 2026-09.

Non-text Contrast

Form input borders, focus rings (2px solid focus-visible style in src/styles/globals.css) and interactive icons meet the 3:1 ratio against their adjacent colours after Wave 17 Domain D adjusted the form-input border token.

Text Spacing

No inline style or utility class hard-codes line-height, letter-spacing or word-spacing in a way that prevents user override; all typography is set via Tailwind classes that respect cascade overrides.

Content on Hover or Focus

Tooltip-style popovers (e.g. on the TaxCodeBadge component) are triggered by hover or focus, are dismissible by Escape via the focus-trap utility in src/lib/use-focus-trap.ts, and remain visible while the pointer is over them.

Keyboard

Every interactive control is a native button, link, input, select or textarea. Custom controls (e.g. the cookie banner) are reachable and operable via Tab, Shift+Tab, Enter and Space.

No Keyboard Trap

Focus-trapped surfaces (mobile menu, exit-intent modal) implement an Escape escape-hatch via the dispatched close event in src/lib/use-focus-trap.ts; non-modal regions never confine Tab focus.

Character Key Shortcuts

PayslipIQ implements no single-character keyboard shortcuts. All keyboard interactions use modifier keys or the standard tab/enter/escape vocabulary.

Timing Adjustable

There are no time limits on form submission, session timeout or content interaction.

Pause, Stop, Hide

No content auto-updates, blinks or scrolls. Decorative motion (the .animate-fade-in family in src/styles/globals.css) is short, runs once, and is fully suppressed under prefers-reduced-motion.

Three Flashes or Below Threshold

No animation flashes more than three times per second. Motion is limited to one-shot fade and translate transitions.

Bypass Blocks

The site-wide "Skip to main content" link in src/app/layout.tsx targets <main id="main-content" tabIndex={-1}>; the link uses the .skip-to-content visibility pattern in src/styles/globals.css.

Page Titled

Every route exports a per-page Metadata title via Next.js metadata, falling back to the global template "%s | PayslipIQ" defined in src/app/layout.tsx.

Focus Order

DOM order drives focus order. Wave 17 Domain D added src/components/RouteFocusReset.tsx to programmatically focus <main> on Next.js client navigations, restoring the focus-order baseline that SPA routing otherwise breaks.

Link Purpose (In Context)

Link text describes its destination in context. Repeated anchors (e.g. "Read more") carry an aria-label or visually hidden suffix where the surrounding text is insufficient.

Multiple Ways

Pages are reachable through the primary nav, footer link clusters, the /sitemap-html index, the search-action JSON-LD configured in src/app/layout.tsx, and breadcrumb trails on category and detail pages.

Headings and Labels

Each page has a single h1 followed by a logical h2/h3 cascade; form labels describe their purpose without relying on placeholder text.

Focus Visible

Every interactive token (.btn-primary, .btn-secondary, .btn-outline) and the global :focus-visible rule in src/styles/globals.css render a 2px ring with offset; no rule sets outline:none without an alternative indicator.

Focus Not Obscured (Minimum)

Wave 17 Domain D added the html { scroll-padding-top:80px; scroll-padding-bottom:96px } and :focus-visible { scroll-margin } rules in src/styles/globals.css so that focused inputs are never hidden under the sticky Header, MobileBottomNav or StickyMobileCTA.

Pointer Gestures

No multipoint or path-based gestures are required. Sliders use single-pointer drag with native keyboard equivalents.

Pointer Cancellation

All actions trigger on pointerup/click rather than pointerdown, so users can drag away to abort. No down-event handlers commit destructive actions.

Label in Name

Where an aria-label is set, it begins with or matches the visible label text (e.g. submit buttons read "Check my payslip" both visually and to assistive technology).

Motion Actuation

No feature is operated by device motion, tilt or shake.

Dragging Movements

The only draggable surface is the native HTML range input on the take-home and pension calculators. Range inputs accept arrow-key operation as a single-pointer alternative to the drag gesture.

Target Size (Minimum)

Primary CTAs and form inputs are sized at or above the 24x24 CSS pixel minimum. The MobileBottomNav and bottom CTAs use 44x44 targets. Some inline icon-only links (e.g. footer social icons) are below 24x24 and rely on the spacing exception; an audit is in flight.

• Footer social icon hit areas to be padded to 24x24 minimum.

Remediation target: 2026-09.

Language of Page

src/app/layout.tsx sets <html lang="en-GB"> for UK routes and <html lang="en-IE"> for Ireland routes via the request pathname.

Language of Parts

Inline foreign-language phrases (e.g. Irish-language statutory terms on /ie pages) carry a lang attribute when used; the rest of the document is en-GB or en-IE as set on the root html element.

On Focus

No element triggers a context change on focus. Form fields validate on blur or submit, never on focus.

On Input

No input element auto-submits or navigates. Submission is gated on an explicit button.

Consistent Navigation

The Header, Footer and MobileBottomNav components are mounted by src/app/layout.tsx for every route, preserving identical link order across the site.

Consistent Identification

Repeated UI primitives (buttons, badges, callouts) share a single Tailwind component class and identical accessible name across every surface.

Consistent Help

The Footer in src/components/Footer.tsx surfaces the /contact link in the same position on every page, satisfying the consistent-help requirement of WCAG 2.2.

Error Identification

Validation errors are identified in text, linked to the offending input via aria-describedby, and surfaced through role="alert" wrappers in the form components.

Labels or Instructions

Every input carries a programmatic <label htmlFor>, and complex fields (e.g. tax code) include helper text describing the expected format.

Error Suggestion

Zod-driven validators in PayslipForm.tsx and IePayslipForm.tsx produce specific error copy ("must be a positive number", "tax code must match HMRC format") rather than a generic "invalid".

Error Prevention (Legal, Financial, Data)

PayslipIQ submits no legal, financial or data-modifying transactions on the user's behalf. All flows are read-only analyses; no irreversible action is taken without explicit confirmation, and no user data is persisted server-side.

Redundant Entry

No multi-step flow asks the user to retype information already provided in the same session. The /check single-page form collects all inputs in one pass.

Accessible Authentication (Minimum)

PayslipIQ does not require user authentication. There are no passwords, MFA challenges or cognitive function tests on any public route.

Name, Role, Value

Custom components delegate to native HTML elements (button, input, a) so role and value come for free. ARIA is added only where semantic HTML is insufficient (aria-live regions, aria-describedby on errors, aria-current on the active nav link).

Status Messages

Loading and result containers in src/components/PayslipForm.tsx and the IE counterpart wrap output in role="status" + aria-live="polite" + aria-busy, so progress and result transitions are announced to screen readers without stealing focus.