Accessibility in UI/UX: Design for All

TAKEAWAYS:

• Accessibility ensures digital products are usable by people with disabilities, including visual, auditory, motor, or cognitive impairments.
• Key techniques include sufficient contrast, keyboard accessibility, clear labels, and alternative text to replace visual content.
• WCAG (Web Content Accessibility Guidelines) provides standards for accessibility, divided into perceivable, operable, understandable, and robust criteria.
• Assistive technologies like screen readers, braille displays, and voice recognition rely on well-structured, accessible design.
• Testing for accessibility involves manual checks (e.g., color contrast tools) and automated tools (e.g., axe, WAVE).
• Ignoring accessibility excludes 26% of the world’s population with disabilities, harming usability and legal compliance.

Why Accessibility Matters in UI/UX

Accessibility is not just a moral obligation—it is a business necessity. In Nepal, platforms like eSewa and Khalti must ensure their mobile payment interfaces are usable by visually impaired users or those with motor disabilities. Globally, Google Maps uses high-contrast icons and voice navigation to help users with low vision, while WhatsApp supports screen reader compatibility for blind users.

Core Principles of Accessible Design

Accessibility is built on four pillars, as defined by the World Wide Web Consortium (W3C) WCAG 2.1:

1. Perceivable

Users must be able to perceive content in ways they need.

• Text alternatives: Replace images with alt text (e.g., <img src="logo.png" alt="Nepal Bank logo">).
• Captions/subtitles: Add captions to videos (e.g., NTC’s YouTube channels use captions for hearing-impaired viewers).
• Sufficient contrast: Text must stand out against backgrounds (minimum 4.5:1 for normal text, 3:1 for large text).

• Resizable text: Allow users to increase font size without breaking layout (e.g., Daraz’s mobile app supports text scaling).

2. Operable

Users must be able to operate interfaces using assistive technologies.

• Keyboard navigation: All functions must be accessible via keyboard (e.g., Pathao’s app allows ride booking without a mouse).
• Enough time: Avoid time limits (e.g., eSewa’s transaction screen should not auto-close).
• Seizure-safe: Avoid flashing content (e.g., Ncell’s notifications should not trigger seizures).

3. Understandable

Users must understand the interface and navigate it.

• Clear labels: Use descriptive text for buttons (e.g., "Submit Payment" instead of "Click Here").
• Predictable navigation: Consistent layout (e.g., NEPSE’s trading platform uses familiar menu structures).
• Error prevention: Help users avoid mistakes (e.g., banking apps warn before deleting transactions).

4. Robust

Content must work across different devices and assistive tools.

• Valid HTML/CSS: Ensure compatibility with screen readers (e.g., Google’s search bar works with voice commands).
• ARIA (Accessible Rich Internet Applications): Use semantic markup for dynamic content (e.g., Khalti’s payment status updates should announce changes to screen readers).

Assistive Technologies and How Design Supports Them

Assistive technologies help users with disabilities interact with digital products. Here’s how design enables them:

Common Accessibility Barriers and Fixes

Many digital products fail accessibility due to overlooked details. Below are real-world examples and fixes:

1. Poor Color Contrast

Problem: Text on a light background with insufficient contrast (e.g., Ncell’s old app had gray text on white). Fix: Use tools like WebAIM Contrast Checker to ensure compliance.

2. Missing Alt Text

Problem: Images without descriptions (e.g., Daraz’s product images had no alt text for visually impaired users). Fix: Add descriptive alt text:

<img src="product.jpg" alt="Black Nike running shoes, size 9, available in Nepal">

3. Inaccessible Forms

Problem: Labels not associated with input fields (e.g., bank loan forms had hidden labels). Fix: Use proper <label> tags:

<label for="password">Password:</label>
<input type="password" id="password" name="password">

4. Keyboard Traps

Problem: Users cannot navigate away from a modal (e.g., eSewa’s payment confirmation had no escape). Fix: Ensure all interactive elements are keyboard-accessible.

5. Lack of Captions

Problem: Videos without captions (e.g., NTC’s news videos had no subtitles). Fix: Add captions or transcripts:

sequenceDiagram
    participant User
    participant Video
    participant ScreenReader
    User->>Video: "Plays video"
    Video-->>ScreenReader: "No captions (silent)"
    User->>Video: "Enables captions"
    Video-->>ScreenReader: "Nepal’s traffic update: Kathmandu roads congested..."

Testing for Accessibility

Accessibility testing ensures your design meets standards. Methods include:

1. Automated Tools

• axe DevTools: Checks for contrast, missing alt text, and keyboard traps.
• WAVE: Highlights accessibility issues in real time.
• Nepal-specific tool: Accessibility Nepal (a community-driven tool for local websites).

2. Manual Testing

• Keyboard-only navigation: Test if all functions work without a mouse.
• Screen reader simulation: Use tools like NVDA or VoiceOver to check readability.
• Color blindness simulation: Test with tools like Color Oracle.

3. User Testing with Disabilities

• Conduct tests with real users who have disabilities (e.g., Nepal Blind Union partners with tech companies for UX testing).

Legal and Ethical Implications

• Nepal: No strict accessibility laws yet, but Nepal Rastra Bank and NEPSE are gradually adopting WCAG standards.
• Global: Laws like the Americans with Disabilities Act (ADA) and EU Accessibility Act mandate compliance.
• Ethical duty: Designing for accessibility ensures no user is left behind, aligning with UN’s Sustainable Development Goal 10 (Reduced Inequalities).

Real-World Example: Daraz’s Accessible Checkout

Problem: Daraz’s mobile app had low contrast and unclear buttons for users with visual impairments. Solution:

1. Increased contrast ratio to 7:1 for buttons.
2. Added voice guidance for blind users.
3. Used larger tap targets (48x48px) for motor-impaired users. Result: 20% increase in conversions from users with disabilities.

Exam Tip: How to Score Full Marks

1. Define accessibility: Start with WCAG’s 4 principles (perceivable, operable, understandable, robust).
2. Compare tools: Mention automated (axe, WAVE) vs. manual (keyboard testing, screen readers).
3. Link to real products: Use Nepalese examples (eSewa, NEPSE) or global examples (Google Maps, WhatsApp).
4. Worked example: Show how fixing contrast or alt text improves usability.
5. Legal/ethical angle: Briefly mention ADA, EU laws, or Nepal’s future regulations.
6. Visuals: Always include before/after contrast examples or screen reader workflows.

Common mistakes to avoid:

• Ignoring keyboard navigation (a frequent exam pitfall).
• Not mentioning ARIA labels (critical for dynamic content).
• Overlooking cognitive accessibility (e.g., simple language for users with learning disabilities).

Final note: Accessibility is not an afterthought—it’s a core part of UX. Always design with users, not for them. In exams, prioritize WCAG principles, real-world fixes, and testing methods. Good luck!