[A11Y] [High] Form accessibility - Missing labels and ARIA attributes

[continue]

Accessibility Issue: Form Accessibility Problems

WCAG Level: A
Severity: High
Category: Form Accessibility

Issue Description

Form inputs lack proper accessibility attributes. The quiz options buttons are dynamically generated without proper ARIA roles and labels.

User Impact

• Affected Users: Blind/Low Vision users, Screen reader users
• Severity: Users cannot understand form purpose or make selections confidently

Violations Found

File: `index.html`

Lines: 38-40 (Setup form)

Current Code:
```html

Your name


```

Issues:

1. Labels are wrapped but missing explicit `for` attribute for better compatibility
2. Missing `aria-required="true"` on required fields
3. Placeholder used as example - acceptable but ensure label is clear

File: `app.js`

Lines: 143-154 (renderQuestion function)

Current Code:
```javascript
optionsWrap.innerHTML = "";
likertOptions.forEach((opt) => {
const button = document.createElement("button");
button.type = "button";
button.textContent = opt.label;
if (answers[idx] === opt.value) button.classList.add("active");
button.addEventListener("click", () => {
answers[idx] = opt.value;
renderQuestion();
});
optionsWrap.appendChild(button);
});
```

Issues:

1. Option buttons missing `role="radio"` and `aria-checked` for radio-like behavior
2. No `aria-label` connecting options to the question
3. Missing `aria-live` region for dynamic updates

---

Recommended Fix

For index.html:
```html
Your name

```

For app.js (renderQuestion function):
```javascript
optionsWrap.innerHTML = "";
optionsWrap.setAttribute("role", "radiogroup");
optionsWrap.setAttribute("aria-labelledby", "questionText");
likertOptions.forEach((opt) => {
const button = document.createElement("button");
button.type = "button";
button.setAttribute("role", "radio");
button.setAttribute("aria-checked", answers[idx] === opt.value ? "true" : "false");
button.textContent = opt.label;
if (answers[idx] === opt.value) button.classList.add("active");
button.addEventListener("click", () => {
answers[idx] = opt.value;
renderQuestion();
});
optionsWrap.appendChild(button);
});
```

Testing Instructions

1. Navigate forms with screen reader
2. Verify labels are announced
3. Test quiz options announce as radio buttons
4. Verify selection state is announced

Resources

• WCAG 1.3.1 Info and Relationships
• WCAG 4.1.2 Name, Role, Value

Acceptance Criteria

• All form inputs have proper labels
• Quiz options function as accessible radio group
• Screen reader announces selection state
• Automated tests pass (axe DevTools)

---