Skip to content

A style reset specifically aimed at accessibility that embraces modern CSS features to help start your project without accessibility errors.

License

Notifications You must be signed in to change notification settings

tricinel/a11y-reset

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Modern Accessibilty CSS Reset

A style reset specifically aimed at accessibility that embraces modern CSS features to help start your project without accessibility errors.

This is not a CSS reset to replace normalise.css or other CSS resets. This is a reset that is specifically aimed at accessibility.

Features

  • Designed for cascade layers by using the modern @layer directive.
  • Improved readability for text and headings.
  • Proper resets for form elements.
  • Accessible, consistent focus outlines.
  • .visually-hidden and .sr-only class baked in.
  • Reduced motion media query baked in.

Usage

Install and import the package (requires a bundler):

npm install a11y-reset

Then, I'd recommend you import this reset into the first layer after your existing reset. You can predefine your layers as the first thing in your stylesheet:

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

Then import the reset:

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

Another CSS reset?

CSS resets like normalise.css create sensible defaults and eliminate browser bugs. Use one of these and you get a consistent base across all browsers.

a11y-reset takes a different and complimentary approach. Its aim is to prevent accessibility errors and provide sensible defaults for accessibility. It's not a replacement for a CSS reset, but a complimentary reset.

About

A style reset specifically aimed at accessibility that embraces modern CSS features to help start your project without accessibility errors.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published