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