• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
    • Checkbox
    • Circular Progress
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
  2. Properties
  3. Dependencies
    1. Used by
    2. Graph
Components Screen Reader Only

ld-sr-only #

Use ld-sr-only to hide an element visually without hiding it from screen readers.

The CSS class ld-sr-only works the same way as its Web Component counterpart, except that it can be applied to an HTML element directly while the Web Component wraps the element which needs to be only screen reader visible.

Examples #

<ld-sr-only>Hello screen reader</ld-sr-only>
<span class="ld-sr-only">Hello screen reader</span>
Hello screen reader
Hello screen reader

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
ref ref reference to component any undefined

Dependencies #

Used by #

  • ld-sidenav-header
  • ld-sidenav-toggle-outside
  • ld-slider
  • ld-sr-live
  • ld-tooltip

Graph #

graph TD;
  ld-sidenav-header --> ld-sr-only
  ld-sidenav-toggle-outside --> ld-sr-only
  ld-slider --> ld-sr-only
  ld-sr-live --> ld-sr-only
  ld-tooltip --> ld-sr-only
  style ld-sr-only fill:#f9f,stroke:#333,stroke-width:4px