A low-fidelity interactive digital prototype designed to help users make decisions without cognitive overload, with a strong focus on accessibility and user experience.
ClearChoice guides users through a simple, step-by-step decision-making process using progressive disclosure, high-contrast design, and immediate feedback mechanisms.
- High Contrast: All elements use WCAG AAA compliant color combinations
- Large Interactive Elements: All buttons meet minimum 44x44px touch target size
- Keyboard Navigation: Full keyboard support with visible focus indicators
- Screen Reader Optimized: Proper ARIA labels, live regions, and semantic HTML
- Reduced Motion Support: Respects
prefers-reduced-motionuser preferences
- Only 2-3 choices presented per screen
- Each choice reveals the next set of options
- Clear flow prevents decision paralysis
- Users can review and change their selections
- Visual Feedback: Button animations, progress bar, success checkmark
- Audio Feedback: Click sounds and success chime (can be muted)
- Screen Reader Announcements: Status updates for assistive technology users
- Progress Indicator: Visual progress bar shows completion status
- Clear "Back" buttons on every screen
- "Continue" affordances built into choice buttons
- Escape key support for quick navigation back
- Focused element on screen transition
Three primary decision categories:
- Plan an Activity 📅
- Make a Purchase 🛒
- Organize a Task ✓
Based on the first choice, users see 3 relevant sub-options with descriptions:
- Clear titles and helpful descriptions
- Easy-to-scan layout
- Option to go back
Review screen showing:
- Selected main category
- Selected sub-option
- Option to confirm or go back to change
Success state with:
- Animated checkmark
- Summary of decisions
- Option to start over
index.html- Semantic HTML structure with ARIA labelsstyles.css- High-contrast, responsive stylingscript.js- Progressive disclosure and interaction logic
- Modern browsers (Chrome, Firefox, Safari, Edge)
- Responsive design for mobile and desktop
- Graceful degradation for older browsers
- Semantic HTML5 elements
- ARIA roles and labels
- Focus management
- Keyboard navigation (Tab, Shift+Tab, Escape, Enter/Space)
- Screen reader announcements
- High contrast mode support
- Respects user motion preferences
- Open
index.htmlin a web browser - Navigate through the screens using mouse, keyboard, or touch
- Make selections at your own pace
- Use the Back button at any time to change your mind
- Complete the flow or start over
- Gentle animations
- Encouraging copy ("Take your time")
- No time pressure or urgency
- Clear, direct labels
- Helpful descriptions
- No jargon or complex terminology
- User always in control
- Can go back at any point
- Clear confirmation before completion
- Transparent process
- Tab: Navigate forward through interactive elements
- Shift + Tab: Navigate backward through interactive elements
- Enter/Space: Activate focused button
- Escape: Go back to previous screen (when applicable)
- Save decisions to local storage
- Export decision summary
- Customizable themes
- Multi-language support
- Voice control integration
- Analytics dashboard
This prototype follows:
- WCAG 2.1 Level AA guidelines
- ARIA Authoring Practices Guide
- Inclusive design principles
- Progressive enhancement methodology
- Keyboard Navigation: Tab through all interactive elements
- Screen Reader: Test with NVDA, JAWS, or VoiceOver
- High Contrast Mode: Enable system high contrast mode
- Zoom: Test at 200% browser zoom
- Touch Targets: Verify 44x44px minimum on mobile devices
This is a prototype for demonstration purposes.
Created with accessibility and user experience as top priorities.