Accessibility

Keyboard and focus in this reference #

• The first Tab reaches Skip to content. Enter moves focus to the main reading area. Navigation links and section headings follow normal document order; focused controls show a visible cobalt outline.
• Open Search documentation with its button or Cmd/Ctrl K. Focus starts in the search field. Tab or the up/down arrows browse results; Enter opens one. Escape closes the dialog and returns focus to the invoking control.
• The example picker is a native select. Preview and Code are tabs: left/right arrows switch between them, Home selects Preview, and End selects Code. The selected panel is focusable so keyboard users can reach its scrollable content.
• Copy example announces success or failure in a polite status message. If clipboard access fails, open Code and select its complete text manually. Foundation token controls likewise announce the copied name or value.
• At narrow widths, Browse documentation and On this page use native details/summary disclosures; Enter or Space expands them. Fixed previews offer a labeled focusable scroll region in Actual size.

These are behaviors supplied by this site’s documentation controls. The library’s marketing and video components do not inherit that interaction model. See Using this reference for the browsing and copying workflow.

Meaningful labels and decorative semantics #

Use semantic headings, links, lists, and tables for the job they perform. Name links by their destination or action. A shape that resembles a button is not a working control: MarketingHero’s CTA and SocialCarouselSlide’s CTA are static presentations. A Capsule is a div-based label; a SpeechBubble is not a dialog or tooltip; RichTextOverlay supplies styled spans, not heading or emphasis semantics.

The four motifs are already hidden from assistive technology. Hide decorative dots and duplicate graphics, but never hide the only text explanation or focusable controls. For meaningful imagery, provide an appropriate text alternative in the surrounding composition; a decorative TechnicalCollage cannot serve that purpose.

A component’s appearance or successful render is not an accessibility guarantee. Inspect the actual DOM and use its supported props. Several video primitives do not forward arbitrary HTML or ARIA props, so consumer-owned semantic wrappers may be necessary.

Explain charts and expose a named progress value #

Write a visible takeaway, unit, period, population, and source. Supply every value in text or a table when the graphic cannot convey it independently. Direct category names and written statuses keep meaning available without color; “the green line went up” is not an adequate explanation.

MiniChart only provides generic SVG names such as “Trend chart”; it does not expose the supplied values as a complete data alternative. The example hides that duplicate visual and lists every week’s value. The video charts have their own labels and legends, but a chart name alone is not a complete explanation of the data. Review LineChart, BarChart, and DonutChart before adapting their wrappers.

ProgressMeter exposes a role and numeric value but cannot accept an accessible name. A named outer group does not name its inner progressbar. The example hides the library visual from assistive technology and exposes one separate named progressbar with the same value. Keep the visible label, aria-valuenow, aria-valuetext, and library fraction synchronized. This static snapshot is not a live region; announce meaningful asynchronous updates separately when needed, not every animation frame.

Copy an explained chart and named meter #

'use client';

import { MiniChart, ProgressMeter, coreuxPalette } from '@coreux/ui';

const completion = [40, 48, 60, 72];
const total = 100;
const completed = completion[completion.length - 1];

export default function AccessibleData() {
  return (
    <figure style={{ margin: 0, padding: 20, background: coreuxPalette.warmIvory, color: coreuxPalette.inkNavy }}>
      <figcaption style={{ fontSize: 18, fontWeight: 600, lineHeight: 1.5 }}>Illustrative setup completion, weeks 1–4</figcaption>
      <p style={{ fontSize: 16, lineHeight: 1.6, margin: '12px 0 20px' }}>Completion rose from 40% to 72% among the same 100 fictional teams. That is a gain of 32 percentage points. These values are invented for this demonstration.</p>
      {/* The visible values below are the complete alternative to the chart. */}
      <div aria-hidden="true"><MiniChart type="trend" series={[{ color: coreuxPalette.coreCobalt, points: completion }]} width={180} height={100} /></div>
      <ol style={{ margin: '20px 0', paddingLeft: 24, fontSize: 16, lineHeight: 1.8 }}>
        {completion.map((count, index) => <li key={index}>Week {index + 1}: {count} of {total} teams ({count}%)</li>)}
      </ol>
      <p style={{ fontSize: 16, lineHeight: 1.6, margin: '0 0 12px' }}>Week 4 snapshot: {completed} of {total} teams completed setup.</p>
      {/* The library meter cannot receive an accessible name. Expose one named
          outer progressbar and hide only the duplicated library visual. */}
      <div role="progressbar" aria-label="Week 4 setup completion" aria-valuemin={0} aria-valuemax={100} aria-valuenow={completed / total * 100} aria-valuetext={`${completed} of ${total} teams completed setup`}>
        <div aria-hidden="true"><ProgressMeter value={completed / total} tone="neutral" /></div>
      </div>
    </figure>
  );
}

Check contrast and readable layout #

Check text against its actual surface, including custom background props and dark fields. Target at least 4.5:1 for ordinary text and 3:1 for large text; graphical objects needed to understand the content also need sufficient contrast. Palette membership does not establish compliance for every pairing. The color guide and individual component references document tested roles and limitations.

Known limits include low-contrast combinations in ProgressMeter’s fill/track pairs and some dark PanelCard appearances. GroupFrame’s accent heading on light is ivory on ivory; use a documented readable combination instead. RichTextOverlay’s final-line underline can be clipped. Do not rely on a color, thin stroke, or underline alone to communicate a state. Choose a verified presentation or another component when the graphic is essential.

Keep DOM reading order aligned with the visual order. Check text at narrow widths and browser zoom, preserve focus visibility, and keep scrollable content keyboard reachable. Scaling a fixed composition can make labels too small; the viewer’s Fit setting is a preview tool, not a responsive accessibility solution.

Keep static examples settled; respect reduced motion #

This site’s examples render the settled state. Video progress props default to 1 and do not create timers, autoplay, or a reduced-motion policy. The site enables smooth anchor scrolling only when prefers-reduced-motion is no-preference; reduced motion keeps ordinary immediate scrolling.

For future animated demonstrations, the consumer must read prefers-reduced-motion, show the final meaningful state when reduction is requested, and provide appropriate pause or stop controls for ongoing motion. Do not animate essential reading text or make an explanation depend on timing. Keep semantic values tied to the real data rather than an intermediate reveal fraction.

Representative automated checks and keyboard tests catch some regressions; they do not certify every consumer composition. Review the actual content with keyboard navigation, zoom, and assistive technology before publication.

Values generated from @coreux/ui at 06f42fd: public foundation tokens, marketing stylesheet, bundled font definitions, and marketing conventions. Source links require repository access. Install the package and styles once.