1.4.10 Reflow

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems.

LEVELAA
Principle: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Guideline: Distinguishable
Make it easier for users to see and hear content including separating foreground from background.

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels;
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels;

View Official WCAG 2.1 Compliance Techniques

Understanding 1.4.10 Reflow

Users with low vision often require magnified screens or increased font sizes to successfully read displayed text. When assistive technology makes these adjustments, it is possible the text expands off the screen, causing the user to be unable to view it or have to continuously scroll horizontally back and forth to read the full blocks. 

The parameters set in this criteria revolve around content zoom of 400%. Considering a starting viewport with the dimensions of 1280 pixels wide and 1024 pixels high, at 400% zoom, the dimensions would be equivalent to 320 pixels wide and 256 pixels high. (Similar to the size of a mobile display.)

The vertical and horizontal scrolling parameters are dependent upon the language of the site. If it is horizontally written, such as English, a user can scroll through the magnified content vertically without having to scroll back and forth horizontally. For vertically written languages, such as Japanese, a user must be able to engage with the text horizontally without having to rely on vertical scrolling.

How HubSpot Helps

Ensuring your website is designed responsively is the best way to fulfill this criteria. The majority of websites today are designed responsively—content adjusts to the screen as it changes size. This goes hand in hand with reflow, and typically prevents the loss of information. Websites built on the HubSpot CMS are responsive, by default.

Warnings

CSS adjustments may conflict with the responsive nature of a typical HubSpot website. For example, adding a fixed height to a text box and setting the overflow to hidden will result in text getting cut off when assistive technology is used to increase font sizes.

For more information, please visit the official W3C article: Understanding 1.4.10 Reflow


Questions?

Let us know if we can help you address this specific WCAG Recommendation.