Modern Accessibility CSS Reset

An accessibility-focused CSS reset built with modern browser features.

Use it alongside normalize.css or another general-purpose reset. It adds accessibility-focused defaults rather than normalizing browser styles.

This reset improves CSS defaults, but it cannot make a project accessible on its own. Use semantic HTML, build accessible components and test with assistive technology.

Features

• Works with cascade layers and uses low-specificity :where() selectors.
• Improves readability for body text and headings.
• Inherits typography in form controls.
• Adds a consistent two-color focus indicator that adapts to system colors.
• Keeps anchored and focused elements clear of viewport edges.
• Provides .visually-hidden and .sr-only utilities that reveal interactive content when focused.
• Reduces animation and transition durations and delays when the user prefers reduced motion.

Usage

Install the package with npm:

npm install a11y-reset

Import this reset in the first layer after your general-purpose reset. Define layer order before other imports or style rules:

@layer reset, a11y-reset, some, other, layers;

Then import the package into its layer:

@import 'a11y-reset' layer(a11y-reset);

Another CSS reset?

General-purpose resets such as normalize.css create consistent defaults and address browser quirks. a11y-reset complements them with defaults for readable text, visible focus, reduced motion and screen-reader-only content.