Accessibility in prices, our learning from the Android perspective
Article Summary
Juan Ignacio Unzurrunzaga from Mercado Libre's team reveals how they fixed a critical accessibility gap that affected millions of users: price components that screen readers couldn't interpret correctly.
Mercado Libre's accessibility team tackled their price component, which had inconsistent currency readings, missing context for discount combos, and decimal separator confusion. They rebuilt it from scratch using Android's AccessibilityNodeInfo framework, creating MoneyAmount as part of their Andes UI design system.
Key Takeaways
- Android's single screen reader (Talkback) eliminates Web's cross-browser inconsistencies
- Custom AccessibilityDelegate classes encapsulate logic while respecting separation of concerns
- Semantic grouping reduced navigation from three elements to one unified description
- Static description methods enable reusable accessibility patterns across components
By leveraging Android's accessibility tree and custom delegates, they created a price component that reads consistently across all contexts while simplifying navigation for screen reader users.
About This Article
Mercado Libre's price component had four accessibility issues. The currency symbol read as "dollars" instead of "pesos". Combo variants showed previous price, current price, and discount as three separate elements instead of one unit. Strikethrough prices didn't have visual feedback that screen readers could access. Decimal and thousands separators confused users in different locales.
Juan Ignacio Unzurrunzaga's team built helper classes for CurrencyDescription and NumberFormatting to handle locale-specific separators. They created MoneyAmount, MoneyAmountDiscount, and MoneyAmountCombo components with custom AccessibilityDelegate classes. These classes generate a single contentDescription string using static methods.
The MoneyAmountCombo component cut screen reader navigation from three elements down to one semantic view. Now it reads as a single description like "Now: 1350 pesos, ten percent off. Before: 1500 pesos" in Spanish, Portuguese, and English.