EC System

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 reader utilities
 */

// Import base and generic
@import '@ecl/ec-base/ec-base';
@import '@ecl/generic-utility-screen-reader/generic-utility-screen-reader';

// Use generic mixin
@include exports('ec-utility-screen-reader') {
  @include ecl-utility-screen-reader();
}
  • URL: /components/raw/ec-utility-screen-reader/ec-utility-screen-reader.scss
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-screen-reader/ec-utility-screen-reader.scss
  • Size: 282 Bytes
  • Handle: @ecl/ec-utility-screen-reader
  • Preview:
  • Filesystem Path: ../../src/systems/ec/ec-utility/ec-utility-screen-reader/ec-utility-screen-reader.twig