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.

Resize text guideline addresses the following violations:

• Font Magnification
• Text Truncation

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.

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.

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
• Learn more about Resize Text WCAG: 2.2 - 1.4.4 (Level AA) guideline