Website Accessibility Guide

1.4.10 Reflow

Written by MCS Accessibility Team | May 17, 2020 1:00:00 PM

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.