raweb-code

Name: raweb-code
Author: geoffreycrofte

31stars0forks

How to install raweb-code?

geoffreycrofte/luxembourg-accessibility-skillset/raweb-code

$npx -y skills add geoffreycrofte/luxembourg-accessibility-skillset --skill raweb-code

Installs into the current project.

Summary

Write accessible HTML, CSS, and JavaScript that conforms to RAWeb 1.1 (Luxembourg Web Accessibility Framework, based on EN 301 549 / WCAG 2.1). Use when developing web interfaces, components, forms, navigation, or any front-end code that must meet Luxembourg accessibility law. Co

Files · 1

View on GitHub

SKILL.md

1	# RAWeb 1.1 — Accessible Code Development Guide
2
3	You are an accessibility-aware developer. Every piece of HTML, CSS, and JavaScript
4	you write MUST conform to RAWeb 1.1 (Level AA by default). RAWeb is Luxembourg's
5	official web accessibility framework implementing EN 301 549 and WCAG 2.1.
6
7	## How to use the reference data
8
9	The full RAWeb 1.1 criteria, test methodologies, and glossary are available as
10	JSON files. Use the lookup script to query specific criteria on demand:
11
12	```bash
13	# List all topics
14	!`${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh topics`
15
16	# Look up a specific criterion
17	bash ${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh criterion 1.1
18
19	# Look up test methodology
20	bash ${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh methodology 1.1.1
21
22	# Search criteria by keyword
23	bash ${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh search "form"
24
25	# Check glossary definition
26	bash ${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh glossary "text alternative"
27	```
28
29	The raw JSON reference files are located at:
30	- `${CLAUDE_SKILL_DIR}/references/criteres.json` — All 136+ criteria with tests and WCAG/EN 301 549 mappings
31	- `${CLAUDE_SKILL_DIR}/references/methodologies.json` — Step-by-step test procedures
32	- `${CLAUDE_SKILL_DIR}/references/glossaire.json` — Glossary of accessibility terms
33	- `${CLAUDE_SKILL_DIR}/references/themes.json` — Topic names
34	- `${CLAUDE_SKILL_DIR}/references/niveaux.json` — WCAG conformance levels per criterion
35
36	When writing code for a specific component, ALWAYS look up the relevant RAWeb
37	criteria first to ensure full compliance. For example, before writing a form,
38	run `search "form"` and `topic 11`.
39
40	---
41
42	## Core rules (apply to ALL code you write)
43
44	### 1. Images (Topic 1)
45
46	ALWAYS:
47	- Every `<img>` conveying information MUST have a meaningful `alt` attribute (1.1)
48	- Every decorative `<img>` MUST have `alt=""` and no `title`, `aria-label`, or `aria-labelledby` (1.2)
49	- Every `<svg>` conveying information MUST have `role="img"` — this one is mandatory, 1.1.5 invalidates the
50	test without it — plus a text alternative via `aria-label`, `aria-labelledby`, or a `<title>` child (1.1)
51	- Decorative `<svg>` MUST have `aria-hidden="true"` (1.2)
52	- Every text alternative MUST be relevant — it must convey what the image conveys (1.3), **and short and
53	concise** (test 1.3.9). RAWeb's glossary defines short and concise as "a maximum length of 80 characters
54	is strongly recommended" — the 80 is a strong recommendation, but brevity itself is tested by 1.3
55	- Complex images (charts, infographics) need a detailed description (1.6) — but **the accepted routes differ
56	by element type**:
57	- `<img>`, `<object>`, `<embed>`: only two routes — a text alternative referencing an adjacent detailed
58	description, or an adjacent link/button to it. `aria-describedby` is not a route here (1.6.1–1.6.3)
59	- `<input type="image">`, `<svg>`, `role="img"`: `aria-describedby` is accepted, alongside
60	`aria-label`/`aria-labelledby` and the adjacent link/button (1.6.4, 1.6.5, 1.6.10)
61	- `<canvas>`: also accepts a detailed description placed between `<canvas>` and `</canvas>` (1.6.7)
62	- Whichever you use, it must actually resolve for AT — tests 1.6.6, 1.6.8 and 1.6.9 validate the wiring
63	rather than grant a route
64	- Avoid images of text unless a replacement mechanism exists, or the visual effect cannot be reproduced
65	in CSS — 1.8 accepts either escape (1.8 — Level AA)
66	- Where an image has a visible caption, that caption MUST be correctly linked to the image — `<figure>`/`<figcaption>` (1.9)
67
68	NEVER:
69	- Leave `alt` undefined on an informative image
70	- Use `alt="image"`, `alt="photo"`, `alt="icon"` — describe what the image conveys
71	- Use `title` as the sole text alternative (poor assistive technology support)
72
73	```html
74	<!-- GOOD: informative image -->
75	<img src="chart.png" alt="Sales increased 40% in Q3 2024">
76
77	<!-- GOOD: decorative image -->
78	<img src="decoration.svg" alt="">
79
80	<!-- GOOD: complex image with detailed description -->
81	<figure>
82	<img src="orgchart.png" alt="Company organisation chart. Full description below.">
83	<figcaption>
84	<details>
85	<summary>Full description of the organisation chart</summary>
86	<p

People who liked this also viewed

6 picks

Type

raweb-code

31stars0forks

View on GitHub

How to install raweb-code?

geoffreycrofte/luxembourg-accessibility-skillset/raweb-code

$npx -y skills add geoffreycrofte/luxembourg-accessibility-skillset --skill raweb-code

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# RAWeb 1.1 — Accessible Code Development Guide
2
3	You are an accessibility-aware developer. Every piece of HTML, CSS, and JavaScript
4	you write MUST conform to RAWeb 1.1 (Level AA by default). RAWeb is Luxembourg's
5	official web accessibility framework implementing EN 301 549 and WCAG 2.1.
6
7	## How to use the reference data
8
9	The full RAWeb 1.1 criteria, test methodologies, and glossary are available as
10	JSON files. Use the lookup script to query specific criteria on demand:
11
12	```bash
13	# List all topics
14	!`${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh topics`
15
16	# Look up a specific criterion
17	bash ${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh criterion 1.1
18
19	# Look up test methodology
20	bash ${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh methodology 1.1.1
21
22	# Search criteria by keyword
23	bash ${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh search "form"
24
25	# Check glossary definition
26	bash ${CLAUDE_SKILL_DIR}/scripts/raweb-lookup.sh glossary "text alternative"
27	```
28
29	The raw JSON reference files are located at:
30	- `${CLAUDE_SKILL_DIR}/references/criteres.json` — All 136+ criteria with tests and WCAG/EN 301 549 mappings
31	- `${CLAUDE_SKILL_DIR}/references/methodologies.json` — Step-by-step test procedures
32	- `${CLAUDE_SKILL_DIR}/references/glossaire.json` — Glossary of accessibility terms
33	- `${CLAUDE_SKILL_DIR}/references/themes.json` — Topic names
34	- `${CLAUDE_SKILL_DIR}/references/niveaux.json` — WCAG conformance levels per criterion
35
36	When writing code for a specific component, ALWAYS look up the relevant RAWeb
37	criteria first to ensure full compliance. For example, before writing a form,
38	run `search "form"` and `topic 11`.
39
40	---
41
42	## Core rules (apply to ALL code you write)
43
44	### 1. Images (Topic 1)
45
46	ALWAYS:
47	- Every `<img>` conveying information MUST have a meaningful `alt` attribute (1.1)
48	- Every decorative `<img>` MUST have `alt=""` and no `title`, `aria-label`, or `aria-labelledby` (1.2)
49	- Every `<svg>` conveying information MUST have `role="img"` — this one is mandatory, 1.1.5 invalidates the
50	test without it — plus a text alternative via `aria-label`, `aria-labelledby`, or a `<title>` child (1.1)
51	- Decorative `<svg>` MUST have `aria-hidden="true"` (1.2)
52	- Every text alternative MUST be relevant — it must convey what the image conveys (1.3), **and short and
53	concise** (test 1.3.9). RAWeb's glossary defines short and concise as "a maximum length of 80 characters
54	is strongly recommended" — the 80 is a strong recommendation, but brevity itself is tested by 1.3
55	- Complex images (charts, infographics) need a detailed description (1.6) — but **the accepted routes differ
56	by element type**:
57	- `<img>`, `<object>`, `<embed>`: only two routes — a text alternative referencing an adjacent detailed
58	description, or an adjacent link/button to it. `aria-describedby` is not a route here (1.6.1–1.6.3)
59	- `<input type="image">`, `<svg>`, `role="img"`: `aria-describedby` is accepted, alongside
60	`aria-label`/`aria-labelledby` and the adjacent link/button (1.6.4, 1.6.5, 1.6.10)
61	- `<canvas>`: also accepts a detailed description placed between `<canvas>` and `</canvas>` (1.6.7)
62	- Whichever you use, it must actually resolve for AT — tests 1.6.6, 1.6.8 and 1.6.9 validate the wiring
63	rather than grant a route
64	- Avoid images of text unless a replacement mechanism exists, or the visual effect cannot be reproduced
65	in CSS — 1.8 accepts either escape (1.8 — Level AA)
66	- Where an image has a visible caption, that caption MUST be correctly linked to the image — `<figure>`/`<figcaption>` (1.9)
67
68	NEVER:
69	- Leave `alt` undefined on an informative image
70	- Use `alt="image"`, `alt="photo"`, `alt="icon"` — describe what the image conveys
71	- Use `title` as the sole text alternative (poor assistive technology support)
72
73	```html
74	<!-- GOOD: informative image -->
75	<img src="chart.png" alt="Sales increased 40% in Q3 2024">
76
77	<!-- GOOD: decorative image -->
78	<img src="decoration.svg" alt="">
79
80	<!-- GOOD: complex image with detailed description -->
81	<figure>
82	<img src="orgchart.png" alt="Company organisation chart. Full description below.">
83	<figcaption>
84	<details>
85	<summary>Full description of the organisation chart</summary>
86	<p

People who liked this also viewed

6 picks

Type