Sr Only

Content that should be read out, but not shown. The class shrinks the element away visually and leaves it in the document, so screen readers still find it.

How to use it

A row of “Delete” buttons makes sense to someone looking at the table. Someone listening to it gets four identical buttons. The addition in .lt-sr-only says which row the button belongs to, without repeating it for the eye.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/components/css/sr-only/sr-only.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/components/css/button/button.css">
<!-- Or everything in one file: https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/dist/lotek.css -->

<button class="lt-button" data-variant="danger">
Delete<span class="lt-sr-only"> the application from 4 March</span>
</button>

import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/sr-only.css"
import "@lo-tek/interfaces/button.css"

lt is used in two ways, and which one depends on whether you create the element or find it.

If you create the markup, spread the attributes in. That is the way in React, Astro and anything else that renders:

import { lt } from "@lo-tek/interfaces/react"

<button {...lt.button({ variant: "ghost" })} type="button">
  Delete{" "}
  <span {...lt.srOnly()}>application 2024/1187</span>
</button>

{" "} is the space between the two words. JSX strips a line break between text and an element, and without it the button is read as “Deleteapplication”.

The import is from /react here, since the block is JSX. From there the keys are className and htmlFor. In Astro and anything else without React, import @lo-tek/interfaces and you get class and for.

If you have the element in a variable, set them on it with setAttributes. That is the way without JSX, whether you just created the element or found it in a page the server sent:

import { lt } from "@lo-tek/interfaces"

const addition = document.createElement("span")
addition.textContent = " the application from 4 March"

lt.setAttributes(addition, lt.srOnly())

The button is read out as “Delete the application from 4 March”, while it shows “Delete” on screen.

Hidden label

If the label is obvious from the layout, it can be hidden visually. It should not be removed.

Example
Plain HTML

<label class="lt-label lt-sr-only" for="search">Search cases</label>
<input class="lt-input" id="search" type="search" placeholder="Search cases" />

placeholder is no replacement for a label: it disappears as soon as the user types, and several screen readers do not read it out at all.

Classes you can style

Class	What it is
`.lt-sr-only`	The element that should be heard, but not seen

The class has no variables. It has one job, and the values in it are the ones that actually work across browsers.

Accessibility

Use it only on text that makes sense read on its own. An explanation that only fits with something you can see becomes confusing when it is read out in a list of links.
If the content should go for everyone, use hidden. display: none and visibility: hidden remove the element for screen readers too, and that is exactly what this class avoids.
An element with the class can still get focus. If you put a link there, focus jumps to something the user cannot see. If it should be shown when it gets focus, you have to restore the styles in :focus.