1## VoiceOver Testing Checklist
 2
 3### Page Load
 4
 5- [ ] Page title announced
 6- [ ] Main landmark found
 7- [ ] Skip link works
 8
 9### Navigation
10
11- [ ] All headings discoverable via rotor
12- [ ] Heading levels logical (H1 → H2 → H3)
13- [ ] Landmarks properly labeled
14- [ ] Skip links functional
15
16### Links & Buttons
17
18- [ ] Link purpose clear
19- [ ] Button actions described
20- [ ] New window/tab announced
21
22### Forms
23
24- [ ] All labels read with inputs
25- [ ] Required fields announced
26- [ ] Error messages read
27- [ ] Instructions available
28- [ ] Focus moves to errors
29
30### Dynamic Content
31
32- [ ] Alerts announced immediately
33- [ ] Loading states communicated
34- [ ] Content updates announced
35- [ ] Modals trap focus correctly
36
37### Tables
38
39- [ ] Headers associated with cells
40- [ ] Table navigation works
41- [ ] Complex tables have captions

 1<!-- Issue: Button not announcing purpose -->
 2<button><svg>...</svg></button>
 3
 4<!-- Fix -->
 5<button aria-label="Close dialog"><svg aria-hidden="true">...</svg></button>
 6
 7<!-- Issue: Dynamic content not announced -->
 8<div id="results">New results loaded</div>
 9
10<!-- Fix -->
11<div id="results" role="status" aria-live="polite">New results loaded</div>
12
13<!-- Issue: Form error not read -->
14<input type="email" />
15<span class="error">Invalid email</span>
16
17<!-- Fix -->
18<input type="email" aria-invalid="true" aria-describedby="email-error" />
19<span id="email-error" role="alert">Invalid email</span>

 1## NVDA Test Script
 2
 3### Initial Load
 4
 51. Navigate to page
 62. Let page finish loading
 73. Press Insert + Down to read all
 84. Note: Page title, main content identified?
 9
10### Landmark Navigation
11
121. Press D repeatedly
132. Check: All main areas reachable?
143. Check: Landmarks properly labeled?
15
16### Heading Navigation
17
181. Press Insert + F7 → Headings
192. Check: Logical heading structure?
203. Press H to navigate headings
214. Check: All sections discoverable?
22
23### Form Testing
24
251. Press F to find first form field
262. Check: Label read?
273. Fill in invalid data
284. Submit form
295. Check: Errors announced?
306. Check: Focus moved to error?
31
32### Interactive Elements
33
341. Tab through all interactive elements
352. Check: Each announces role and state
363. Activate buttons with Enter/Space
374. Check: Result announced?
38
39### Dynamic Content
40
411. Trigger content update
422. Check: Change announced?
433. Open modal
444. Check: Focus trapped?
455. Close modal
466. Check: Focus returns?

 1<!-- Accessible modal structure -->
 2<div
 3  role="dialog"
 4  aria-modal="true"
 5  aria-labelledby="dialog-title"
 6  aria-describedby="dialog-desc"
 7>
 8  <h2 id="dialog-title">Confirm Delete</h2>
 9  <p id="dialog-desc">This action cannot be undone.</p>
10  <button>Cancel</button>
11  <button>Delete</button>
12</div>

 1// Focus management
 2function openModal(modal) {
 3  // Store last focused element
 4  lastFocus = document.activeElement;
 5
 6  // Move focus to modal
 7  modal.querySelector("h2").focus();
 8
 9  // Trap focus
10  modal.addEventListener("keydown", trapFocus);
11}
12
13function closeModal(modal) {
14  // Return focus
15  lastFocus.focus();
16}
17
18function trapFocus(e) {
19  if (e.key === "Tab") {
20    const focusable = modal.querySelectorAll(
21      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
22    );
23    const first = focusable[0];
24    const last = focusable[focusable.length - 1];
25
26    if (e.shiftKey && document.activeElement === first) {
27      last.focus();
28      e.preventDefault();
29    } else if (!e.shiftKey && document.activeElement === last) {
30      first.focus();
31      e.preventDefault();
32    }
33  }
34
35  if (e.key === "Escape") {
36    closeModal(modal);
37  }
38}

 1<!-- Status messages (polite) -->
 2<div role="status" aria-live="polite" aria-atomic="true">
 3  <!-- Content updates will be announced after current speech -->
 4</div>
 5
 6<!-- Alerts (assertive) -->
 7<div role="alert" aria-live="assertive">
 8  <!-- Content updates interrupt current speech -->
 9</div>
10
11<!-- Progress updates -->
12<div
13  role="progressbar"
14  aria-valuenow="75"
15  aria-valuemin="0"
16  aria-valuemax="100"
17  aria-label="Upload progress"
18></div>
19
20<!-- Log (additions only) -->
21<div role="log" aria-live="polite" aria-relevant="additions">
22  <!-- New messages announced, removals not -->
23</div>

 1<div role="tablist" aria-label="Product information">
 2  <button role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1">
 3    Description
 4  </button>
 5  <button
 6    role="tab"
 7    id="tab-2"
 8    aria-selected="false"
 9    aria-controls="panel-2"
10    tabindex="-1"
11  >
12    Reviews
13  </button>
14</div>
15
16<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
17  Product description content...
18</div>
19
20<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
21  Reviews content...
22</div>

 1// Tab keyboard navigation
 2tablist.addEventListener("keydown", (e) => {
 3  const tabs = [...tablist.querySelectorAll('[role="tab"]')];
 4  const index = tabs.indexOf(document.activeElement);
 5
 6  let newIndex;
 7  switch (e.key) {
 8    case "ArrowRight":
 9      newIndex = (index + 1) % tabs.length;
10      break;
11    case "ArrowLeft":
12      newIndex = (index - 1 + tabs.length) % tabs.length;
13      break;
14    case "Home":
15      newIndex = 0;
16      break;
17    case "End":
18      newIndex = tabs.length - 1;
19      break;
20    default:
21      return;
22  }
23
24  tabs[newIndex].focus();
25  activateTab(tabs[newIndex]);
26  e.preventDefault();
27});

 1// Log what screen reader sees
 2function logAccessibleName(element) {
 3  const computed = window.getComputedStyle(element);
 4  console.log({
 5    role: element.getAttribute("role") || element.tagName,
 6    name:
 7      element.getAttribute("aria-label") ||
 8      element.getAttribute("aria-labelledby") ||
 9      element.textContent,
10    state: {
11      expanded: element.getAttribute("aria-expanded"),
12      selected: element.getAttribute("aria-selected"),
13      checked: element.getAttribute("aria-checked"),
14      disabled: element.disabled,
15    },
16    visible: computed.display !== "none" && computed.visibility !== "hidden",
17  });
18}