wcag-accessibility

Name: wcag-accessibility
Author: dembrandt

275installs5forks

How to install wcag-accessibility?

dembrandt/dembrandt-skills/wcag-accessibility

$npx -y skills add dembrandt/dembrandt-skills --skill wcag-accessibility

Installs into the current project.

Summary

UI must comply with WCAG 2.2 Level AA, as required by the European Accessibility Act (EN 301 549). Do not deviate without deliberate justification. Disabled UI elements are explicitly exempt from colour contrast requirements. Use when designing, building, or reviewing any user-fa

Files · 1

View on GitHub

SKILL.md

1	# WCAG Accessibility (EN 301 549 / European Standard)
2
3	## The Standard
4
5	The European Accessibility Act (EAA) requires digital products and services in the EU to meet EN 301 549, which references WCAG 2.2 Level AA as the technical baseline. This is not optional — it is a legal requirement for products operating in the EU market.
6
7	Default: always build to WCAG 2.2 AA. Deviating requires explicit, documented justification. Do not skip accessibility requirements because of timeline pressure or design preference.
8
9	WCAG 2.2 AA organises requirements under four principles: Perceivable, Operable, Understandable, Robust.
10
11	---
12
13	## Perceivable
14
15	Users must be able to perceive all content and UI components.
16
17	### Colour Contrast
18	\| Context \| Minimum ratio \| Enhanced (AAA) \|
19	\|---\|---\|---\|
20	\| Normal text (< 18pt / < 14pt bold) \| 4.5 : 1 \| 7 : 1 \|
21	\| Large text (≥ 18pt / ≥ 14pt bold) \| 3 : 1 \| 4.5 : 1 \|
22	\| UI components and graphical objects \| 3 : 1 \| — \|
23
24	> Check contrast on the real rendered page, not the spec (dembrandt engine, optional). Design-time swatches lie once real text lands on real backgrounds, gradients, and overlays. `get_findings` / `render_report` run against the live DOM and surface the actual failing text/background pairs with their measured ratios — a fast way to catch the combinations a static palette review misses. See [`extract-design`](../extract-design/SKILL.md).
25
26	Disabled elements are exempt. WCAG explicitly excludes inactive UI components from contrast requirements (WCAG 1.4.3 exception). A disabled button may use low-contrast text — this is intentional and correct, as it communicates the unavailable state.
27
28	Do not use colour as the only means of conveying information (e.g. a red border alone to indicate an error — add an icon or text label).
29
30	### Text Alternatives
31	- Every meaningful image needs `alt` text describing its content or function
32	- Decorative images use `alt=""` so screen readers skip them
33	- Icons used as buttons need an accessible label: `aria-label` or visually hidden text
34	- Charts and data visualisations need a text summary or data table alternative
35
36	### Captions and Transcripts
37	- Video content needs captions
38	- Audio-only content needs a transcript
39
40	---
41
42	## Operable
43
44	Users must be able to operate all UI components.
45
46	### Keyboard Navigation
47	All interactive elements must be reachable and operable by keyboard alone.
48
49	- Every button, link, input, and control must receive focus via Tab
50	- Focus order must follow the visual reading order of the page
51	- No keyboard traps — users must be able to navigate away from any component
52	- Modal dialogs must trap focus inside while open, and return focus to the trigger element on close
53
54	### Focus Visibility
55	A visible focus indicator is required on every interactive element (WCAG 2.2 strengthens focus visibility requirements).
56
57	```css
58	/* Minimum: do not remove focus outline without a replacement */
59	:focus-visible {
60	outline: 2px solid var(--color-focus);
61	outline-offset: 2px;
62	}
63	```
64
65	Never use `outline: none` without providing a custom focus style. The focus ring is not a design problem to eliminate — it is a navigation tool.
66
67	### Touch Target Size
68	Interactive elements on touch devices must be at least 24×24px (WCAG 2.2) — 44×44px is the recommended comfortable minimum (Apple HIG, Material Design). Small icon buttons need padding to reach this size even if the visual icon is smal

