CoordiationCSS
⌘ K
Menu
Docs/Utilities/Accessibility

CORE UTILITY FAMILY

Accessibility

Visually hide content while keeping it available to assistive technology, then restore it under focus or another variant.

completeTarget v0.24 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Use co-sr-only for descriptive labels and focus:co-not-sr-only for skip links that should appear during keyboard navigation.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes
co-sr-onlyposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
focus:co-not-sr-onlyposition: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;
co-forced-color-adjust-noneforced-color-adjust: none;
co-scheme-light-darkcolor-scheme: light dark;

ACCESSIBLE EXAMPLE · SCREEN-READER LABEL

Give icon-only controls an accessible name

The label is visually hidden but remains in the accessibility tree. Screen readers announce “Notifications” instead of an unlabeled button.

VISIBLE ICON · ACCESSIBLE NAME: “NOTIFICATIONS”

component.coord
<button type="button">
  <svg aria-hidden="true">...</svg>
  <span class="co-sr-only">Notifications</span>
</button>

ACCESSIBLE EXAMPLE · LIVE REGION

Pair visual status with assistive feedback

Coordiation handles the visually hidden helper text; semantic ARIA tells assistive technology when the status should be announced.

SAVEDYour changes were saved successfully.
component.coord
<div role="status" aria-live="polite" class="co-flex co-items-center co-gap-2">
  <span aria-hidden="true" class="co-size-2 co-rounded-full co-bg-black"></span>
  Saved
  <span class="co-sr-only">Your changes were saved successfully.</span>
</div>

SYSTEM PREFERENCE · FORCED COLORS

Let high-contrast mode override colors by default

Use auto for ordinary interface elements. Reserve none for a small visual whose authored colors carry essential meaning, and test it in the operating system's forced-colors mode.

AUTO

Recommended default

NONE · ESSENTIAL ONLY
component.coord
<button class="co-forced-color-adjust-auto">System colors may override this</button>

<div class="co-forced-color-adjust-none" aria-label="Critical two-color status legend">
  Essential authored colors
</div>

SYSTEM PREFERENCE · COLOR SCHEME

Match native browser controls to the surface

Color-scheme declares which themes a region supports. Native inputs, scrollbars, and browser-provided UI can then use appropriate light or dark colors.

component.coord
<form class="co-scheme-light">...</form>
<form class="co-scheme-dark co-bg-black co-text-white">...</form>
<main class="co-scheme-light-dark">...</main>

FOUNDATION · SEMANTIC HTML

Use utilities to support semantics, not replace them

Native elements provide roles, names, states, and keyboard behavior. Add Coordiation utilities for presentation while keeping the semantic element intact.

REAL LINK
component.coord
<nav aria-label="Documentation">
  <a href="/docs" aria-current="page">Docs</a>
</nav>

<button type="button" aria-expanded="false" aria-controls="menu">
  Open menu
</button>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord
<div class="co-sr-only focus:co-not-sr-only co-forced-color-adjust-none co-scheme-light-dark">
  Your content
</div>

HOW IT WORKS

Core concepts

  1. 01

    Screen-reader-only content remains in the accessibility tree.

  2. 02

    Forced-color adjustment controls whether user-agent high-contrast colors override an element.

  3. 03

    Color-scheme utilities declare supported light and dark browser UI schemes.

CSS PROPERTIES

What this family controls

positionwidthheightpaddingmarginoverflowclipwhite-spaceborder-widthforced-color-adjustcolor-scheme

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord
<div class="co-sr-only md:focus:co-not-sr-only hover:co-sr-only">
  Responsive and state-aware content
</div>

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

  • Do not use sr-only to hide interactive content that must remain unreachable.
  • Use forced-color-adjust-none only when preserving authored colors is essential for meaning.
Previous← SVGNextInteractivity →