‍Background

As product release cycles shorten to days and weeks, integrating accessibility early becomes more challenging. Historically, our product lacked clear design planning for Web/VoiceOver(iOS) / TalkBack(Android), resulting in significant accessibility tech debt before a dedicated team was in place. This exclusionary approach doesn't serve our intended user base.
‍

Overview

Make a game plan to tackle accessibility in your process

Starting to incorporate accessibility into our project process was initially challenging due to our lack of expertise. However, we persevered, unafraid of making mistakes, as we were committed to improving. Here's how we've integrated accessibility into fast-paced projects at each development stage.

User Interview - Get the Real Feedback From the Disabled

• Insights for MoCA products
  1. Specific modules like leaderboards and carousels cause unresponsive scrolling.
  2. Basic functions are preferred, but finding critical settings like audio quality is challenging.
  3. Semantic settings lack clear structure, making understanding difficult. ‍
• Insights for general behavior
  1. Coping with image-heavy products like Instagram is challenging.
  2. Frequent environment changes demand extended adaptation time for visually impaired individuals.

Design - Review Our Product

1. Define the label

Avoid undefined names, except for components with inherent strings, like "TextView."

2. Define the scope

Avoid mismatch between the selected scope and the operational context, which can result in fragmented and meaningless selections.

3. Make sure the focus order for each form

‍Ensure that the focus order for each form aligns with the usage context, such as the operation flow of functions, contextual sequence, and the location of selections after screen transitions.

Design + Develop - Set up Guideline

Understanding the relationship between the code and the final product's appearance‍

When pushing for a company culture shift in less-prioritized areas, it's essential to become a cross-functional expert. Therefore, I looked into the codes to study the definition of Voiceover/Talkback elements.

Establishing design guideline, provide an in-depth introduction from scratch

• ‍Behaviors - There are two main behaviors, and users can choose the one that suits them best.
  1.Explore by touch - Users can touch the screen with their fingers and immediately hear the content. This allows users to quickly grasp the entire screen's content and navigate the UI rapidly using muscle memory.
  2.Linear navigation - Users can swipe left or right on the screen to navigate linearly from top to bottom.

• ‍Accessibility elements - There are five elements in total.
  *Voiceover Description Order: TextView/Label -> Traits/Value -> Hint
  (To avoid redundant text, typically choose either TextView/Label or Traits/Value.)

Maintain and advocate

Internal and public events

Influencing the entire company or team culture may not be easy, but continuously sharing this accessible design within the company can gradually enhance the importance of inclusive thinking in the product design process. Additionally, it ensures a comprehensive VoiceOver guideline to follow for future product designs.