Precios accesibles, nuestro aprendizaje desde la perspectiva Android
Article Summary
Juan Ignacio Unzurrunzaga from Mercado Libre reveals how a simple price component became a masterclass in Android accessibility. Their team discovered screen readers were announcing dollars instead of pesos, reading 10,000 as 'ten point zero,' and treating combo prices as three disconnected elements.
Mercado Libre's accessibility team tackled their price component, a critical UI element used across their entire e-commerce platform. The article provides a deep dive into Android's accessibility framework, explaining how the AccessibilityNodeInfo tree works and how custom delegates can solve complex accessibility challenges without relying on external service configurations.
Key Takeaways
- Created custom AccessibilityDelegate classes to control price announcements independently of TalkBack settings
- Unified combo prices (previous + current + discount) into single semantic view, reducing navigation friction
- Built MoneyAmount component with proper currency handling across multiple countries and languages
- Android's single screen reader (TalkBack) ensures consistent behavior unlike web's fragmented landscape
- Encapsulated locale-specific separators and currency descriptions in reusable helper classes
By leveraging Android's accessibility node tree and custom delegates, Mercado Libre transformed their price component from a confusing multi-element experience into a unified, properly-announced semantic view that works consistently across all accessibility services.
About This Article
Screen readers on TalkBack were reading currency amounts inconsistently depending on device settings. A price like 10,000 pesos would come through as 'ten point zero' instead of 'ten thousand.' This was a problem across Mercado Libre's price component, which gets used in multiple business areas.
Juan Ignacio Unzurrunzaga's team built helper classes that handled locale-specific currency descriptions and decimal/thousand separators separately from device settings. They then added custom AccessibilityDelegate objects to the MoneyAmount, MoneyAmountDiscount, and MoneyAmountCombo components. These delegates generated consistent contentDescription strings no matter what the device was configured to do.
The MoneyAmountCombo component now combines what used to be three separate elements into one semantic view. Users hear a single announcement like 'Ahora: 1350 pesos, 10 por ciento de descuento. Antes: 1500 pesos' instead of navigating through multiple pieces. This cuts down on redundant navigation while keeping the visual hierarchy consistent with the Andes UI design system.