[Context]

VoiceOver users were getting stuck and couldn’t use the product

As release cycles accelerated, accessibility was inconsistently integrated across Web, VoiceOver (iOS), and TalkBack (Android), leading to broken navigation flows, unclear semantic structure, and growing accessibility debt within the product.

To address this, I conducted interviews with assistive technology users and translated insights into semantic improvements, focus order refinements, and engineering aligned accessibility guidelines, resolving 69 accessibility issues in the latest launch.

[Discovery]

User interview - get the real feedback from the disabled

• Insights for KKCompany products
  
  • Specific modules like leaderboards and carousels cause unresponsive scrolling.
  • Basic functions are preferred, but finding critical settings like audio quality is challenging.
  • Semantic settings lack clear structure, making understanding difficult. ‍

• Insights for general behavior
  
  • Coping with image-heavy products like Instagram is challenging.
  • Frequent environment changes demand extended adaptation time for visually impaired individuals.

[Design]

Review Our Product Through VoiceOver/Talkback

Define the label - Avoid undefined names, except for components with inherent strings, like "TextView."

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

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.

[Delivery]

Set up accessibility guidelines

I created a cross functional accessibility guideline to align design intent, assistive technology behaviors, and engineering implementation, providing a scalable foundation for consistent accessibility across the product.

#1 Bridging implementation and user experience

I examined how VoiceOver and TalkBack elements were defined in code and aligned them with intended interaction semantics, reducing mismatches between implementation and actual screen reader behavior.

#2 Defining interaction behaviors and semantic structure

The guideline documented core navigation patterns, including touch exploration and linear navigation, and clarified VoiceOver element hierarchy and description order to ensure predictable and understandable screen reader interactions.

#3  Maintaining awareness and adoption

I shared the guideline through internal collaboration and advocacy, establishing a reusable accessibility reference that supported long term consistency and inclusive product thinking.