-
User Story
-
Resolution: Unresolved
-
Not Evaluated
-
None
-
None
-
None
As an assistive-technology user,
I need the Widgets Gallery example to be accessible,
so I can use all controls without barriers.
Note (internal purpose){}
This gallery example also serves to verify accessibility across our widgets and demonstrate best-practice implementation to developers.
🧭 Perceivable
| Status | Functionality | Notes |
|---|---|---|
| All icons, images, and buttons have descriptive text labels or accessible names | ||
| Text contrast ≥ 4.5:1, UI elements ≥ 3:1 | ||
| No color-only cues (e.g., "red = error" → add icon/text) | ||
| Content resizes / zooms to 200% without loss | ||
| N/A | Audio/video has captions or transcripts | No video/audio in this example |
⌨️ Operable
| Status | Functionality | Notes |
|---|---|---|
| All features work without a mouse (keyboard only) | ||
| No keyboard traps — user can tab in/out of every area | ||
| Focus visible and not hidden behind overlays | ||
| Tab order logical and consistent | ||
| N/A | No flashing or timed actions that block users | There are no timeouts or flashes/blinks in this example |
| Touch actions (drag, swipe) have simple alternatives (e.g., "Move" button) | ||
| Target size ≥ 24 × 24 px |
🧠 Understandable
| Status | Functionality | Notes |
|---|---|---|
| Clear, descriptive labels and instructions | ||
| Errors identified and fix suggestions provided | ||
| Behavior consistent across screens | ||
| Main language set in app settings/metadata | ||
| Help / support appears in the same location on every screen |
🔐 Robust
| Status | Functionality | Notes |
|---|---|---|
| Every control exposes correct name, role, state, and value to assistive tech | ||
| Status messages (e.g., "Saved!", "Error loading") announced to screen readers | ||
| Tested with screen reader + keyboard and high-contrast mode |