Accessibility

Accessibility is built into the components, not bolted on. This page documents what LombokCSS handles for you and the small things you still own.

Focus visibility

Every interactive element shows a clear :focus-visible ring drawn from --lc-ring, so keyboard users always see where they are. The ring appears for keyboard/AT focus and stays out of the way for mouse clicks. Tab through the controls below:

Link button 
<button class="btn btn-primary">Button</button>
<a href="#" class="btn btn-outline">Link button</a>
<input class="input" style="max-inline-size:220px" placeholder="Input">
<select class="select" style="max-inline-size:160px"><option>Select</option></select>

The ring uses :focus-visible (not :focus), and honours a custom color per style — override --lc-ring to match your brand.

Keyboard & native semantics

Overlay and disclosure components lean on native elements so keyboard behaviour comes for free:

  • Modal uses <dialog> — Esc closes it and focus is trapped by the browser.
  • Accordion uses <details>/<summary> — toggled with Enter/Space, no JS required.
  • Dropdown closes on Esc and toggles aria-expanded.
  • Tabs expect role="tablist"/"tab"/"tabpanel" and manage aria-selected + panel visibility.
  • Sortable tables reflect state in aria-sort on the header cells.

Reduced motion

All transitions and animations (spinners, toasts, carousels, skeletons) are wrapped in @media (prefers-reduced-motion: reduce). If a visitor asks their OS to reduce motion, LombokCSS stops animating automatically — you don't need to do anything.

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

Colour & contrast

Component colours are driven by semantic tokens, and every built-in style — including dark mode and the intrinsically dark resonant-stark — ships status colours (--lc-success, --lc-danger, …) with matching readable text and soft backgrounds, so alerts, badges and soft buttons meet WCAG AA contrast in both light and dark. When you author a custom style, keep the same discipline: dark styles must override the status *-soft and *-text tokens.

Transparency fallback

The glassmorphism style uses backdrop-filter guarded by @supports: browsers without it get an opaque, fully legible surface instead of an unreadable blur.

RTL & internationalisation

Layout is written with logical properties (margin-inline, inset-inline-start, border-start-start-radius), so setting dir="rtl" mirrors everything correctly — including component internals like dropdown alignment and the drawer slide direction. No separate RTL stylesheet needed.

Classless & semantic HTML

Plain, well-structured HTML is styled out of the box, which nudges you toward semantic markup (real <button>, <nav>, <table>, headings) — the foundation of an accessible page.

What you still own

LombokCSS handles presentation; you provide meaning:

  • Give every form control a <label> (or aria-label), and link help/error text with aria-describedby.
  • Add alt text to images and accessible names to icon-only buttons (aria-label).
  • Set aria-current on the active nav/pagination item, and provide aria-live for toasts if you need announcements.
  • Preserve a logical heading order and don't rely on colour alone to convey status — pair it with text or an icon.
  • Test with a keyboard and a screen reader; the components give you the hooks, your content gives them meaning.