Helpers

Accessibility

ply targets WCAG 2.1 AA compliance out of the box — focus indicators, reduced motion, high contrast, screen reader utilities, and semantic color contrast.

Focus

Focus Visible

All interactive elements — buttons, links, inputs, nav items, dropdowns — show clear :focus-visible outlines for keyboard navigation. This happens automatically with no classes needed.

Tab through these elements to see focus rings:

Link

Focus styles use var(--ply-color-focus) which you can customize via CSS custom properties.

Navigation

Skip Link

Add a skip link as the first focusable element inside <body> to let keyboard users jump past navigation to main content.

<body>
  <a href="#main" class="skip-link">Skip to content</a>
  <nav class="navbar">...</nav>
  <main id="main">...</main>
</body>

The .skip-link class hides the link visually until it receives focus, then positions it prominently at the top of the viewport.

Screen Reader

Screen Reader Only

The .sr-only class hides content visually while keeping it accessible to assistive technology. Use it for labels, descriptions, and announcements that sighted users don't need.

<button class="btn btn-blue">
  <svg>...</svg>
  <span class="sr-only">Close dialog</span>
</button>

<nav aria-label="Breadcrumb">
  <span class="sr-only">You are here:</span>
  ...
</nav>

Motion

Reduced Motion

ply respects prefers-reduced-motion: reduce automatically. All transitions and animations are disabled for users who prefer reduced motion. No configuration needed.

Affected elements:

Button hover/active transitions
Link hover transitions
.spinning animation
.fade-in animation
Dropdown open/close transitions

How it works:

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

Contrast

High Contrast Mode

ply supports prefers-contrast: more with enhanced borders and stronger color distinctions for users who need higher contrast.

All default color combinations meet WCAG AA contrast requirements (4.5:1 for normal text, 3:1 for large text) in both light and dark modes.

Dark Mode

Automatic Color Scheme

ply automatically adapts to prefers-color-scheme: dark. All colors use CSS custom properties that switch between light and dark palettes. Override with data-theme="light" or data-theme="dark" on <html>.

See Colors & Theming for the full custom property reference and how to create custom themes.

Next Steps

Set up your AI agent to generate correct ply markup, or go back to installation to review setup options.