Fylgja - Aria-only

The aria-only (a.k.a. sr-only) visually hides elements.

But keeps them accessible to screen-readers and other aria tools.

Installation

npm install @fylgja/aria-only

Then include the component in to your code via;

@use "@fylgja/aria-only";
// Or via PostCSS import
@import "@fylgja/aria-only";

Media Query support

If you need support for media queries, use the following import;

@use "@fylgja/aria-only" with ($enable-aria-only-mq: true);
// Or via PostCSS import
@import "@fylgja/aria-only/mq";

When enabled/used, the aria-only style can be used with the mq prefix, for example: md-aria-only.

The not-aria-only option is exclusive to the mq option and unsets the aria-only styles.

For what mq options are available see the mq package.

All mq values used by the $aria-only-breakpoints variable take the values directly from the Fylgja Mq component.

@layer support

If you need support for @layer, use the following import;

@use "@fylgja/aria-only" with ($aria-only-layer: "utilities");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/aria-only" layer("utilities");

How to use

For more information see the aria-only docs on the Fylgja.dev.