Auditing and Translating

Auditing and Translating BookNest

A short script, scripts/a11y-audit.py, reads a uiautomator dump and lists every tappable element with the label TalkBack would read and its size in dp (pixels / 2.625 at 420 dpi). The cart, before and after fixes:

Output of 223
$ before
Remove                                72 x 34   UNDER 48 DP
Remove                                72 x 33   UNDER 48 DP
Checkout                             383 x 40   UNDER 48 DP
<icon>, Catalog                      206 x 49   ICON GLYPH
<icon>, 3, Cart                      206 x 49   ICON GLYPH
$ after
Remove Salt and Saffron               72 x 48
Remove The Clockmaker's Paradox       72 x 48
Checkout                             383 x 48
Find a bookshop                      383 x 48
Catalog                              206 x 49
Cart, 3 books in your cart           206 x 49

Three kinds of problem showed up. Two identical "Remove" buttons gave no hint which book they removed; each now has an aria-label with the title. Three targets were under 48 dp; min-h-[48px] fixed them (NativeWind's min-h-12 would have been only 42 dp, because its rem is 14 on native). And each tab's label began with a private-use character, the Ionicons glyph drawn as text, so TalkBack would have read a meaningless symbol; the tabs now set tabBarAccessibilityLabel, and the cart tab's label includes the count. "Find a bookshop", a text Link, was not even reported as tappable; it became a Pressable with role="link".

Then the cart's strings moved into the JSON files and its prices through money():

The cart in English, Spanish and Arabic; in Arabic the rows, text and tab bar are mirrored
The cart in English, Spanish and Arabic; in Arabic the rows, text and tab bar are mirrored

The Arabic screen is mirrored without any Arabic-specific style. Book titles stay in English: they are catalog data, which the API should translate, not the app.