Skip to content

Screen Reader Utilities

Utilities for hiding content visually while keeping it accessible to screen readers.

Classes

Class	Purpose
`af-sr-only`	Visually hidden. Accessible to screen readers.
`af-sr-only-focusable`	Hidden until focused. Generic; skip links use `af-skip`.

`af-sr-only`

Hides an element visually but keeps it in the accessibility tree. Screen readers will still announce it.

<!-- Icon button with accessible label -->
<button class="af-btn af-btn-icon">
  <span class="af-sr-only">Close</span>
  ×
</button>

<!-- Accessible table caption -->

<table>
  <caption class="af-sr-only">Quarterly revenue by region</caption>
  ...
</table>

When to use

Icon-only buttons that need a text label
Decorative images with adjacent visible text
Table captions when a visual heading already exists
Additional context for screen reader users

`af-sr-only-focusable`

Hidden until the element receives focus. Use this for custom hidden-until-focus controls. Skip links use af-skip — it includes this clip plus position and chrome.

<a href="#settings" class="af-sr-only-focusable">Skip to settings</a>

CSS reference

.af-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

.af-sr-only-focusable:not(:focus, :focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}