# Focus and screen readers

Source: https://iriscss.com/documentation/accessibility/focus-and-screen-readers/

A visible focus ring for keyboard users, content for screen readers only, and a skip link.

## Focus ring

Every focusable element shows an outline when it gets keyboard focus, as WCAG 2.4.7 asks. Mouse clicks show no ring. Buttons, links and form controls draw the ring in their own color. Tab through the example to see it.

```html
<button class="primary">Button</button>
<a href="#">Link</a>
<button class="danger outlined">Outlined</button>
```

A `main`, `section`, `article` or heading with `tabindex="-1"`, such as the target of a skip link, shows no ring. Widgets that move focus with `tabindex="-1"`, such as menus, keep theirs. Every ring has at least 3:1 contrast with the page. The width is `--i-focus-ring-width` and the neutral color `--i-color-focus`.

## Screen reader only

`.sr-only` hides content on screen but keeps it for screen readers. `.sr-only-focusable` does the same until it or something inside it gets focus, for links and controls that should appear for keyboard users.

```html
<button aria-describedby="delete-hint">
  Delete
  <span id="delete-hint" class="sr-only">the project and all its files</span>
</button>
```

## Skip link

`.skip-to-content` is a link that shows only on keyboard focus, so keyboard users can jump past the navigation. Put it first in `body`. This site has one: press `Tab` right after the page loads.

```html
<body>
  <a href="#content" class="skip-to-content">Skip to content</a>
  <header>...</header>
  <main id="content">...</main>
</body>
```

## Touch and text direction

Links, buttons, form controls and summaries skip the double tap zoom delay on touch screens. `dir="rtl"` flips the layout, and icons such as the select chevron, the search magnifier, the validation icons and the breadcrumb divider move to the other side. A nested `dir="ltr"` flips them back.

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-skip-to-content-z-index` | `9999` | Sits above everything else |