visually-hidden

Supple CSS | utilities.visually-hidden

Hides an element visually while still allowing the content to be accessible to assistive technology, e.g. screen readers.

Read more about Supple CSS.

Table of contents

• Use
• Available classes
• Configurable variables
• Installation
• Testing
• Browser support

Use

<button>
  This button has text that is
  <span class="u-visually-hidden"
    >hidden visually but still available for screenreaders etc.</span
  >
</button>

responsive modifiers

When you set media queries in $in-query you can use them like this:

<button>
  This button has text that is
  <span class="u-visually-hidden@lap"
    >Hidden visually from lap breakpoint but still available for screenreaders
    etc.</span
  >
</button>

Available classes

On the .u-visually-hidden block

• .u-visually-hidden: core visually hidden block
• .u-visually-hidden@[QUERY-NAME]: applies visually-hidden at the given media query. (available in $in-query SCSS setting)

Configurable variables

SCSS variables

• $in-query: a list of breakpoints where .u-visually-hidden@[QUERY-NAME] is generated for, defaults to: ()

You can overwrite the SCSS variables the following ways:

// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/visually-hidden' with (
  $in-query: (
    lap,
    desk,
  )
);

or

// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/visually-hidden/variables'
  with (
  $in-query: (
    lap,
  )
);

// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/visually-hidden';

Installation

Make sure you've installed/downloaded the Supple CSS library: Supple CSS installation

Testing

Basic visual tests are in test.html.

Browser support

• Chromium-based browsers (Chrome, Edge, Brave, Opera)
• WebKit-based browsers (Safari, iOS Safari)
• Firefox (Gecko)