# Applying A11Y Standards

> Rules for ensuring Accessibility (a11y) across the Tourly app. Use to build inclusive interfaces.

- Skill: `diegosouzapw/applying-a11y-standards` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add diegosouzapw/applying-a11y-standards`
- Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/applying-a11y-standards/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: diegosouzapw (https://skillmd.com/u/diegosouzapw)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/diegosouzapw/applying-a11y-standards

---


# 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.