People who liked this also viewed

6 picks

Type

wcag-accessibility

275installs5forks

View on GitHub

How to install wcag-accessibility?

dembrandt/dembrandt-skills/wcag-accessibility

$npx -y skills add dembrandt/dembrandt-skills --skill wcag-accessibility

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# WCAG Accessibility (EN 301 549 / European Standard)
2
3	## The Standard
4
5	The European Accessibility Act (EAA) requires digital products and services in the EU to meet EN 301 549, which references WCAG 2.2 Level AA as the technical baseline. This is not optional — it is a legal requirement for products operating in the EU market.
6
7	Default: always build to WCAG 2.2 AA. Deviating requires explicit, documented justification. Do not skip accessibility requirements because of timeline pressure or design preference.
8
9	WCAG 2.2 AA organises requirements under four principles: Perceivable, Operable, Understandable, Robust.
10
11	---
12
13	## Perceivable
14
15	Users must be able to perceive all content and UI components.
16
17	### Colour Contrast
18	\| Context \| Minimum ratio \| Enhanced (AAA) \|
19	\|---\|---\|---\|
20	\| Normal text (< 18pt / < 14pt bold) \| 4.5 : 1 \| 7 : 1 \|
21	\| Large text (≥ 18pt / ≥ 14pt bold) \| 3 : 1 \| 4.5 : 1 \|
22	\| UI components and graphical objects \| 3 : 1 \| — \|
23
24	> Check contrast on the real rendered page, not the spec (dembrandt engine, optional). Design-time swatches lie once real text lands on real backgrounds, gradients, and overlays. `get_findings` / `render_report` run against the live DOM and surface the actual failing text/background pairs with their measured ratios — a fast way to catch the combinations a static palette review misses. See [`extract-design`](../extract-design/SKILL.md).
25
26	Disabled elements are exempt. WCAG explicitly excludes inactive UI components from contrast requirements (WCAG 1.4.3 exception). A disabled button may use low-contrast text — this is intentional and correct, as it communicates the unavailable state.
27
28	Do not use colour as the only means of conveying information (e.g. a red border alone to indicate an error — add an icon or text label).
29
30	### Text Alternatives
31	- Every meaningful image needs `alt` text describing its content or function
32	- Decorative images use `alt=""` so screen readers skip them
33	- Icons used as buttons need an accessible label: `aria-label` or visually hidden text
34	- Charts and data visualisations need a text summary or data table alternative
35
36	### Captions and Transcripts
37	- Video content needs captions
38	- Audio-only content needs a transcript
39
40	---
41
42	## Operable
43
44	Users must be able to operate all UI components.
45
46	### Keyboard Navigation
47	All interactive elements must be reachable and operable by keyboard alone.
48
49	- Every button, link, input, and control must receive focus via Tab
50	- Focus order must follow the visual reading order of the page
51	- No keyboard traps — users must be able to navigate away from any component
52	- Modal dialogs must trap focus inside while open, and return focus to the trigger element on close
53
54	### Focus Visibility
55	A visible focus indicator is required on every interactive element (WCAG 2.2 strengthens focus visibility requirements).
56
57	```css
58	/* Minimum: do not remove focus outline without a replacement */
59	:focus-visible {
60	outline: 2px solid var(--color-focus);
61	outline-offset: 2px;
62	}
63	```
64
65	Never use `outline: none` without providing a custom focus style. The focus ring is not a design problem to eliminate — it is a navigation tool.
66
67	### Touch Target Size
68	Interactive elements on touch devices must be at least 24×24px (WCAG 2.2) — 44×44px is the recommended comfortable minimum (Apple HIG, Material Design). Small icon buttons need padding to reach this size even if the visual icon is smal

People who liked this also viewed

6 picks

Type