Tab bar icon sizes and labels follow platform guidelines
Why it matters
Sub-20pt tab bar icons are below the WCAG 2.2 SC 2.5.5 target-size threshold (44x44pt minimum) and the Apple HIG 49pt tab bar height — users with average thumb size mis-tap, and users with motor impairments cannot hit the target at all. Missing labels force users to memorize pictographs, which harms first-session discoverability and is specifically flagged by Google Play's user experience quality signals.
Severity rationale
Low because mis-taps self-correct, but the accessibility failure still excludes users with motor impairments.
Remediation
Set explicit icon sizes of at least 24pt, show labels on every tab, and set platform-appropriate tab bar heights in @react-navigation/bottom-tabs:
<Tab.Navigator screenOptions={{
tabBarIconStyle: { width: 24, height: 24 },
tabBarStyle: { height: Platform.OS === 'ios' ? 83 : 56 },
tabBarShowLabel: true,
}}>
<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarLabel: 'Home' }} />
</Tab.Navigator>
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Mobile UX Patterns Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
External references
- wcag:2.2 · 2.5.5 — Target Size (Enhanced)
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-ux-patterns·automated