codingwithagent 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/LICENSE +21 -21
- package/README.md +131 -37
- package/bin/init.js +257 -257
- package/package.json +56 -56
- package/templates/accessibility/.cursorrules +342 -342
- package/templates/accessibility/README.md +47 -47
- package/templates/antigravity/accessibility/.agent/rules/accessibility.md +501 -501
- package/templates/antigravity/accessibility/.agent/rules/aria-patterns.md +568 -568
- package/templates/antigravity/accessibility/.agent/rules/wcag-standard.md +225 -225
- package/templates/antigravity/accessibility/README.md +42 -42
- package/templates/antigravity/minimal/.agent/rules/accessibility.md +53 -53
- package/templates/antigravity/minimal/.agent/rules/code-quality.md +86 -86
- package/templates/antigravity/minimal/.agent/rules/react-components.md +164 -164
- package/templates/antigravity/minimal/README.md +34 -34
- package/templates/antigravity/standard/.agent/rules/accessibility.md +98 -98
- package/templates/antigravity/standard/.agent/rules/code-quality.md +166 -166
- package/templates/antigravity/standard/.agent/rules/pull-request-review.md +192 -192
- package/templates/antigravity/standard/.agent/rules/react-components.md +204 -204
- package/templates/antigravity/standard/.agent/rules/testing.md +197 -197
- package/templates/antigravity/standard/README.md +39 -39
- package/templates/antigravity/strict/.agent/README.md +46 -46
- package/templates/antigravity/strict/.agent/rules/accessibility.md +199 -199
- package/templates/antigravity/strict/.agent/rules/code-quality.md +268 -268
- package/templates/antigravity/strict/.agent/rules/pull-request-review.md +114 -114
- package/templates/antigravity/strict/.agent/rules/react-components.md +423 -423
- package/templates/antigravity/strict/.agent/rules/security.md +483 -483
- package/templates/antigravity/strict/.agent/rules/testing.md +280 -280
- package/templates/minimal/.cursorrules +48 -48
- package/templates/minimal/README.md +40 -40
- package/templates/standard/.cursorrules +184 -184
- package/templates/standard/README.md +43 -43
- package/templates/strict/.cursorrules +227 -227
- package/templates/strict/README.md +47 -47
|
@@ -1,225 +1,225 @@
|
|
|
1
|
-
---
|
|
2
|
-
trigger: always_on
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# WCAG 2.1 Standards Quick Reference
|
|
6
|
-
|
|
7
|
-
## Level A (Required)
|
|
8
|
-
|
|
9
|
-
### 1.1.1 Non-text Content
|
|
10
|
-
|
|
11
|
-
All images have alt text (or alt="" if decorative)
|
|
12
|
-
|
|
13
|
-
### 1.2.1 Audio/Video-only
|
|
14
|
-
|
|
15
|
-
Provide transcripts or text alternatives
|
|
16
|
-
|
|
17
|
-
### 1.2.2 Captions (Prerecorded)
|
|
18
|
-
|
|
19
|
-
All videos have captions
|
|
20
|
-
|
|
21
|
-
### 1.2.3 Audio Description
|
|
22
|
-
|
|
23
|
-
Provide audio descriptions for video
|
|
24
|
-
|
|
25
|
-
### 1.3.1 Info and Relationships
|
|
26
|
-
|
|
27
|
-
Use semantic HTML (headings, lists, tables, labels)
|
|
28
|
-
|
|
29
|
-
### 1.3.2 Meaningful Sequence
|
|
30
|
-
|
|
31
|
-
Reading order matches visual order
|
|
32
|
-
|
|
33
|
-
### 1.3.3 Sensory Characteristics
|
|
34
|
-
|
|
35
|
-
Don't rely on shape, size, location, or color alone
|
|
36
|
-
|
|
37
|
-
### 1.4.1 Use of Color
|
|
38
|
-
|
|
39
|
-
Don't use color alone to convey information
|
|
40
|
-
|
|
41
|
-
### 1.4.2 Audio Control
|
|
42
|
-
|
|
43
|
-
Provide pause/stop for auto-playing audio
|
|
44
|
-
|
|
45
|
-
### 2.1.1 Keyboard
|
|
46
|
-
|
|
47
|
-
All functionality available via keyboard
|
|
48
|
-
|
|
49
|
-
### 2.1.2 No Keyboard Trap
|
|
50
|
-
|
|
51
|
-
Users can navigate away from all components
|
|
52
|
-
|
|
53
|
-
### 2.1.4 Character Key Shortcuts
|
|
54
|
-
|
|
55
|
-
Single-key shortcuts can be turned off/remapped
|
|
56
|
-
|
|
57
|
-
### 2.2.1 Timing Adjustable
|
|
58
|
-
|
|
59
|
-
Users can turn off, adjust, or extend time limits
|
|
60
|
-
|
|
61
|
-
### 2.2.2 Pause, Stop, Hide
|
|
62
|
-
|
|
63
|
-
Control moving, blinking, or scrolling content
|
|
64
|
-
|
|
65
|
-
### 2.3.1 Three Flashes
|
|
66
|
-
|
|
67
|
-
Nothing flashes more than 3 times per second
|
|
68
|
-
|
|
69
|
-
### 2.4.1 Bypass Blocks
|
|
70
|
-
|
|
71
|
-
Skip links or landmarks to bypass repeated content
|
|
72
|
-
|
|
73
|
-
### 2.4.2 Page Titled
|
|
74
|
-
|
|
75
|
-
Pages have descriptive titles
|
|
76
|
-
|
|
77
|
-
### 2.4.3 Focus Order
|
|
78
|
-
|
|
79
|
-
Focus order is logical
|
|
80
|
-
|
|
81
|
-
### 2.4.4 Link Purpose
|
|
82
|
-
|
|
83
|
-
Link text describes destination
|
|
84
|
-
|
|
85
|
-
### 2.5.1 Pointer Gestures
|
|
86
|
-
|
|
87
|
-
Multipoint/path gestures have single-pointer alternative
|
|
88
|
-
|
|
89
|
-
### 2.5.2 Pointer Cancellation
|
|
90
|
-
|
|
91
|
-
Click functions trigger on up-event
|
|
92
|
-
|
|
93
|
-
### 2.5.3 Label in Name
|
|
94
|
-
|
|
95
|
-
Visible label matches accessible name
|
|
96
|
-
|
|
97
|
-
### 2.5.4 Motion Actuation
|
|
98
|
-
|
|
99
|
-
Motion-triggered functions have UI alternative
|
|
100
|
-
|
|
101
|
-
### 3.1.1 Language of Page
|
|
102
|
-
|
|
103
|
-
`<html lang="en">`
|
|
104
|
-
|
|
105
|
-
### 3.2.1 On Focus
|
|
106
|
-
|
|
107
|
-
Focus doesn't trigger unexpected changes
|
|
108
|
-
|
|
109
|
-
### 3.2.2 On Input
|
|
110
|
-
|
|
111
|
-
Input doesn't trigger unexpected changes
|
|
112
|
-
|
|
113
|
-
### 3.3.1 Error Identification
|
|
114
|
-
|
|
115
|
-
Errors are identified in text
|
|
116
|
-
|
|
117
|
-
### 3.3.2 Labels or Instructions
|
|
118
|
-
|
|
119
|
-
Form fields have labels
|
|
120
|
-
|
|
121
|
-
### 4.1.1 Parsing
|
|
122
|
-
|
|
123
|
-
HTML validates (no duplicate IDs, proper nesting)
|
|
124
|
-
|
|
125
|
-
### 4.1.2 Name, Role, Value
|
|
126
|
-
|
|
127
|
-
All UI components have accessible name, role, value
|
|
128
|
-
|
|
129
|
-
### 4.1.3 Status Messages
|
|
130
|
-
|
|
131
|
-
Status updates announced to screen readers
|
|
132
|
-
|
|
133
|
-
## Level AA (Required)
|
|
134
|
-
|
|
135
|
-
### 1.2.4 Captions (Live)
|
|
136
|
-
|
|
137
|
-
Live audio has captions
|
|
138
|
-
|
|
139
|
-
### 1.2.5 Audio Description
|
|
140
|
-
|
|
141
|
-
All videos have audio descriptions
|
|
142
|
-
|
|
143
|
-
### 1.3.4 Orientation
|
|
144
|
-
|
|
145
|
-
Works in portrait and landscape
|
|
146
|
-
|
|
147
|
-
### 1.3.5 Identify Input Purpose
|
|
148
|
-
|
|
149
|
-
Input fields have autocomplete attributes
|
|
150
|
-
|
|
151
|
-
### 1.4.3 Contrast (Minimum)
|
|
152
|
-
|
|
153
|
-
- Text: 4.5:1 contrast
|
|
154
|
-
- Large text: 3:1 contrast
|
|
155
|
-
|
|
156
|
-
### 1.4.4 Resize Text
|
|
157
|
-
|
|
158
|
-
Text resizes to 200% without loss of content
|
|
159
|
-
|
|
160
|
-
### 1.4.5 Images of Text
|
|
161
|
-
|
|
162
|
-
Avoid images of text (use real text)
|
|
163
|
-
|
|
164
|
-
### 1.4.10 Reflow
|
|
165
|
-
|
|
166
|
-
Content reflows at 320px without horizontal scroll
|
|
167
|
-
|
|
168
|
-
### 1.4.11 Non-text Contrast
|
|
169
|
-
|
|
170
|
-
UI components have 3:1 contrast
|
|
171
|
-
|
|
172
|
-
### 1.4.12 Text Spacing
|
|
173
|
-
|
|
174
|
-
Adjustable text spacing without loss of content
|
|
175
|
-
|
|
176
|
-
### 1.4.13 Content on Hover/Focus
|
|
177
|
-
|
|
178
|
-
Hoverable, dismissible, persistent
|
|
179
|
-
|
|
180
|
-
### 2.4.5 Multiple Ways
|
|
181
|
-
|
|
182
|
-
Multiple ways to find pages (menu, search, sitemap)
|
|
183
|
-
|
|
184
|
-
### 2.4.6 Headings and Labels
|
|
185
|
-
|
|
186
|
-
Headings and labels are descriptive
|
|
187
|
-
|
|
188
|
-
### 2.4.7 Focus Visible
|
|
189
|
-
|
|
190
|
-
Keyboard focus indicator is visible
|
|
191
|
-
|
|
192
|
-
### 3.1.2 Language of Parts
|
|
193
|
-
|
|
194
|
-
Language changes marked with lang attribute
|
|
195
|
-
|
|
196
|
-
### 3.2.3 Consistent Navigation
|
|
197
|
-
|
|
198
|
-
Navigation is consistent across pages
|
|
199
|
-
|
|
200
|
-
### 3.2.4 Consistent Identification
|
|
201
|
-
|
|
202
|
-
Components with same function have same labels
|
|
203
|
-
|
|
204
|
-
### 3.3.3 Error Suggestion
|
|
205
|
-
|
|
206
|
-
Provide suggestions for fixing errors
|
|
207
|
-
|
|
208
|
-
### 3.3.4 Error Prevention
|
|
209
|
-
|
|
210
|
-
Confirm/undo for legal/financial/data submissions
|
|
211
|
-
|
|
212
|
-
## Quick Testing Checklist
|
|
213
|
-
|
|
214
|
-
- [ ] All images have alt text
|
|
215
|
-
- [ ] Keyboard navigation works
|
|
216
|
-
- [ ] Focus indicators visible
|
|
217
|
-
- [ ] Color contrast 4.5:1+
|
|
218
|
-
- [ ] Forms have labels
|
|
219
|
-
- [ ] Headings in order (h1→h2→h3)
|
|
220
|
-
- [ ] Screen reader tested
|
|
221
|
-
- [ ] Works at 200% zoom
|
|
222
|
-
- [ ] Touch targets 44x44px
|
|
223
|
-
- [ ] No auto-playing audio/video
|
|
224
|
-
- [ ] Status messages announced
|
|
225
|
-
- [ ] Valid HTML (W3C validator)
|
|
1
|
+
---
|
|
2
|
+
trigger: always_on
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# WCAG 2.1 Standards Quick Reference
|
|
6
|
+
|
|
7
|
+
## Level A (Required)
|
|
8
|
+
|
|
9
|
+
### 1.1.1 Non-text Content
|
|
10
|
+
|
|
11
|
+
All images have alt text (or alt="" if decorative)
|
|
12
|
+
|
|
13
|
+
### 1.2.1 Audio/Video-only
|
|
14
|
+
|
|
15
|
+
Provide transcripts or text alternatives
|
|
16
|
+
|
|
17
|
+
### 1.2.2 Captions (Prerecorded)
|
|
18
|
+
|
|
19
|
+
All videos have captions
|
|
20
|
+
|
|
21
|
+
### 1.2.3 Audio Description
|
|
22
|
+
|
|
23
|
+
Provide audio descriptions for video
|
|
24
|
+
|
|
25
|
+
### 1.3.1 Info and Relationships
|
|
26
|
+
|
|
27
|
+
Use semantic HTML (headings, lists, tables, labels)
|
|
28
|
+
|
|
29
|
+
### 1.3.2 Meaningful Sequence
|
|
30
|
+
|
|
31
|
+
Reading order matches visual order
|
|
32
|
+
|
|
33
|
+
### 1.3.3 Sensory Characteristics
|
|
34
|
+
|
|
35
|
+
Don't rely on shape, size, location, or color alone
|
|
36
|
+
|
|
37
|
+
### 1.4.1 Use of Color
|
|
38
|
+
|
|
39
|
+
Don't use color alone to convey information
|
|
40
|
+
|
|
41
|
+
### 1.4.2 Audio Control
|
|
42
|
+
|
|
43
|
+
Provide pause/stop for auto-playing audio
|
|
44
|
+
|
|
45
|
+
### 2.1.1 Keyboard
|
|
46
|
+
|
|
47
|
+
All functionality available via keyboard
|
|
48
|
+
|
|
49
|
+
### 2.1.2 No Keyboard Trap
|
|
50
|
+
|
|
51
|
+
Users can navigate away from all components
|
|
52
|
+
|
|
53
|
+
### 2.1.4 Character Key Shortcuts
|
|
54
|
+
|
|
55
|
+
Single-key shortcuts can be turned off/remapped
|
|
56
|
+
|
|
57
|
+
### 2.2.1 Timing Adjustable
|
|
58
|
+
|
|
59
|
+
Users can turn off, adjust, or extend time limits
|
|
60
|
+
|
|
61
|
+
### 2.2.2 Pause, Stop, Hide
|
|
62
|
+
|
|
63
|
+
Control moving, blinking, or scrolling content
|
|
64
|
+
|
|
65
|
+
### 2.3.1 Three Flashes
|
|
66
|
+
|
|
67
|
+
Nothing flashes more than 3 times per second
|
|
68
|
+
|
|
69
|
+
### 2.4.1 Bypass Blocks
|
|
70
|
+
|
|
71
|
+
Skip links or landmarks to bypass repeated content
|
|
72
|
+
|
|
73
|
+
### 2.4.2 Page Titled
|
|
74
|
+
|
|
75
|
+
Pages have descriptive titles
|
|
76
|
+
|
|
77
|
+
### 2.4.3 Focus Order
|
|
78
|
+
|
|
79
|
+
Focus order is logical
|
|
80
|
+
|
|
81
|
+
### 2.4.4 Link Purpose
|
|
82
|
+
|
|
83
|
+
Link text describes destination
|
|
84
|
+
|
|
85
|
+
### 2.5.1 Pointer Gestures
|
|
86
|
+
|
|
87
|
+
Multipoint/path gestures have single-pointer alternative
|
|
88
|
+
|
|
89
|
+
### 2.5.2 Pointer Cancellation
|
|
90
|
+
|
|
91
|
+
Click functions trigger on up-event
|
|
92
|
+
|
|
93
|
+
### 2.5.3 Label in Name
|
|
94
|
+
|
|
95
|
+
Visible label matches accessible name
|
|
96
|
+
|
|
97
|
+
### 2.5.4 Motion Actuation
|
|
98
|
+
|
|
99
|
+
Motion-triggered functions have UI alternative
|
|
100
|
+
|
|
101
|
+
### 3.1.1 Language of Page
|
|
102
|
+
|
|
103
|
+
`<html lang="en">`
|
|
104
|
+
|
|
105
|
+
### 3.2.1 On Focus
|
|
106
|
+
|
|
107
|
+
Focus doesn't trigger unexpected changes
|
|
108
|
+
|
|
109
|
+
### 3.2.2 On Input
|
|
110
|
+
|
|
111
|
+
Input doesn't trigger unexpected changes
|
|
112
|
+
|
|
113
|
+
### 3.3.1 Error Identification
|
|
114
|
+
|
|
115
|
+
Errors are identified in text
|
|
116
|
+
|
|
117
|
+
### 3.3.2 Labels or Instructions
|
|
118
|
+
|
|
119
|
+
Form fields have labels
|
|
120
|
+
|
|
121
|
+
### 4.1.1 Parsing
|
|
122
|
+
|
|
123
|
+
HTML validates (no duplicate IDs, proper nesting)
|
|
124
|
+
|
|
125
|
+
### 4.1.2 Name, Role, Value
|
|
126
|
+
|
|
127
|
+
All UI components have accessible name, role, value
|
|
128
|
+
|
|
129
|
+
### 4.1.3 Status Messages
|
|
130
|
+
|
|
131
|
+
Status updates announced to screen readers
|
|
132
|
+
|
|
133
|
+
## Level AA (Required)
|
|
134
|
+
|
|
135
|
+
### 1.2.4 Captions (Live)
|
|
136
|
+
|
|
137
|
+
Live audio has captions
|
|
138
|
+
|
|
139
|
+
### 1.2.5 Audio Description
|
|
140
|
+
|
|
141
|
+
All videos have audio descriptions
|
|
142
|
+
|
|
143
|
+
### 1.3.4 Orientation
|
|
144
|
+
|
|
145
|
+
Works in portrait and landscape
|
|
146
|
+
|
|
147
|
+
### 1.3.5 Identify Input Purpose
|
|
148
|
+
|
|
149
|
+
Input fields have autocomplete attributes
|
|
150
|
+
|
|
151
|
+
### 1.4.3 Contrast (Minimum)
|
|
152
|
+
|
|
153
|
+
- Text: 4.5:1 contrast
|
|
154
|
+
- Large text: 3:1 contrast
|
|
155
|
+
|
|
156
|
+
### 1.4.4 Resize Text
|
|
157
|
+
|
|
158
|
+
Text resizes to 200% without loss of content
|
|
159
|
+
|
|
160
|
+
### 1.4.5 Images of Text
|
|
161
|
+
|
|
162
|
+
Avoid images of text (use real text)
|
|
163
|
+
|
|
164
|
+
### 1.4.10 Reflow
|
|
165
|
+
|
|
166
|
+
Content reflows at 320px without horizontal scroll
|
|
167
|
+
|
|
168
|
+
### 1.4.11 Non-text Contrast
|
|
169
|
+
|
|
170
|
+
UI components have 3:1 contrast
|
|
171
|
+
|
|
172
|
+
### 1.4.12 Text Spacing
|
|
173
|
+
|
|
174
|
+
Adjustable text spacing without loss of content
|
|
175
|
+
|
|
176
|
+
### 1.4.13 Content on Hover/Focus
|
|
177
|
+
|
|
178
|
+
Hoverable, dismissible, persistent
|
|
179
|
+
|
|
180
|
+
### 2.4.5 Multiple Ways
|
|
181
|
+
|
|
182
|
+
Multiple ways to find pages (menu, search, sitemap)
|
|
183
|
+
|
|
184
|
+
### 2.4.6 Headings and Labels
|
|
185
|
+
|
|
186
|
+
Headings and labels are descriptive
|
|
187
|
+
|
|
188
|
+
### 2.4.7 Focus Visible
|
|
189
|
+
|
|
190
|
+
Keyboard focus indicator is visible
|
|
191
|
+
|
|
192
|
+
### 3.1.2 Language of Parts
|
|
193
|
+
|
|
194
|
+
Language changes marked with lang attribute
|
|
195
|
+
|
|
196
|
+
### 3.2.3 Consistent Navigation
|
|
197
|
+
|
|
198
|
+
Navigation is consistent across pages
|
|
199
|
+
|
|
200
|
+
### 3.2.4 Consistent Identification
|
|
201
|
+
|
|
202
|
+
Components with same function have same labels
|
|
203
|
+
|
|
204
|
+
### 3.3.3 Error Suggestion
|
|
205
|
+
|
|
206
|
+
Provide suggestions for fixing errors
|
|
207
|
+
|
|
208
|
+
### 3.3.4 Error Prevention
|
|
209
|
+
|
|
210
|
+
Confirm/undo for legal/financial/data submissions
|
|
211
|
+
|
|
212
|
+
## Quick Testing Checklist
|
|
213
|
+
|
|
214
|
+
- [ ] All images have alt text
|
|
215
|
+
- [ ] Keyboard navigation works
|
|
216
|
+
- [ ] Focus indicators visible
|
|
217
|
+
- [ ] Color contrast 4.5:1+
|
|
218
|
+
- [ ] Forms have labels
|
|
219
|
+
- [ ] Headings in order (h1→h2→h3)
|
|
220
|
+
- [ ] Screen reader tested
|
|
221
|
+
- [ ] Works at 200% zoom
|
|
222
|
+
- [ ] Touch targets 44x44px
|
|
223
|
+
- [ ] No auto-playing audio/video
|
|
224
|
+
- [ ] Status messages announced
|
|
225
|
+
- [ ] Valid HTML (W3C validator)
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
# Antigravity - Accessibility Profile
|
|
2
|
-
|
|
3
|
-
Deep accessibility focus with WCAG 2.1+ priority.
|
|
4
|
-
|
|
5
|
-
## What's Included
|
|
6
|
-
|
|
7
|
-
3 comprehensive accessibility rule files:
|
|
8
|
-
|
|
9
|
-
- `accessibility.md` - POUR principles, testing requirements
|
|
10
|
-
- `wcag-standards.md` - WCAG 2.1 Level A/AA reference
|
|
11
|
-
- `aria-patterns.md` - Common ARIA patterns and best practices
|
|
12
|
-
|
|
13
|
-
## Installation
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npx codingwithagent init
|
|
17
|
-
# Select tool: 3. Antigravity
|
|
18
|
-
# Select profile: 4. Accessibility
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Files created
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
.agent/rules/
|
|
25
|
-
├── accessibility.md
|
|
26
|
-
├── wcag-standards.md
|
|
27
|
-
└── aria-patterns.md
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
## Testing Requirements
|
|
31
|
-
|
|
32
|
-
- Screen reader testing mandatory
|
|
33
|
-
- Keyboard navigation required
|
|
34
|
-
- Color contrast verification
|
|
35
|
-
- Lighthouse accessibility: 100
|
|
36
|
-
|
|
37
|
-
## Best For
|
|
38
|
-
|
|
39
|
-
- Government projects
|
|
40
|
-
- Healthcare applications
|
|
41
|
-
- Educational platforms
|
|
42
|
-
- WCAG compliance required
|
|
1
|
+
# Antigravity - Accessibility Profile
|
|
2
|
+
|
|
3
|
+
Deep accessibility focus with WCAG 2.1+ priority.
|
|
4
|
+
|
|
5
|
+
## What's Included
|
|
6
|
+
|
|
7
|
+
3 comprehensive accessibility rule files:
|
|
8
|
+
|
|
9
|
+
- `accessibility.md` - POUR principles, testing requirements
|
|
10
|
+
- `wcag-standards.md` - WCAG 2.1 Level A/AA reference
|
|
11
|
+
- `aria-patterns.md` - Common ARIA patterns and best practices
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npx codingwithagent init
|
|
17
|
+
# Select tool: 3. Antigravity
|
|
18
|
+
# Select profile: 4. Accessibility
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Files created
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
.agent/rules/
|
|
25
|
+
├── accessibility.md
|
|
26
|
+
├── wcag-standards.md
|
|
27
|
+
└── aria-patterns.md
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Testing Requirements
|
|
31
|
+
|
|
32
|
+
- Screen reader testing mandatory
|
|
33
|
+
- Keyboard navigation required
|
|
34
|
+
- Color contrast verification
|
|
35
|
+
- Lighthouse accessibility: 100
|
|
36
|
+
|
|
37
|
+
## Best For
|
|
38
|
+
|
|
39
|
+
- Government projects
|
|
40
|
+
- Healthcare applications
|
|
41
|
+
- Educational platforms
|
|
42
|
+
- WCAG compliance required
|
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
---
|
|
2
|
-
trigger: always_on
|
|
3
|
-
---
|
|
4
|
-
|
|
5
|
-
# Accessibility Basics
|
|
6
|
-
|
|
7
|
-
## Core Requirements
|
|
8
|
-
|
|
9
|
-
- All interactive elements must be keyboard accessible (Tab, Enter, Space)
|
|
10
|
-
- Provide alt text for images that convey information
|
|
11
|
-
- Use semantic HTML elements (button, nav, main, header, footer)
|
|
12
|
-
- Minimum color contrast: 4.5:1 for normal text
|
|
13
|
-
|
|
14
|
-
## Keyboard Navigation
|
|
15
|
-
|
|
16
|
-
- Support Tab key for navigation
|
|
17
|
-
- Support Enter/Space for activation
|
|
18
|
-
- Visible focus indicators required
|
|
19
|
-
- Never use `tabIndex > 0`
|
|
20
|
-
|
|
21
|
-
## Screen Readers
|
|
22
|
-
|
|
23
|
-
- Use semantic HTML first (button instead of div with onClick)
|
|
24
|
-
- Provide alt text for meaningful images
|
|
25
|
-
- Use alt="" for decorative images
|
|
26
|
-
- Form fields must have associated labels
|
|
27
|
-
|
|
28
|
-
## Color and Contrast
|
|
29
|
-
|
|
30
|
-
- Text must have 4.5:1 contrast ratio minimum
|
|
31
|
-
- Don't use color alone to convey information
|
|
32
|
-
- Add icons or text labels in addition to color
|
|
33
|
-
|
|
34
|
-
## Forms
|
|
35
|
-
|
|
36
|
-
- All inputs must have labels
|
|
37
|
-
- Indicate required fields clearly
|
|
38
|
-
- Provide helpful error messages
|
|
39
|
-
- Support keyboard navigation
|
|
40
|
-
|
|
41
|
-
## Testing
|
|
42
|
-
|
|
43
|
-
- Test with keyboard only (no mouse)
|
|
44
|
-
- Use browser accessibility tools (Axe, Lighthouse)
|
|
45
|
-
- Check color contrast with analyzer tool
|
|
46
|
-
|
|
47
|
-
## Quick Checklist
|
|
48
|
-
|
|
49
|
-
- [ ] Can I navigate with keyboard only?
|
|
50
|
-
- [ ] Do all images have alt text?
|
|
51
|
-
- [ ] Are buttons actually button elements?
|
|
52
|
-
- [ ] Do form fields have labels?
|
|
53
|
-
- [ ] Is color contrast sufficient?
|
|
1
|
+
---
|
|
2
|
+
trigger: always_on
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Accessibility Basics
|
|
6
|
+
|
|
7
|
+
## Core Requirements
|
|
8
|
+
|
|
9
|
+
- All interactive elements must be keyboard accessible (Tab, Enter, Space)
|
|
10
|
+
- Provide alt text for images that convey information
|
|
11
|
+
- Use semantic HTML elements (button, nav, main, header, footer)
|
|
12
|
+
- Minimum color contrast: 4.5:1 for normal text
|
|
13
|
+
|
|
14
|
+
## Keyboard Navigation
|
|
15
|
+
|
|
16
|
+
- Support Tab key for navigation
|
|
17
|
+
- Support Enter/Space for activation
|
|
18
|
+
- Visible focus indicators required
|
|
19
|
+
- Never use `tabIndex > 0`
|
|
20
|
+
|
|
21
|
+
## Screen Readers
|
|
22
|
+
|
|
23
|
+
- Use semantic HTML first (button instead of div with onClick)
|
|
24
|
+
- Provide alt text for meaningful images
|
|
25
|
+
- Use alt="" for decorative images
|
|
26
|
+
- Form fields must have associated labels
|
|
27
|
+
|
|
28
|
+
## Color and Contrast
|
|
29
|
+
|
|
30
|
+
- Text must have 4.5:1 contrast ratio minimum
|
|
31
|
+
- Don't use color alone to convey information
|
|
32
|
+
- Add icons or text labels in addition to color
|
|
33
|
+
|
|
34
|
+
## Forms
|
|
35
|
+
|
|
36
|
+
- All inputs must have labels
|
|
37
|
+
- Indicate required fields clearly
|
|
38
|
+
- Provide helpful error messages
|
|
39
|
+
- Support keyboard navigation
|
|
40
|
+
|
|
41
|
+
## Testing
|
|
42
|
+
|
|
43
|
+
- Test with keyboard only (no mouse)
|
|
44
|
+
- Use browser accessibility tools (Axe, Lighthouse)
|
|
45
|
+
- Check color contrast with analyzer tool
|
|
46
|
+
|
|
47
|
+
## Quick Checklist
|
|
48
|
+
|
|
49
|
+
- [ ] Can I navigate with keyboard only?
|
|
50
|
+
- [ ] Do all images have alt text?
|
|
51
|
+
- [ ] Are buttons actually button elements?
|
|
52
|
+
- [ ] Do form fields have labels?
|
|
53
|
+
- [ ] Is color contrast sufficient?
|