Accessibility rule: Text is clipped when resized, explained

About the check

The "Text is clipped when resized" issue flagged by Siteimprove is referenced on our alfa site 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 barrier?

People with low vision often use zoom software. They may also define a font size they prefer to use in their browser settings. The website should allow text resizing in both scenarios. If text is clipped, in practice information on the website will be obscured and not accessible.

What are the most common reasons for text clipping when resized?

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 to troubleshoot using browser zoom

Using the browser’s zoom feature at 200% will show text and user interface elements increase in size. If text is clipped, cut off, overlapping itself or other text, or otherwise illegible the result is a failure.

Often any mobile responsive breakpoints will be activated and applied when using the browser’s zoom feature. If this is the case, the content display will reflow to fit the screen dimensions and often text clipping is not an issue.

How to troubleshoot using font zoom and text resize

In Chrome and Firefox browsers, it is possible to resize only the text of the page leaving non-text user interface elements at their default sizes. 

In Chrome

1. Go to chrome://settings/fonts or Chrome > Preferences > Appearance > Customize fonts. 
2. Increase the font size slider to at least 32 and return to the page you were testing. 
3. The font size of the page should have increased, if not the font size of an element or the document has been set in absolute CSS units and has restricted the user preference and is a failure of WCAG AA criterion Resize text. 

In Firefox

1. Set the default font size under Settings > Language and Appearance. 
2. In the same settings area under zoom, users can select a checkbox to “Zoom text only.” This is also a required check to verify that text is not clipped. 
3. Once this option is checked return to the test page and use the browser zoom. 
4. The browser zoom will now increase only the font size of text content.

In both browsers, if the text content of the page is clipped, cut off, overlapping itself or other text, or is otherwise unreadable this results in a failure of this accessibility check. 

Font zoom or modifying the browser’s default font size does not trigger the mobile responsive breakpoints defined in the page’s CSS. This is because there is no browser resize event triggered by this user technique. Font zoom or modification of the browser’s default font size is a common reason for the failure of the "Text is clipped when resized" accessibility check.