gaia: Skill for Claude Code

Accessibility Fix Patterns

How to resolve specific axe-core violations in this project.

Violations come from test/a11y.ts (Vitest), .playwright/a11y.ts (Playwright), or the code-audit-frontend agent's a11y bucket. General a11y guidance lives in .claude/rules/accessibility.md.

color-contrast

WCAG AA requires 4.5:1 for normal text, 3:1 for large text. Use the project's semantic Tailwind tokens (see .claude/rules/tailwind.md) instead of arbitrary palette colors, they pair light/dark modes correctly.

// BAD, fails contrast in dark mode, raw colors
<p className="text-gray-400 bg-white">Status</p>

// GOOD, semantic tokens, contrast-safe in both modes
<p className="text-body bg-body">Status</p>

label

Form inputs need an associated <label>. Use GAIA's Field wrapper from ~/components/Form/Field rather than a bare <label>, it wires htmlFor, error text, and description automatically. See the form-components.md audit extension.

// BAD, bare input with no label association
<input type="text" name="email" />

// GOOD, Field wraps a project input with the right wiring
<Field type="input" name="email" label={t('email')}>
  <InputText name="email" />
</Field>

label-title-only

title attributes are not labels, screen readers and mobile devices ignore them. Use aria-label or a real <label>.

// BAD, title is not an accessible name
<input type="text" title="Search" />

// GOOD, aria-label provides the accessible name
<input type="text" aria-label={t('search')} />

image-alt

Every <img> needs alt. Content images describe the image; decorative images use alt="". See .claude/rules/accessibility.md.

// BAD, no alt attribute
<img src="/logo.png" />

// GOOD, content image
<img src="/logo.png" alt={t('companyLogo')} />

// GOOD, decorative image, hidden from AT
<img src="/divider.svg" alt="" />

button-name

Buttons need an accessible name. Visible text is fine; icon-only buttons need aria-label.