---
url: /docs/foundations/css-classes/screen-readers.md
---
> Accessibility

# Screen Readers

Utilities for improving accessibility with screen readers.

## Quick reference

| Class | Description |
|-------|-------------|
| `sr-only` | `position: absolute width: 1px height: 1px padding: 0 margin: -1px overflow: hidden clip: rect(0, 0, 0, 0) white-space: nowrap border-width: 0` |
| `not-sr-only` | `position: static width: auto height: auto padding: 0 margin: 0 overflow: visible clip: auto white-space: normal` |

## Basic usage

### Screen-reader-only elements

Use `sr-only` to hide an element visually without hiding it from screen readers:

```html
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>
```

### Undoing screen-reader-only elements

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:

```html
<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>
```