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 implementation:

To fix responsive container violations:

Example

Consider the following example:

Error

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

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.

References

• 1.4.10 Reflow (Level AA): WCAG 2.1 · WCAG 2.2