The aria-only (a.k.a. sr-only) visually hides elements.
But keeps them accessible to screen-readers and other aria tools.
npm install @fylgja/aria-only
Then include the component in to your code via;
// Or via PostCSS and other options as plain CSS
How to use #
Add the class
.aria-only to any element to visually hide it.
<div class="aria-only">Text that is visually hidden</div>
Use as Skip link #
The aria-only component also support the skip navigation option.
This can be used via the class
since this class will still show the content when receiving focus.
If you want to extent this behavior, to make a true skip link see the tips.
Use as !important styled #
The aria-only component is by default not set to render it's styles as important.
If you do prefer this, you can enable this via the variable
$enable-aria-only-important, and set the value to
Use as media query version #
This feature is disabled by default and can be enabled via the variable
$enable-aria-only-mq, or can be imported as CSS.
@use "@fylgja/aria-only" with ($enable-aria-only-mq: true);
// PostCSS and other options as plain CSS
When enabled you can use the
aria-only with the mq prefix and exclusive to the mq option the
not-aria-only, which unset's 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.
Mixin (SCSS only) #
You can also use it as a mixin with your own styles, via;
@use "@fylgja/aria-only/helper" as *;
// Set $enforce to true to set the values to !important
@include aria-only($enforce: false, $unset: false);
// If you want it to still show on focus
@include aria-only-focusable($enforce: false, $unset: false);
As with almost all of our components, CSS variables can be configured to add your own look/style.
Want direct control on the base styles, here are the following SCSS variables can you modify.
$enable-aria-only-important: false !default;
$enable-aria-only-mq: false !default;
$aria-only-separator: "-" !default;
$aria-only-breakpoints: $mq-breakpoints !default;
How to make a skip-link without layout jumps
.aria-only-focusable will unset its own styles when receiving focus.
To prevent this for some styles, you must set some styles to always take effect, even when the skip link has focus.
You only need this sample to prevent layout jank.
But we need some extra styles so the text is also usable to visual users.