Accessibility

Target standard

WCAG 2.2 Level AA for all components, patterns, and page templates. Level AAA where practical — notably enhanced contrast on financial data and a 48px touch target that exceeds even the AAA requirement.

WCAG 2.2 is backward-compatible with 2.1, so meeting 2.2 AA means meeting 2.1 AA. The criteria added in 2.2 that matter most here:

Redundant Entry and Accessible Authentication carry real weight in a transfer product. A user must never be asked to re-type an account number they entered two steps ago, and an OTP field that blocks paste forces people to memorize a six-digit code under time pressure.

Color and contrast

• Never use color alone to convey meaning — always pair with text, icons, or patterns
• Status badges use color + dot indicator + text label
• Error states use red border + error icon + descriptive text

The large-text trap

"Large text" means ≥18.66px bold or ≥24px at any weight. An 18px semibold heading is not large text. Senco's H4 sits exactly there, which is why H2 and H3 are specified at weight 700 and H4 is held to the full 4.5:1. See Typography.

Contrast verification

All token pairings are verified in both light and dark mode. Full tables in Color and Themes.

Two results are not clean, and both are recorded rather than rounded off:

The dark-mode primary button label, previously an open defect at 3.23:1, is resolved by a Platform-layer remap of --ds-on-accent — see Themes.

Keyboard navigation

All interactive components must be fully operable with keyboard only.

One Tab stop per composite

A radio group, a tab list, a stepper, and a menubar are each one Tab stop. Tab moves between components; arrow keys move within them. A ten-option currency radio group that consumes ten Tab presses is technically operable and practically unusable.

Focus management

• Focus has two forms. Bordered controls (inputs, selects) turn their border --ds-focus and add a 3px halo at 20% opacity with no offset. Borderless controls (buttons, links, tabs, rows) take a 3px solid --ds-focus outline with a 2px offset. The rule for choosing is in Tokens
• The indicator that must meet 3:1 is the focused border or the outline, both 5.00:1 on white. The halo is decoration and is not counted
• Use :focus-visible, not :focus — a mouse click should not leave a ring behind, a Tab press must
• Focus order follows visual reading order (left-to-right, top-to-bottom)
• Never remove a :focus-visible outline without providing an alternative
• Dialogs trap focus and return it to the trigger on close
• After a route change, focus moves to the new page's <h1> — not to <body>, which strands screen reader users at the top of the chrome
• The focused element must never be obscured by the sticky action bar (SC 2.4.11)

The ring is built with color-mix() against --ds-focus, so it re-derives correctly when the theme remaps the focus color. A hard-coded rgba ring would have needed a second dark-mode token and would have drifted.

Destructive and irreversible actions

A transfer confirmation cannot be triggered by Enter from anywhere on the page. The primary action requires focus on the button itself. This is deliberate friction on the one action in the product that cannot be undone.

Semantic HTML

• Use native HTML elements whenever possible (<button>, <input>, <nav>, <main>)
• Avoid <div> and <span> for interactive elements
• Use heading hierarchy sequentially (h1 → h2 → h3, no skipping)
• Use landmark elements: <header>, <nav>, <main>, <footer>, <aside>
• Lists use <ul>/<ol>, not styled divs
• One <h1> per page, and it names the page — not the product

A native <button> brings keyboard activation, focus management, disabled semantics, form participation, and the correct screen reader role for free. Every one of those has to be rebuilt by hand on a <div role="button">, and in practice at least one is always missed.

ARIA patterns

Use ARIA only when native HTML semantics are insufficient.

Politeness levels

Assertive interrupts whatever the screen reader is currently saying. Using it for a rate refresh means cutting a user off mid-sentence every thirty seconds. In Senco only failures and security events are assertive.

aria-disabled, not disabled

A disabled button is removed from the tab order, so a keyboard user tabbing to the bottom of a form finds nothing there and no explanation of why. Senco uses aria-disabled="true" with the click handler suppressed, so the control stays focusable and its aria-describedby can say what is missing.

The first rule

No ARIA is better than bad ARIA. An incorrect role overrides correct native semantics and produces an element that announces as something it is not. Every ARIA attribute in a component should be justifiable in one sentence.

Screen reader testing

Test all components with at least two screen readers:

TalkBack on Chrome is the highest-priority combination, not the last one. It matches the device profile of most of Senco's users.

What to verify

• All interactive elements have accessible names
• Form errors are announced when they appear
• Page title updates on navigation
• Dynamic content changes are announced via aria-live
• Images have meaningful alt text (or aria-hidden if decorative)
• Amounts announce sensibly — "250 dollars", not "2 5 0 U S D"
• Status changes on a pending transfer are announced without the user re-navigating

Automated coverage is a floor

Automated tooling catches roughly a third of WCAG issues, and none of the ones that matter most here: whether the focus order makes sense, whether an error message explains how to fix the problem, whether a status announcement arrives at a useful moment. Automated checks gate the pull request; manual testing gates the release.

Skip to content

A skip link is a hidden anchor that becomes visible on keyboard focus. It lets users bypass repetitive navigation and jump straight to the main content area.

• The skip link must be the first focusable element on the page
• It is visually hidden by default and appears on :focus
• The target must be a landmark with an id (e.g., #ds-main-content)
• Skip links are required on every page with persistent navigation
• The target must be focusable (tabindex="-1"), or focus lands on the anchor and the next Tab returns to the navigation

Motion and animation

• Respect prefers-reduced-motion
• Disable non-essential animations when reduced motion is preferred
• Spinners stop rotating and stay visible; their text label carries the loading state
• Nothing flashes more than three times per second (SC 2.3.1)
• Motion is never the only carrier of a state change

Handled globally at the Platform layer — see Motion.

Touch targets

• Minimum touch target size: 48×48 CSS pixels (exceeds WCAG 2.5.5 AAA and 2.5.8 AA)
• Minimum spacing between targets: 8px
• The visual element can be smaller — the tappable hit area must be 48×48px

Checklist

Use this checklist for every new component or pattern. Nothing ships with an unchecked box or an unrecorded exception.

• Color contrast passes 4.5:1 for text, 3:1 for UI — in both themes
• Keyboard operable (Tab, Enter, Escape, arrow keys) with one Tab stop per composite
• Focus indicator visible, 3px at 20%, meets contrast, uses :focus-visible
• Focused element is never obscured by sticky chrome
• Screen reader announces name, role, and state
• Error states use text + icon, not color alone
• Error messages say how to fix the problem, not just that one exists
• Touch targets are 48×48px minimum with 8px spacing
• prefers-reduced-motion is respected and no state is motion-only
• Semantic HTML used (no div buttons)
• ARIA attributes correct and minimal; aria-disabled over disabled
• Tested with VoiceOver and NVDA; TalkBack for anything on the transfer path
• Text reflows at 320px and 200% zoom without horizontal scroll
• Works at 200% browser text size without clipping

Responsibilities

Accessibility failures routed back by QA are classified by source rather than filed generically — a contrast failure goes to design with the criterion named, a missing live region goes to engineering.

Known gaps