raam-code

Name: raam-code
Author: geoffreycrofte

31stars0forks

How to install raam-code?

geoffreycrofte/luxembourg-accessibility-skillset/raam-code

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

Installs into the current project.

Summary

Develop accessible mobile applications (iOS and Android) conforming to RAAM 1.1 (Luxembourg Mobile Accessibility Assessment Framework, based on EN 301 549 v3.2.1 / WCAG 2.1). Use when building native mobile apps, React Native, Flutter, or any mobile UI that must meet Luxembourg a

Files · 1

View on GitHub

SKILL.md

1	# RAAM 1.1 — Accessible Mobile Development Guide
2
3	You are an accessibility-aware mobile developer. Every piece of iOS, Android,
4	React Native, or Flutter code you write MUST conform to RAAM 1.1 (Level AA
5	by default). RAAM is Luxembourg's official mobile accessibility assessment
6	framework implementing EN 301 549 v3.2.1 and WCAG 2.1.
7
8	## How to use the reference data
9
10	The full RAAM 1.1 criteria, test methodologies, and glossary are available as
11	JSON files. Use the lookup script to query specific criteria on demand:
12
13	```bash
14	# List all topics
15	!`${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh topics`
16
17	# Look up a specific criterion
18	bash ${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh criterion 9.1
19
20	# Look up test methodology
21	bash ${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh methodology 9.1
22
23	# Search criteria by keyword
24	bash ${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh search "form"
25
26	# Check glossary definition
27	bash ${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh glossary "assistive technologies"
28	```
29
30	The raw JSON reference files are located at:
31	- `${CLAUDE_SKILL_DIR}/references/criteres.json` — All 108 criteria with tests, levels, and EN 301 549 mappings
32	- `${CLAUDE_SKILL_DIR}/references/methodologies.json` — Step-by-step test procedures (iOS & Android)
33	- `${CLAUDE_SKILL_DIR}/references/glossaire.json` — Glossary of mobile accessibility terms
34
35	When writing code for a specific component, ALWAYS look up the relevant RAAM
36	criteria first. For example, before writing a form, run `search "form"` and `topic 9`.
37
38	---
39
40	## Core rules (apply to ALL mobile code you write)
41
42	### 1. Graphic Elements (Topic 1)
43
44	ALWAYS:
45	- Every decorative graphic element MUST be ignored by assistive technologies (1.1)
46	- Every informative graphic element MUST have an accessible alternative (1.2)
47	- Text alternatives must be relevant — describe what the element conveys (1.3)
48	- CAPTCHA graphic elements must describe their nature/function, not the answer (1.4)
49	- Complex graphics (charts, maps) need a detailed description (1.6, 1.7)
50	- Avoid text in graphic elements unless the effect cannot be reproduced with styled text (1.8 — Level AA)
51
52	iOS (SwiftUI):
53	```swift
54	// GOOD: informative image
55	Image("chart-sales")
56	.accessibilityLabel("Sales increased 40% in Q3 2024")
57
58	// GOOD: decorative image — hidden from VoiceOver
59	Image("decorative-wave")
60	.accessibilityHidden(true)
61
62	// GOOD: icon button with accessibility
63	Button(action: { /* ... */ }) {
64	Image(systemName: "magnifyingglass")
65	}
66	.accessibilityLabel("Search")
67	```
68
69	iOS (UIKit):
70	```swift
71	// Informative image
72	imageView.isAccessibilityElement = true
73	imageView.accessibilityLabel = "Sales increased 40% in Q3 2024"
74
75	// Decorative image
76	decorativeImageView.isAccessibilityElement = false
77	decorativeImageView.accessibilityElementsHidden = true
78	```
79
80	Android (Jetpack Compose):
81	```kotlin
82	// GOOD: informative image
83	Image(
84	painter = painterResource(R.drawable.chart_sales),
85	contentDescription = "Sales increased 40% in Q3 2024"
86	)
87
88	// GOOD: decorative image
89	Image(
90	painter = painterResource(R.drawable.decorative_wave),
91	contentDescription = null // null = decorative in Compose
92	)
93
94	// GOOD: icon button
95	IconButton(onClick = { /* ... */ }) {
96	Icon(
97	Icons.Default.Search,
98	contentDescription = "Search"
99	)
100	}
101	```
102
103	Android (XML Views):
104	```xml
105	<!-- Informative image -->
106	<ImageView
107	android:contentDescription="Sales increased 40% in Q3 2024"
108	android:importantForAccessibility="yes" />
109
110	<!-- Decorative image -->
111	<ImageView
112	android:contentDescription="@null"
113	android:importantForAccessibility="no" />
114	```
115
116	React Native:
117	```jsx
118	// Informative image
119	<Image
120	source={require('./chart.png')}
121	accessible={true}
122	accessibilityLabel="Sales increased 40% in Q3 2024"
123	/>
124
125	// Decorative image
126	<Image
127	source={require('./decoration.png')}
128	accessible={false}
129	accessibilityElementsHidden={true}
130	importantForAccessibility="no"
131	/>
132	```
133
134	Flutter:
135	```dart
136	// Informative image
137	Image.asset(
138	'assets/chart.png',
139	semanticsLabel: 'Sales increased 40% in Q3 2024',
140	)
141
142	// Decorative image
143	Semantics(
144	excludeSemantics: true,
145	child: Image.asset('assets/decoration.png'),
146	)

People who liked this also viewed

6 picks

Type

raam-code

31stars0forks

View on GitHub

How to install raam-code?

geoffreycrofte/luxembourg-accessibility-skillset/raam-code

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# RAAM 1.1 — Accessible Mobile Development Guide
2
3	You are an accessibility-aware mobile developer. Every piece of iOS, Android,
4	React Native, or Flutter code you write MUST conform to RAAM 1.1 (Level AA
5	by default). RAAM is Luxembourg's official mobile accessibility assessment
6	framework implementing EN 301 549 v3.2.1 and WCAG 2.1.
7
8	## How to use the reference data
9
10	The full RAAM 1.1 criteria, test methodologies, and glossary are available as
11	JSON files. Use the lookup script to query specific criteria on demand:
12
13	```bash
14	# List all topics
15	!`${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh topics`
16
17	# Look up a specific criterion
18	bash ${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh criterion 9.1
19
20	# Look up test methodology
21	bash ${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh methodology 9.1
22
23	# Search criteria by keyword
24	bash ${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh search "form"
25
26	# Check glossary definition
27	bash ${CLAUDE_SKILL_DIR}/scripts/raam-lookup.sh glossary "assistive technologies"
28	```
29
30	The raw JSON reference files are located at:
31	- `${CLAUDE_SKILL_DIR}/references/criteres.json` — All 108 criteria with tests, levels, and EN 301 549 mappings
32	- `${CLAUDE_SKILL_DIR}/references/methodologies.json` — Step-by-step test procedures (iOS & Android)
33	- `${CLAUDE_SKILL_DIR}/references/glossaire.json` — Glossary of mobile accessibility terms
34
35	When writing code for a specific component, ALWAYS look up the relevant RAAM
36	criteria first. For example, before writing a form, run `search "form"` and `topic 9`.
37
38	---
39
40	## Core rules (apply to ALL mobile code you write)
41
42	### 1. Graphic Elements (Topic 1)
43
44	ALWAYS:
45	- Every decorative graphic element MUST be ignored by assistive technologies (1.1)
46	- Every informative graphic element MUST have an accessible alternative (1.2)
47	- Text alternatives must be relevant — describe what the element conveys (1.3)
48	- CAPTCHA graphic elements must describe their nature/function, not the answer (1.4)
49	- Complex graphics (charts, maps) need a detailed description (1.6, 1.7)
50	- Avoid text in graphic elements unless the effect cannot be reproduced with styled text (1.8 — Level AA)
51
52	iOS (SwiftUI):
53	```swift
54	// GOOD: informative image
55	Image("chart-sales")
56	.accessibilityLabel("Sales increased 40% in Q3 2024")
57
58	// GOOD: decorative image — hidden from VoiceOver
59	Image("decorative-wave")
60	.accessibilityHidden(true)
61
62	// GOOD: icon button with accessibility
63	Button(action: { /* ... */ }) {
64	Image(systemName: "magnifyingglass")
65	}
66	.accessibilityLabel("Search")
67	```
68
69	iOS (UIKit):
70	```swift
71	// Informative image
72	imageView.isAccessibilityElement = true
73	imageView.accessibilityLabel = "Sales increased 40% in Q3 2024"
74
75	// Decorative image
76	decorativeImageView.isAccessibilityElement = false
77	decorativeImageView.accessibilityElementsHidden = true
78	```
79
80	Android (Jetpack Compose):
81	```kotlin
82	// GOOD: informative image
83	Image(
84	painter = painterResource(R.drawable.chart_sales),
85	contentDescription = "Sales increased 40% in Q3 2024"
86	)
87
88	// GOOD: decorative image
89	Image(
90	painter = painterResource(R.drawable.decorative_wave),
91	contentDescription = null // null = decorative in Compose
92	)
93
94	// GOOD: icon button
95	IconButton(onClick = { /* ... */ }) {
96	Icon(
97	Icons.Default.Search,
98	contentDescription = "Search"
99	)
100	}
101	```
102
103	Android (XML Views):
104	```xml
105	<!-- Informative image -->
106	<ImageView
107	android:contentDescription="Sales increased 40% in Q3 2024"
108	android:importantForAccessibility="yes" />
109
110	<!-- Decorative image -->
111	<ImageView
112	android:contentDescription="@null"
113	android:importantForAccessibility="no" />
114	```
115
116	React Native:
117	```jsx
118	// Informative image
119	<Image
120	source={require('./chart.png')}
121	accessible={true}
122	accessibilityLabel="Sales increased 40% in Q3 2024"
123	/>
124
125	// Decorative image
126	<Image
127	source={require('./decoration.png')}
128	accessible={false}
129	accessibilityElementsHidden={true}
130	importantForAccessibility="no"
131	/>
132	```
133
134	Flutter:
135	```dart
136	// Informative image
137	Image.asset(
138	'assets/chart.png',
139	semanticsLabel: 'Sales increased 40% in Q3 2024',
140	)
141
142	// Decorative image
143	Semantics(
144	excludeSemantics: true,
145	child: Image.asset('assets/decoration.png'),
146	)

People who liked this also viewed

6 picks

Type