# Website Accessibility

> WCAG-aligned accessibility rules for a website — image alt text, form labels, keyboard navigation, visible focus, skip links, semantic landmarks, accessible errors, reduced motion, and captions. Use when auditing or building accessible UI, forms, navigation, or media.

- Skill: `paulgrape/website-accessibility` (Agent Skill)
- Install (CLI): `npx skillmds@latest add paulgrape/website-accessibility`
- Raw SKILL.md: https://api.skillmd.com/api/skills/paulgrape/website-accessibility/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: paulgrape (https://skillmd.com/u/paulgrape)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/paulgrape/website-accessibility

---


# Website accessibility

WCAG-aligned rules so people of all abilities can use the site. Curated from the
[Website Specification — Accessibility](https://specification.website/checklist/) (CC BY 4.0).

## Required

- Sufficient colour contrast for text and meaningful non-text elements.
- Every `<img>` has an `alt` attribute describing its purpose (empty `alt=""` for decorative).
- Every form control has a programmatically associated `<label>`. A placeholder is not a label.
- Every interactive element is keyboard-reachable and operable, in logical order, with no focus traps.
- Visible, high-contrast focus indicator whenever a control receives keyboard focus.
- A "skip to main content" link as the first focusable element.
- Use semantic HTML and landmarks: `<header>`, `<nav>`, `<main>`, `<footer>`.
- Descriptive link text — never "click here" or "read more" alone.
- Form errors identified in text, associated with their input, and announced to assistive tech.
- Set `<html lang>` and mark inline foreign-language content with its own `lang`.
- Respect `prefers-reduced-motion` for animation, parallax, and autoplay.
- Captions for video, transcripts for audio, real `<table>` markup for tabular data.
- Touch targets at least 24x24 CSS px (44x44 enhanced).

## Avoid

- Empty links/buttons with no accessible name (icon-only controls without a label).
- Third-party "accessibility overlay" widgets.

## Example

```css
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
```

Full item list and rationale: https://specification.website/checklist/

