# Accessibility Patterns — Copy-Paste Reference
## Contents
- Skip link
- Focus styles
- Accessible form field with error
- Icon-only button
- Live regions (async updates)
- Accessible modal dialog
- Reduced motion
- Contrast tokens
- Gotchas
## Skip link
First focusable element on the page; visible only on focus.
```html
Skip to main content…
```
```css
.skip-link {
position: absolute;
left: -9999px;
}
.skip-link:focus {
left: 8px;
top: 8px;
z-index: 100;
}
```
## Focus styles
`:focus-visible` shows the ring for keyboard users without flashing it on every mouse click.
```css
:focus-visible {
outline: 2px solid var(--color-focus, #1a56db);
outline-offset: 2px;
}
/* never do: :focus { outline: none; } without a replacement */
```
## Accessible form field with error
```html
Enter an email address with an @, like name@example.com.
```
Remove `aria-invalid` and the error node (or empty it) once the field validates.
## Icon-only button
```html
```
`aria-hidden` on the SVG keeps screen readers from announcing the icon twice.
## Live regions (async updates)
```html
```
```js
document.getElementById('status').textContent = '12 results found';
```
The live region must exist in the DOM before you write into it — injecting a new `aria-live` node with text is not announced reliably.
## Accessible modal dialog
Native `