Accessibility

helpers/a11y.css plus principles that run through the whole system rather than sitting in a single file.

Classes

Class	Purpose
`.ncss-visually-hidden`	Readable by screen readers, visually hidden
`.ncss-visually-hidden-focusable`	As above, but becomes visible on keyboard focus
`.ncss-skip-link`	"Skip to content" link, visible only on focus - on every page directly after `<body>`. Hidden via `translate` by its own height, so it stays fully off-screen even with large font size/line height and 200 % text zoom

<body>
  <a href="#main" class="ncss-skip-link">Skip to content</a>
  <header class="ncss-topbar">...</header>
  <main id="main">...</main>

  <button type="button">
    <span class="ncss-icon ncss-icon-search" aria-hidden="true"></span>
    <span class="ncss-visually-hidden">Open search</span>
  </button>

System-wide Principles

Native elements first - <dialog>, <details>, <fieldset>, <progress>/<meter> bring keyboard control, focus management and roles for free, with no ARIA reimplementation.
:focus-visible always stays ungated - unlike :hover, which is only active on real pointing devices (see Touch & Mobile Viewports).
prefers-reduced-motion is respected globally (the * selector includes html) - no animation has to check it individually.
Color contrast is part of the token palette: -on-soft text colors per family are checked against their own -100 surface, not guessed (see Colors & Surfaces).
.ncss-table-stacked is the one deliberate exception - breaks programmatic table semantics in favor of readability on narrow screens, see Known Limitations.