Skip to main content

Resize text

App accessibility checks if text can be easily resized without impacting readability or functionality. Your app’s text should adapt to system-wide size settings on iOS and Android, allowing users with visual impairments to adjust font sizes. Consider how layout, spacing, and interactive elements respond to resizing. When text resizing causes truncation, provide mechanisms to reveal the full text, like tooltips or expanding views. Prioritizing text resizing creates a more inclusive user experience.

  • Rule Category : Resize Text
  • WCAG Guidelines : WCAG 2.1 - 1.4.4 (Level AA)
  • Rule Severity : Serious
  • Supported Platforms : Android, iOS

Resize text guideline addresses the following violations:

Font Magnification

Font magnification checks if users can enlarge or zoom in on the text, ensuring it resizes according to the user’s selected font size, up to 200% while maintaining content visibility and functionality. It emphasizes text scalability for readability, particularly for users with visual impairments. Loss of content is assessed separately in text truncation checks.

Success criteria

The rule checks for the following potential violations:

  • Text Scalability
    Ensure all text can be resized up to 200% without loss of content or functionality.

  • Font Units
    Ensure the use of relative units for sizing text.
    For example: px (pixels) is used instead of sp (scale-independent pixels), which do not scale with user preferences.

How to fix?

To prevent font magnification violations, ensure the following:

  • Ensure that all text containers can resize along with the magnified text. This can be achieved by using relative units for sizing and avoiding fixed dimensions.
  • Use the recommended font unit for all text sizes within your app:
    • Android: Use scale-independent pixels (sp).
    • iOS: Use Dynamic Type and custom fonts that support it. This ensures that the font size scales according to the user’s accessibility preferences.
  • Implement zoom functionality that allows users to magnify up to 200% without any loss of content or functionality.

Example

The following image provides an example of a violation of the font magnification guideline. In both instances (#11 and #12), the fontUnit is set to “px” (pixels). Pixels are fixed units, meaning they do not scale with the user’s text size preferences. This violation prevents users from adjusting the font size to their needs, potentially making the text illegible or difficult to read for those with visual impairments.

Font magnification violation

sp is the recommended unit for font sizes on Android as it adjusts to the user’s preferred text size settings, improving accessibility. For iOS, use Dynamic Type and custom fonts that support it to ensure proper text scaling and accessibility. This further emphasizes that using “px” as fontUnit is a deviation from the recommended practice and a guideline violation.

Text Truncation

Text truncation occurs when text does not fit within its container and is cut off or hidden due to insufficient space, particularly when text size is increased. This can be a significant issue for users with visual impairments who rely on larger text sizes, and those who may struggle with comprehending incomplete information. This guideline ensures all text content remains visible and readable, even when enlarged up to 200%, preventing the loss of critical information for all users.

Success criteria

The rule checks for the following potential violations:

  • Font Unit Validation
    The primary check of fontUnit is done, and it must be sp before performing any further checks.

  • Fixed Dimensions
    Ensuring that text containers do not have fixed widths or heights that prevent proper resizing.

  • Flexible Layouts
    Layout dimensions should use permissible values (wrap_content, match_parent, 0) to allow for dynamic resizing.

  • Adjustable Containers
    If the text container itself cannot resize (due to design or layout constraints), ensure that either:

    • It’s parent views are also using flexible layout parameters to adjust along with the text.
    • The text container itself provides scrolling mechanisms (e.g., HorizontalScrollView or ScrollView) to allow users to view all the text content.

How to fix?

To prevent text truncation, ensure the following:

  • Flexible Layout
    Make sure the TextView class or its parent view does not have a fixed width or height. Fixed dimensions can restrict text from resizing correctly.
  • Relative Units
    Use permissible values (wrap_content, match_parent, 0) for layout dimensions. This allows the text and its container to adjust dynamically based on the content and screen size.
  • Adjustable Width
    Ensure parent views of scalable text containers (ones without truncation issues) are also adjustable. Alternatively, the container itself should accommodate horizontal or vertical scrolling if needed.

Example

The following image shows a text truncation violation in issue #18. The TextView uses the correct fontUnit as sp (Scale-Independent pixels) for scalable text. However, its parent view has a fixed width of 450px, which restricts the TextView from expanding to accommodate larger text sizes.

Text Truncation violation

While the text itself is scalable, its parent container’s fixed dimensions restrict its ability to resize without being cut off. As the font size increases, the text will eventually exceed the parent’s width, resulting in truncation.

To fix this violation, adjust the layout parameters of either the TextView or its parent view as follows:

  • Make the parent view’s width flexible
    Change the parentContainerWidth from 450px to wrap_content or a percentage value to allow it to expand horizontally with the text.
  • Implement horizontal scrolling (if necessary)
    If the text is expected to be very long, consider embedding the TextView within a HorizontalScrollView to provide a way for users to view the entire text even if it exceeds the available width.

Reference

Learn more about Resize Text WCAG: 2.1 - 1.4.4 (Level AA) guideline

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy