Responsive Containers

The Responsive Containers rule ensures that UI elements scale and adapt across different screen sizes and orientations. Using fixed-width units like px, dp, or pt can make layouts inflexible, leading to accessibility issues such as content clipping, overflow, or excessive scrolling. This can make it difficult for users with different screen sizes, zoom settings, or larger text preferences to interact with the app.

Instead, use relative units such as percentages (%) for layout sizing, em or rem for scalable text, or platform-specific flexible layout properties. Maintaining this design criteria ensures app usability and readability across different devices, screen sizes, and screen orientations.

Success Criteria

The specific criterion for success is:

• UI containers should adapt to various screen sizes and maintain visibility and usability of text and interactive elements by resizing dynamically based on screen width and height.

How to fix?

• Avoid using fixed height or width values to maintain responsiveness and adaptability.
• Use relative units to allow containers to scale dynamically.
• Platform-specific recommendations:
  To ensure content remains accessible and doesn’t get cut off when it exceeds the viewport, use scrollable or scalable containers appropriate to each platform:
  • Android: Use match_parent, wrap_content, or weight-based layouts like 0dp with layout weights.
  • iOS: Use UIScrollView, UITableView, or UICollectionView.
  • React Native: Use ScrollView or FlatList.
  • Flutter: Use ScrollView, ListView, or GridView.

Example

Consider the following example:

Error:

• The container uses fixed-width instead of relative units.

How to fix:

• To fix the violation:

  • Use match_parent, wrap_content, or percentage units with weight instead of fixed dp values.
  • Alternatively, define flexible UI elements using layoutSize.

Reference

• Learn more about Responsive Containers: 2.1 - 1.4.10 (Level AA) guideline
• Learn more about Responsive Containers: 2.2 - 1.4.10 (Level AA) guideline