Updating Navigation Bar Assets for Accessibility Compliance
According to the European Accessibility Act (EAA) and the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, interactive elements such as navigation bar icons must meet minimum touch target sizes to ensure usability for all users, including those with motor impairments.
iOS recommendation: 44 × 44 Android recommendation: 48 × 48
Since our product uses a unified layout for both iOS and Android, we will adopt the 48 px standard as the baseline.
Asset size: 40 × 40 px
Navigation height: 56 px
Padding: 8 px (top and bottom) → total height = 40 + 16
Instructions
1. Increase Asset Dimensions
Update asset size to 48 × 48 @3x (144 × 144 pixels).
Keep the icon graphic itself at 24 px to maintain proper scale.
Check Asset Quality Ensure assets fit the new size (they should be exported at a resolution of three times the standard pixel density – @3x). Replace any assets that become pixelated when scaled.
2. Adjust Navigation Padding
Reduce left, right, top, and bottom padding to 4 px.
3. Handle Multiple Buttons
For screens with multiple buttons, remove gutters and set spacing to 0 px.
4. Align Logo Heights
For consistency, ensure the logo height matches the new button height (48 px).
5. Title Area Adjustments
On inner screens, left-align titles.
Increase title area spacing from 8 px to 16 px to ensure the title/logo aligns with components (which by default have 20 px padding).
