Accessibility is for all, understand the challenge to empower everyone

It never crossed my mind, to be honest

Until one moment that I keep thinking about it

I always take a specific Transjakarta bus, number 9C, every Wednesday or Thursday when I go to Gelora Bung Karno for a run or jog. There is always a group of sightless people also on the bus. Three of five drop off at the right stop by luck and the two left miss their stop because the bus stop announcement wasn't working properly. Seeing that from the back of the bus triggered a strong realization in my head.

Long story short, when I saw a post about the Accessibility bootcamp by Suarise, I immediately joined to understand disability pain points and learn how digital products can empower everyone.

We conducted an Accessibility Audit and Refined Shopee’s Product Detail Page: Process & Before-After Comparison

Expectations of what will be done in this final assignment

Our group, which included a researcher, a developer, and two designers, collaborated to improve Shopee's product detail page accessibility. We teamed with a respondent with visual impairment who has used screen readers for 12+ years to gain deep firsthand insights.

Research & Context

In 2023 Shopee received up to 2.35 billion visits and earned USD 13.05B across all regions. Based on surveys, 39.3% of users are MSMEs, while over 720,000 people with disabilities in Indonesia are MSME entrepreneurs. Better digital accessibility transforms e-commerce into an empowering channel with exponential multiplier effects.

The Objective & Scope

1. Conduct an Accessibility Evaluation: Thorough compliance assessment against WCAG 2.2 standards.
2. Identify Accessibility Barriers: Investigate screen reader traps and navigation roadblocks.
3. Provide Concrete Recommendations: Annotations and developer handoff specs.
4. Application & Code Refinement: Implement fixes for live verification.

The PDP serves as the primary decision-making hub for buyers where ~90% of transactions occur.

Audit Tools & Process

We used VoiceOver (Mac), NVDA (Windows), WAVE Evaluation Tool, Axe DevTools, and strict Keyboard Navigation (Tab / Shift+Tab).

• 

  WAVE Accessibility Audit Scan on Shopee PDP

• 

  Axe DevTools Automated Rule Violations Analysis

Audit Findings & Failure Rates

Out of 55 WCAG 2.2 Level A to AA criteria, Shopee’s PDP fell short with 16 criteria not met, 21 criteria met, and 18 criteria marked as not applicable.

48.4%WCAG 2.2 Level A Failed

79.2%WCAG 2.2 Level AA Failed

Design Annotations in Figma

We provided comprehensive ARIA, heading level, and alt-text annotations using Stark plugin to ensure developers have explicit accessibility requirements directly in Figma handoff specs.

Code Implementation: Variant Selection Fix

Before: Unannounced button clicks with no active state feedback for screen readers.
After: Added aria-pressed, dynamic price announcement in an aria-live="polite" region, and descriptive variant labels.

<button 
  type="button" 
  aria-pressed="true"
  aria-label="WM01 Ungu Bowie, selected, Rp 149.000"
>
  <img src="product-image.png" alt="" aria-hidden="true" />
  <span>WM01 Ungu Bowie</span>
  <span className="price-tag">Rp 149.000</span>
</button>

Post Implementation Validation

We conducted follow-up usability validation with our visually-impaired respondent. The refined keyboard landmarks, language consistency, and ARIA live regions delivered a seamless, dignified checkout experience.