Accessibility

WCAG 2.1 AA. No exceptions.

CBC digital properties — public-facing sites, internal tools, partner surfaces, and subsidiary products — target WCAG 2.1 Level AA across the board. AA is the floor, not the ceiling.

The standard

WCAG 2.1 Level AA applies to every digital surface carrying the CBC brand. The four principles are non-negotiable: perceivable, operable, understandable, and robust. When a design decision conflicts with them, the design moves — not the standard.

Contrast

Normal text requires a 4.5:1 contrast ratio against its background. Large text (≥18px at any weight, or ≥14pt bold), UI components, and focus indicators require 3:1.

CBC Blue (#0D9ADD) is 3.1:1 on white — it clears the large-text gate but fails normal text. It is display-only: headings ≥24px, decorative fills, and accent lines only. Interactive and small text uses Action Blue (#0A6E9E, 5.6:1), which passes AA at any size.

Verify any pairing with the contrast checker on the Colour page.

Text & zoom

All text is sized in rem so browser-level zoom and system font-size preferences adjust every element proportionally without breaking layouts. WCAG 1.4.4 requires text to be resizable to 200% without loss of content or function.

▲ Do
  • Size all text in rem — or em where relative sizing is intentional
  • Test at 200% browser zoom and 200% OS font-size setting
  • Let containers expand to accommodate enlarged text
▼ Don’t
  • Set font-size on the html element in px — this overrides user preferences
  • Use user-scalable=no in the viewport meta tag — prohibited by WCAG 1.4.4
  • Clip or overflow: hidden the document-level scroll when text enlarges

See the type scale for CBC rem-based sizes.

Respect the platform

CBC surfaces respond to user and OS preferences rather than override them. For each preference below, the surface detects and honours the setting — it does not ask the user to re-declare it in a separate UI control.

prefers-reduced-motion: reduce

The user or OS has indicated motion may cause discomfort — vestibular conditions, nausea, or simple preference.

CBC response

Parallax, auto-play video, entrance animations, and scroll-behaviour: smooth are suppressed. Transitions drop to instant or sub-100ms.

prefers-contrast: more

The user or OS has requested contrast above the default — low vision or glare sensitivity.

CBC response

Borders and separators gain visible weight. Ghost buttons and outline elements adopt filled states. No semantic meaning is conveyed by shadow or opacity alone.

prefers-color-scheme: dark

The user's system is in dark mode.

CBC response

Detected before paint via an inline script in <head>. Dark colour tokens are applied without a flash of light content. Users may also override per-session with the theme toggle.

forced-colors: active

Windows High Contrast Mode or an equivalent system accessibility mode is active.

CBC response

Semantic colour carries meaning through DOM structure, ARIA state, and text — never through CSS colour values alone. Decorative colour is overridden gracefully.

Keyboard & focus

Every interactive element on a CBC surface is reachable and operable without a mouse.

  • Tab order

    All interactive elements are reachable via Tab in logical document order — matching the visual reading sequence.

  • Visible focus

    A 2px Action Blue outline (5.6:1 on white) with 3px offset appears on every interactive element on :focus-visible. It is never suppressed.

  • Focus traps

    Modals and drawers trap focus while open. Tab cycles within them; Escape dismisses the overlay and returns focus to the trigger.

  • Skip link

    A skip-to-main-content link is the first focusable element on every page. It becomes visible on first Tab press, allowing keyboard users to bypass repeated navigation chrome.

  • Tabindex discipline

    No positive tabindex values. tabindex="0" is used only on elements that are genuinely interactive. Non-interactive elements are not in the tab sequence.

Structure & semantics

  • Landmarks

    <header>, <nav>, <main>, and <footer> appear on every page. Where multiple instances of the same landmark type are present, each carries a distinct aria-label.

  • Heading hierarchy

    One <h1> per page. Levels do not skip — h2 follows h1, h3 follows h2. Visual heading styles match the semantic level.

  • Forms

    Every input, select, and textarea has an associated <label> (explicit for/id pair or wrapping element). Related controls are grouped with <fieldset> and <legend>.

  • Images

    Decorative images carry alt="" and aria-hidden="true". Informative images carry a meaningful alt string — the description, not the file name.

  • Icons

    Inline SVG icons that convey meaning use <title> or aria-label. Purely decorative icons use aria-hidden="true".

Don’t build these — anti-patterns

The three patterns below are common across the web and consistently make things worse. All three exist to paper over problems that should be fixed in the underlying code. None of them work reliably with assistive technology; all of them introduce new failure modes.

▲ Do — honour the platform

The operating system already solves these three problems — correctly, across every application, without Javascript:

  • Motion — respond to prefers-reduced-motion. Suppress auto-play, parallax, and entrance animations when set to reduce.
  • Font size — size all text in rem. Browser zoom and OS font-size preferences then work correctly on their own.
  • Contrast — respond to prefers-contrast: more. Increase border weight and fill ghost elements. The OS preference applies everywhere, not just here.
▼ Don’t build these

Where to ask

Accessibility audit requests, remediation priorities, and AT testing plans go to the Marketing Team. For contrast verification, use the contrast checker. When in doubt, ask before you ship.