Lecture on Inclusive Design and Accessibility

Introduction

• Presenter: Jen Devin, User Experience Leader at Google Accessibility
• Panelists:
  • Andrea Wong, Researcher on Accessibility
  • Catherine Ideal, Designer on Accessibility
  • Bethany Fong, Lead Designer on Google Material Design
• Objective: Discuss inclusive design, accessibility, and how to make products more inclusive.

Understanding Accessibility and Inclusive Design

• Definitions: As per the Web Accessibility Initiative:
  • Accessibility: Ensures users with disabilities can perceive, interact with, understand, and navigate tools and services without barriers.
  • Inclusive Design: Considers a broad range of human abilities, including age, gender, ethnicity.
  • Usability: Ensures that a product is not just accessible but also provides a great experience for all users.

Importance of Accessibility

• Benefits of Accessibility:
  • Beneficial for users with disabilities and those in situational limitations (e.g., low bandwidth, distractions).
  • Examples: Alternative text for images aids both visually impaired users and those with slow internet.
• Overlap with Inclusive Design: Accessibility is a key component of inclusive design.

Case Study: Designing the Crane App

• Objective: Demonstrate inclusive design using a travel and hospitality app called 'Crane'.
• Design Framework:
  • Stages: Define product vision, design, development, and post-design.
  • Approach: Use standard user-centered design methodologies and material design systems.

Stage 1: Defining the Product Vision

• Key Considerations:
  • Understand user needs, including those with disabilities.
  • Use assistive technologies in research.
  • Identify permanent, temporary, and situational disabilities.
• User Engagement: Inclusion of users with disabilities in research for insights and better user experience.

Stage 2: Design

• Interaction Design:
  • Group related content and controls.
  • Design a tab interaction model.
  • Ensure easy navigation (e.g., keyboard navigation).
• Visual Design:
  • Ensure high color contrast and visible focus states.
  • Provide multiple indicators for color-coded information.
  • Ensure appropriate touch target sizes.
• UX Writing:
  • Use meaningful, concise labels for screen readers.
• Motion Design:
  • Ensure alerts/snackbars are visible long enough.
  • Provide easy escape options from overlays.
• Heuristic Evaluation: Check the app for clarity, robustness, and specificity.

Stage 3: Development

• Best Practices:
  • Use standard components when possible.
  • Ensure scalable text.
  • Use development tools for accessibility checks.
• Tools: Material Theme Editor, Accessibility scanner, and gallery.

Stage 4: After Development

• Tools for Testing:
  • Pre-launch report and Lighthouse for checking accessibility issues.
• Help Content:
  • Provide accessible help content and tutorials.
• Feedback:
  • Include feedback from users with disabilities post-launch.

Conclusion

• One Action Per Stage:
  • Product Vision: Talk to users, especially those with disabilities.
  • Design: Consider keyboard navigation for interaction models.
  • Development: Use standard components for consistency.
  • Post-Development: Ensure accessible onboarding and help content.
• Final Note: Creating inclusive products is critical to empowering all users and removing barriers.