@substrate-system/a11y
Advanced tools
Factoring out some common CSS utilities, so there is less duplication across projects.
featuring
npm i -S @substrate-system/a11y
This 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-hiddenUse 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>
prefers-reduced-motionDisable 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");
FAQs
Accessibility helpers
The npm package @substrate-system/a11y receives a total of 226 weekly downloads. As such, @substrate-system/a11y popularity was classified as not popular.
We found that @substrate-system/a11y demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A critical vm2 sandbox escape can allow untrusted JavaScript to break isolation and execute commands on the host Node.js process.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.