paulgrape Website accessibility
WCAG-aligned rules so people of all abilities can use the site. Curated from the Website Specification — Accessibility (CC BY 4.0).
Required
- Sufficient colour contrast for text and meaningful non-text elements.
- Every
<img>has analtattribute describing its purpose (emptyalt=""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 ownlang. - Respect
prefers-reduced-motionfor 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
@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/