# Tab bar icon sizes and labels follow platform guidelines

- **Pattern:** `ab-001971` (`mobile-ux-patterns.platform-conventions.tab-bar-guidelines`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001971
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001971)

## 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`:

```tsx
<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>
```

## Detection

- **ID:** `tab-bar-guidelines`
- **Severity:** `low`
- **What to look for:** If the app has a tab bar, enumerate all tab items. For each, check icon size (should be at least 24pt), label visibility, and overall tab bar height. Quote the actual `tabBarStyle` height and icon size values.
- **Pass criteria:** Tab bar icons are at least 24pt (ideally 24-30pt), labels are visible and readable, tab bar height is at least 49pt on iOS and at least 56pt on Android. All tab items have both icon and label.
- **Fail criteria:** Tab bar icons are under 20pt, labels are missing or unreadable, or tab bar height is under 49pt on iOS or under 56pt on Android.
- **Skip (N/A) when:** App has no tab bar navigation (uses only stack navigation or single-screen layout).
- **Detail on fail:** Quote the actual dimensions. `"Tab bar icons are 16pt — below the 24pt minimum — making them hard to read and tap."` or `"Tab labels are hidden, reducing discoverability of tab functions."`
- **Remediation:** Configure tab bar with appropriate sizes:

  ```tsx
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

  const Tab = createBottomTabNavigator();

  <Tab.Navigator
    screenOptions={{
      tabBarActiveTintColor: '#007AFF',
      tabBarInactiveTintColor: '#8E8E93',
      tabBarIconStyle: { width: 24, height: 24 },  // Adequate icon size
      tabBarStyle: { height: Platform.OS === 'ios' ? 83 : 56 },  // Platform-appropriate height
    }}
  >
    <Tab.Screen
      name="Home"
      component={HomeScreen}
      options={{
        tabBarIcon: ({ color, size }) => <Icon name="home" color={color} size={size} />,
        tabBarLabel: 'Home',  // Always show label
      }}
    />
  </Tab.Navigator>
  ```

---

## External references

- wcag 2.5.5

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001971