Europa Component Library

Screen Reader

Documentation • Demo

Screen readers

Hide an element to all devices except screen readers with .ecl-u-sr-only.

Combine .ecl-u-sr-only with .ecl-u-sr-only--focusable to show the element again when it’s focused (e.g. by a keyboard-only user).

<span class="ecl-u-sr-only">This text is only readable by screen readers.</span>

<a class="ecl-u-sr-only ecl-u-sr-only--focusable" href="#content">Skip to main content</a>
 
/* No context defined for this component. */
 
<span class="ecl-u-sr-only">This text is only readable by screen readers.</span>

<a class="ecl-u-sr-only ecl-u-sr-only--focusable" href="#content">Skip to main content</a>
  • Content: 
    /**
 * Screen readers utilities
 * @define sr-only
 */

.ecl-u-sr-only {
  @include ecl-u-sr-only();
}

.ecl-u-sr-only--focusable {
  @include ecl-u-sr-only-focusable();
}
  • URL: /components/raw/ecl-u-screen-reader/ecl-u-screen-reader.scss
  • Filesystem Path: framework/utilities/ecl-u-screen-reader/ecl-u-screen-reader.scss
  • Size: 172 Bytes
  • Handle: @ec-europa/ecl-u-screen-reader
  • Preview:
  • Filesystem Path: framework/utilities/ecl-u-screen-reader/ecl-u-screen-reader.twig