Accessibility

Color Contrast

All text in the Canon system meets WCAG AA contrast requirements. The minimum ratio is 4.5:1 for normal text and 3:1 for large text.

Focus Management

All interactive elements must have visible focus indicators. Canon uses a consistent focus ring system.

/* Standard focus pattern */
.interactive:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* High contrast mode enhancement */
@media (prefers-contrast: more) {
  .interactive:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
}

Focus Order

• Focus order must follow visual reading order
• Never use tabindex greater than 0
• Modal dialogs must trap focus within the modal
• Skip links should be provided for complex layouts

Semantic HTML

Use the correct HTML elements for their intended purpose. Semantic markup provides meaning to assistive technologies.

Landmark Regions

• <header> or role="banner" for page header
• <nav> or role="navigation" for navigation
• <main> or role="main" for main content
• <footer> or role="contentinfo" for page footer

ARIA Patterns

Use ARIA attributes to enhance accessibility, but remember: no ARIA is better than bad ARIA.

Live Regions

Use live regions to announce dynamic content changes to screen readers.

<!-- For important updates -->
<div role="status" aria-live="polite">
  {statusMessage}
</div>

<!-- For urgent alerts -->
<div role="alert" aria-live="assertive">
  {errorMessage}
</div>

Common ARIA Patterns

Reduced Motion

Respect users who prefer reduced motion. All animations in Canon include reduced motion alternatives.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

High Contrast Mode

Canon supports prefers-contrast: more with enhanced visibility tokens.

Checklist

Use this checklist when building with Canon components.