Screen Readers

v1.1.0+

Utilities for improving accessibility with screen readers.

Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:

By default, responsive and variants are generated for these utilities. You can use focus:not-sr-only to make an element visually hidden by default but visible when the user tabs to it — useful for “skip to content” links:

You can control which variants are generated for the accessibility utilities by modifying the accessibility property in the variants section of your file.

For example, this config will also generate hover and active variants:

Disabling

  Typography →