Accessibility QA
Screen Reader Testing
Run this test pass before each release to verify spoken UX quality across forms, dialogs, and data views.
Test Matrix
Validate with at least one desktop and one mobile screen reader.
Desktop: VoiceOver (macOS) or NVDA (Windows)
Mobile: VoiceOver (iOS) or TalkBack (Android)
Browsers: Safari + Chromium baseline
Release Checklist
Mark each item during manual QA.
- Every interactive control has an accessible name.
- Focus order follows visual order without traps.
- Status updates are announced via aria-live when needed.
- Modal/dialog open and close restores focus correctly.
- Tables expose headers and meaningful row context.
Announced Search Results Pattern
Use `aria-live="polite"` for async updates that should be spoken without interrupting active navigation.
TSX
1import { useEffect, useState } from "react"2import { Input } from "@glinui/ui"34export function SearchAnnounce() {5 const [query, setQuery] = useState("")6 const [count, setCount] = useState(0)78 useEffect(() => {9 const timeout = setTimeout(() => {10 // Replace with real search call11 setCount(query ? 12 : 0)12 }, 120)13 return () => clearTimeout(timeout)14 }, [query])1516 return (17 <div className="space-y-2">18 <Input19 aria-label="Search components"20 placeholder="Search components"21 value={query}22 onChange={(event) => setQuery(event.target.value)}23 />24 <p aria-live="polite" className="text-sm text-neutral-500">25 {count} results26 </p>27 </div>28 )29}