# Accessibility Utilities — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/m-a11y

> Styles that include everyone.

## Screen readers, focus and contrast

`sr-only` hides content visually while keeping it available to screen readers (for icon-only buttons), and `not-sr-only` reveals it, as in "skip to content" links that appear on focus. Visible focus styles (`focus-visible:outline-*` or `ring-*`) are essential for keyboard users. Choose colour pairs with enough contrast, keep touch targets large, use `aria-*` and `data-*` variants to style state that is also exposed to assistive technology, and test with a keyboard and a screen reader.

## A skip link and an icon-only button

Accessible patterns.

```html
<a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50
                        focus:rounded focus:bg-white focus:px-4 focus:py-2 focus:shadow">
  Skip to content
</a>

<button class="rounded-md p-2 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-cyan-600">
  <svg class="size-5" aria-hidden="true">...</svg>
  <span class="sr-only">Close dialog</span>
</button>
```

## Utilities do not replace semantics

Correct HTML elements and ARIA attributes come first; Tailwind only styles them.

**Quiz:** What does sr-only do?

- [ ] Removes content from the DOM
- [x] Hides content visually but keeps it readable by screen readers
- [ ] Shows content only on small screens
- [ ] Makes text red

*Answer:* Hides content visually but keeps it readable by screen readers. For accessible labels.