---
name: applying-a11y-standards
description: Rules for ensuring Accessibility (a11y) across the Tourly app. Use to build inclusive interfaces.
---

# Accessibility Standards (a11y)

## When to use this skill
- Every time you create a new component or page.
- During UI audits.

## Best Practices
- **Semantic HTML**: Use `<main>`, `<header>`, `<footer>`, `<nav>`, and appropriate heading levels.
- **ARIA Labels**: Use `aria-label` for icon-only buttons.
- **Keyboard Nav**: Ensure all interactive elements have a visible `:focus-visible` state.
- **Contrast**: Maintain a text-to-background contrast ratio of at least 4.5:1.

## Instructions
- **Tools**: Use the `axe-core` library or Lighthouse to run automated audits.
- **Alt Text**: Every `Image` must have a descriptive `alt` attribute.