Accessibility Feedback Form
Creating accessible products is both a legal requirement and the right thing to do. This accessibility feedback form helps you gather insights directly from users with disabilities. Collect feedback on screen reader compatibility, keyboard navigation, color contrast, cognitive accessibility, and assistive technology support. The form itself is designed with accessibility best practices, featuring clear labels, logical tab order, and screen reader-friendly components.
Try the Form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
export function accessibilityFeedbackForm(form: FormTs) {
// Accessibility Feedback Form - Collect a11y feedback from users with disabilities
// Demonstrates: CheckboxList, RadioButton, MatrixQuestion, Slider, ThumbRating, conditional sections
// ============================================
// HEADER
// ============================================
form.addRow(row => {
row.addTextPanel('header', {
label: 'Accessibility Feedback',
computedValue: () => 'Help us make our website accessible to everyone. Your feedback directly improves our inclusive design.',
customStyles: {
background: 'linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%)',
color: 'white',
padding: '28px',
borderRadius: '12px',
textAlign: 'center'
}
});
});
// ============================================
// SECTION 1: Assistive Technology
// ============================================
const techSection = form.addSubform('assistiveTech', {
title: 'Your Assistive Technology'
});
techSection.addRow(row => {
row.addCheckboxList('assistiveTools', {
label: 'Which assistive technologies do you use? (Select all that apply)',
options: [
{ id: 'screen-reader', name: 'Screen Reader (JAWS, NVDA, VoiceOver)' },
{ id: 'magnifier', name: 'Screen Magnifier' },
{ id: 'voice-control', name: 'Voice Control (Dragon, Voice Control)' },
{ id: 'switch', name: 'Switch Device' },
{ id: 'keyboard-only', name: 'Keyboard Only (no mouse)' },
{ id: 'high-contrast', name: 'High Contrast Mode' },
{ id: 'text-to-speech', name: 'Text-to-Speech' },
{ id: 'other', name: 'Other Assistive Technology' }
],
orientation: 'vertical'
});
});
techSection.addRow(row => {
row.addTextbox('screenReaderName', {
label: 'Which screen reader do you primarily use?',
placeholder: 'e.g., JAWS, NVDA, VoiceOver, TalkBack...',
isVisible: () => {
const tools = techSection.checkboxList('assistiveTools')?.value() || [];
return tools.includes('screen-reader');
}
});
});
techSection.addRow(row => {
row.addTextbox('otherTech', {
label: 'Please describe your other assistive technology',
placeholder: 'Type of technology you use...',
isVisible: () => {
const tools = techSection.checkboxList('assistiveTools')?.value() || [];
return tools.includes('other');
}
});
});
// ============================================
// SECTION 2: Accessibility Rating
// ============================================
const ratingSection = form.addSubform('accessibilityRating', {
title: 'Accessibility Rating',
isVisible: () => (techSection.checkboxList('assistiveTools')?.value()?.length ?? 0) > 0,
customStyles: { backgroundColor: '#f0f9ff', padding: '16px', borderRadius: '8px' }
});
ratingSection.addRow(row => {
row.addMatrixQuestion('a11yAspects', {
label: 'Please rate the following accessibility aspects:',
rows: [
{ id: 'navigation', label: 'Keyboard Navigation', isRequired: true },
{ id: 'screen-reader', label: 'Screen Reader Compatibility', isRequired: true },
{ id: 'contrast', label: 'Color Contrast', isRequired: true },
{ id: 'text-size', label: 'Text Size & Readability', isRequired: true },
{ id: 'forms', label: 'Form Labels & Instructions', isRequired: false },
{ id: 'errors', label: 'Error Messages', isRequired: false },
{ id: 'media', label: 'Media (Images, Videos)', isRequired: false }
],
columns: [
{ id: 'unusable', label: 'Unusable' },
{ id: 'difficult', label: 'Difficult' },
{ id: 'ok', label: 'OK' },
{ id: 'good', label: 'Good' },
{ id: 'excellent', label: 'Excellent' },
{ id: 'na', label: 'N/A' }
],
striped: true,
fullWidth: true
});
});
ratingSection.addSpacer();
ratingSection.addRow(row => {
row.addSlider('overallAccessibility', {
label: 'Overall accessibility score (0 = completely inaccessible, 100 = fully accessible)',
min: 0,
max: 100,
step: 5,
defaultValue: 50,
showValue: true,
unit: '%'
});
});
// ============================================
// SECTION 3: Specific Barriers
// ============================================
const barriersSection = form.addSubform('barriers', {
title: 'Accessibility Barriers',
isVisible: () => {
const score = ratingSection.slider('overallAccessibility')?.value();
return score !== null && score !== undefined;
}
});
barriersSection.addRow(row => {
row.addCheckboxList('barrierTypes', {
label: 'What types of barriers did you encounter?',
options: [
{ id: 'focus', name: 'Focus not visible or hard to see' },
{ id: 'keyboard-trap', name: 'Keyboard trap (couldn\'t navigate away)' },
{ id: 'missing-labels', name: 'Missing or confusing labels' },
{ id: 'timing', name: 'Content disappeared too quickly' },
{ id: 'motion', name: 'Distracting animations or motion' },
{ id: 'contrast', name: 'Low color contrast' },
{ id: 'small-targets', name: 'Click/touch targets too small' },
{ id: 'complex-layout', name: 'Complex or confusing layout' },
{ id: 'pdf', name: 'Inaccessible PDFs or documents' },
{ id: 'captcha', name: 'CAPTCHA not accessible' }
],
orientation: 'vertical'
});
});
barriersSection.addSpacer();
barriersSection.addRow(row => {
row.addTextarea('barrierDescription', {
label: 'Please describe the accessibility issue you encountered',
placeholder: 'What were you trying to do? What happened? Which page or feature was affected?',
rows: 4,
autoExpand: true
});
});
barriersSection.addRow(row => {
row.addTextbox('pageUrl', {
label: 'Page URL where you encountered the issue (if known)',
placeholder: 'https://...'
});
});
// ============================================
// SECTION 4: Impact Assessment
// ============================================
const impactSection = form.addSubform('impact', {
title: 'Impact Assessment',
isVisible: () => {
const barriers = barriersSection.checkboxList('barrierTypes')?.value() || [];
return barriers.length > 0 || (barriersSection.textarea('barrierDescription')?.value()?.length ?? 0) > 0;
}
});
impactSection.addRow(row => {
row.addRadioButton('taskCompletion', {
label: 'Were you able to complete your task?',
options: [
{ id: 'yes', name: 'Yes, successfully' },
{ id: 'partial', name: 'Partially, with difficulty' },
{ id: 'workaround', name: 'Yes, but needed a workaround' },
{ id: 'no', name: 'No, I could not complete my task' }
],
orientation: 'vertical'
});
});
impactSection.addRow(row => {
row.addRadioButton('severity', {
label: 'How severe was this accessibility issue?',
options: [
{ id: 'critical', name: 'Critical - Completely blocked my use' },
{ id: 'major', name: 'Major - Significant difficulty' },
{ id: 'minor', name: 'Minor - Inconvenience but usable' },
{ id: 'cosmetic', name: 'Cosmetic - Small annoyance' }
],
orientation: 'vertical',
isVisible: () => {
const completion = impactSection.radioButton('taskCompletion')?.value();
return completion !== 'yes';
}
});
});
impactSection.addRow(row => {
row.addEmojiRating('frustration', {
label: 'How frustrated did this issue make you feel?',
preset: 'satisfaction',
size: 'lg',
showLabels: true,
alignment: 'center'
});
});
// ============================================
// SECTION 5: Suggestions
// ============================================
const suggestionsSection = form.addSubform('suggestions', {
title: 'Your Suggestions',
isVisible: () => impactSection.emojiRating('frustration')?.value() !== null
});
suggestionsSection.addRow(row => {
row.addTextarea('improvementSuggestion', {
label: 'How could we improve the accessibility of our website?',
placeholder: 'Your suggestions help us prioritize fixes...',
rows: 3,
autoExpand: true
});
});
suggestionsSection.addSpacer();
suggestionsSection.addRow(row => {
row.addThumbRating('wouldReturn', {
label: 'Would you use our website again despite the accessibility issues?',
showLabels: true,
upLabel: 'Yes',
downLabel: 'No',
alignment: 'center'
});
});
// ============================================
// SECTION 6: Contact Information
// ============================================
const contactSection = form.addSubform('contact', {
title: 'Follow-up (Optional)',
isVisible: () => suggestionsSection.thumbRating('wouldReturn')?.value() !== null
});
contactSection.addRow(row => {
row.addCheckbox('contactConsent', {
label: 'You may contact me for more details about my accessibility experience'
});
});
contactSection.addRow(row => {
row.addEmail('contactEmail', {
label: 'Your email address',
placeholder: 'email@example.com',
isVisible: () => contactSection.checkbox('contactConsent')?.value() === true,
isRequired: () => contactSection.checkbox('contactConsent')?.value() === true
});
});
contactSection.addRow(row => {
row.addCheckbox('betaTester', {
label: 'I\'d like to participate in accessibility testing of new features',
isVisible: () => contactSection.checkbox('contactConsent')?.value() === true
});
});
// ============================================
// SECTION 7: Summary
// ============================================
const summarySection = form.addSubform('summary', {
title: 'Feedback Summary',
isVisible: () => suggestionsSection.thumbRating('wouldReturn')?.value() !== null
});
summarySection.addRow(row => {
row.addTextPanel('summaryContent', {
computedValue: () => {
const tools = techSection.checkboxList('assistiveTools')?.value() || [];
const score = ratingSection.slider('overallAccessibility')?.value();
const barriers = barriersSection.checkboxList('barrierTypes')?.value() || [];
const completion = impactSection.radioButton('taskCompletion')?.value();
const severity = impactSection.radioButton('severity')?.value();
const wouldReturn = suggestionsSection.thumbRating('wouldReturn')?.value();
if (tools.length === 0) return '';
let summary = 'Accessibility Report\n';
summary += `${'═'.repeat(25)}\n\n`;
summary += `Assistive Tech: ${tools.length} tools\n`;
if (score !== null && score !== undefined) {
summary += `Overall Score: ${score}%\n`;
}
if (barriers.length > 0) {
summary += `Barriers Found: ${barriers.length}\n`;
}
if (completion) {
const completionLabels: Record<string, string> = {
'yes': 'Task completed',
'partial': 'Partial completion',
'workaround': 'Workaround needed',
'no': 'Task blocked'
};
summary += `Task Status: ${completionLabels[completion]}\n`;
}
if (severity) {
summary += `Severity: ${severity.charAt(0).toUpperCase()}${severity.slice(1)}\n`;
}
if (wouldReturn) {
summary += `\nWould Return: ${wouldReturn === 'up' ? 'Yes' : 'No'}\n`;
}
return summary;
},
customStyles: () => {
const score = ratingSection.slider('overallAccessibility')?.value() ?? 50;
const baseStyles = {
padding: '16px',
borderRadius: '8px',
whiteSpace: 'pre-wrap',
fontFamily: 'monospace',
fontSize: '14px'
};
if (score >= 70) {
return { ...baseStyles, backgroundColor: '#d1fae5', borderLeft: '4px solid #10b981' };
} else if (score >= 40) {
return { ...baseStyles, backgroundColor: '#fef3c7', borderLeft: '4px solid #f59e0b' };
}
return { ...baseStyles, backgroundColor: '#fee2e2', borderLeft: '4px solid #ef4444' };
}
});
});
// ============================================
// FORM CONFIGURATION
// ============================================
form.configureSubmitButton({
label: 'Submit Accessibility Feedback',
isVisible: () => suggestionsSection.thumbRating('wouldReturn')?.value() !== null
});
form.configureCompletionScreen({
type: 'text',
title: 'Thank You for Your Feedback!',
message: 'Your accessibility feedback is invaluable. We review every report and prioritize fixes based on impact. Together, we can make the web more inclusive for everyone.'
});
}
Frequently Asked Questions
Why is accessibility feedback important?
Direct feedback from users with disabilities reveals real-world barriers that automated testing misses. It helps prioritize fixes that matter most and demonstrates your commitment to inclusion.
What are common accessibility barriers?
Common issues include: missing alt text on images, poor color contrast, keyboard navigation problems, unlabeled form fields, auto-playing media, and PDF documents that aren't screen reader accessible.
How do I make my feedback form accessible?
This template follows WCAG 2.1 guidelines: clear labels, logical focus order, sufficient color contrast, error messages that explain issues, and compatibility with screen readers and voice control.
Should I ask about specific disabilities?
Ask about the tools people use (screen readers, magnifiers, etc.) rather than medical conditions. This is more respectful and provides actionable technical information.
How often should I review accessibility feedback?
Review feedback at least weekly. Critical barriers should be addressed immediately. Track trends over time and include accessibility in your regular product updates.