@substrate-system/a11y NPM

a11y

Factoring out some common CSS utilities, so there is less duplication across projects.

featuring

install

npm i -S @substrate-system/a11y

Use

This package exposes CSS only.

example

Put the relevant classes in your HTML.

<button>
  <svg><!--  icon here  --></svg>
  <span class="visually-hidden">My Cool Button text</span>
</button>

Bundler

If using a bundler, import the package as normal.

import '@substrate-system/a11y'

Or import specific things

import '@substrate-system/a11y/visually-hidden'

Or minified:

import '@substrate-system/a11y/min'

CSS imports

Import in CSS:

@import url("../node_modules/@substrate-system/a11y/dist/index.min.css");

Link

If you don't want to use a bundler, this package exposes minified CSS files too. You can copy them to a location that is accessible to your web server, then link to them directly in HTML.

copy

cp ./node_modules/@substrate-system/a11y/dist/index.min.css ./public/a11y.css

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./a11y.css">
</head>
</html>

API

This package exposes CSS that will look for the following classes.

`visually-hidden`

Use this to create accessible buttons with no visible text.

See this article.

Bundler

import '@substrate-system/a11y/visually-hidden'

CSS Import

@import url("../node_modules/@substrate-system/a11y/dist/visually-hidden.min.css");

example

<button>
    <svg><!--  icon here  --></svg>
    <span class="visually-hidden">Button text</span>
</button>

`prefers-reduced-motion`

Disable smooth scrolling if the prefers-reduced-motion media query is set.

Bundler

import '@substrate-system/a11y/reduced-motion'

CSS Import

@import url("../node_modules/@substrate-system/a11y/dist/reduced-motion.min.css");

@substrate-system/a11y v0.0.12

a11y

install

Use

example

Bundler

Or import specific things

CSS imports

Link

copy

HTML

API

`visually-hidden`

Bundler

CSS Import

example

`prefers-reduced-motion`

Bundler

CSS Import

see also