Factoring out some common CSS utilities, so there is less duplication across projects.
featuring
npm i -S @substrate-system/a11yThis package exposes CSS only.
Put the relevant classes in your HTML.
<button>
<svg><!-- icon here --></svg>
<span class="visually-hidden">My Cool Button text</span>
</button>If using a bundler, import the package as normal.
import '@substrate-system/a11y'import '@substrate-system/a11y/visually-hidden'Or minified:
import '@substrate-system/a11y/min'Import in CSS:
@import url("../node_modules/@substrate-system/a11y/dist/index.min.css");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.
cp ./node_modules/@substrate-system/a11y/dist/index.min.css ./public/a11y.css<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./a11y.css">
</head>
</html>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.
import '@substrate-system/a11y/visually-hidden'@import url("../node_modules/@substrate-system/a11y/dist/visually-hidden.min.css");<button>
<svg><!-- icon here --></svg>
<span class="visually-hidden">Button text</span>
</button>Disable smooth scrolling if the prefers-reduced-motion media query is set.
import '@substrate-system/a11y/reduced-motion'@import url("../node_modules/@substrate-system/a11y/dist/reduced-motion.min.css");- Accessible Icon Buttons
- Inclusively Hidden
- How to animate scrolling to anchor links with one line of CSS -- scrolling + accessibility