# Barefoot — Accessibility Barefoot's stance: **accessibility is inherited from the platform, not added as an afterthought.** We style native elements, which ship semantics, focus management, and keyboard behavior for free. We never make you "add ARIA to the divs" — there are no divs. ## What we guarantee - **Keyboard operable, all components.** The full keyboard matrix is in `demo/index.html`. Everything is reachable with `Tab`, `Enter`, `Space`, `Esc`, and arrow keys where native. - **Visible focus everywhere.** `:focus-visible` ring on all interactive elements, with sufficient contrast against every surface. - **AA contrast by default.** The default ink-on-paper palette passes WCAG 2.1 AA. The `contrast` theme goes further. - **Reduced motion respected.** `prefers-reduced-motion` collapses all transitions and animations globally. - **Semantic landmarks.** Sections use real headings; components use `button`, `details/summary`, `dialog`, `th/caption`, `progress`. - **Focus trap + Esc**, **light dismiss**: inherited from `` and the Popover API. - **Skip link.** The `.bf-skip-link` utility (first element in ``) is clipped out of view until keyboard focus, so the first Tab stop is "Skip to content" — the WCAG 2.4.1 bypass-block pattern, free. - **Validation without JS.** `:user-invalid` / `:user-valid` / `[aria-invalid]` get a danger (invalid) or success (valid) border — touched only, nothing flashes on page load. Labels that wrap a required control get an asterisk, and `form:has(:user-invalid)` draws a subtle ring around the whole form — all browser-driven, no script. - **Status feedback.** Alerts take their live-region semantics from *your* markup (`role="alert"`, `aria-live="polite"`); toasts (Popover API) pair `role="status"` / `role="alert"` with an open/close contract (`Esc`, click-away). Skeleton is decorative — it never announces. ## How each component earns it for free | Component | Native primitive | What the browser gives us | |---|---|---| | Button | `