Accessibility rule: Text is clipped when resized, explained

Summary

Text must remain fully visible and readable when users increase browser or font size. If content becomes hidden or cut off, it creates a barrier for users who rely on zoom to access information.

Overview

The "Text is clipped when resized" issue flagged by Siteimprove is referenced on our as rule SIA-R83. It states that text should not be clipped or become illegible when it is resized by browsers to 200%.

Who is impacted by this?

People with low vision often use browser zoom. They may also define a font size they prefer to use in their browser settings. Test the page using both of the techniques. 

If the text is clipped under both techniques, then the rule fails.

If the text is not clipped under one or both techniques, then the rule passes.

If text is clipped, in practice, information on the website will be obscured and not accessible.

Common Causes of This Issue

This check regularly fails due to a container element with the CSS declaration of overflow: hidden. When a container has the declaration of overflow: hidden it hides any content that extends beyond the rendered height and width of that element, causing text to be clipped, obscured, or unreadable. 

The first thing to check is if the container element in question can safely have overflow: hidden removed from the CSS without design regression. 

If this is not possible, then further testing is required to verify if this is a valid reported error with user impact. There are two parts involved in testing this rule, as described below: Browser zoom and Font zoom (resize text).

How This Rule Is Evaluated

There are two parts involved in testing this rule, as described below:

Browser zoom and Font zoom (resize text).

Additional Information

Related Articles: How to Troubleshoot Text Resizing Issues