--- title: "Are users forced to scroll in two dimensions when zoomed in?" date: "2024-08-18T12:48:06+00:00" summary: "Ensure content is accessible on small screens without two-way scrolling. Learn responsive design techniques for better user experience." image: type: "page" url: "/web-governance/are-users-forced-scroll-two-dimensions-when-zoomed" id: "7a097be7-02cf-4b32-a02b-b02605f3025f" --- Table of contents will be added **1.4.10 Reflow** Introduction ------------ This document provides information about the Acquia Web Governance accessibility check: * Are users forced to scroll in two dimensions when zoomed in? What ---- Users should be able to use content and features without the need to scroll in two directions, even on small screens. This is typically achieved through the use of a responsive design. Why --- Users with visual impairments may struggle to read text content when both vertical and horizontal scrolling is required. When the user zooms in on the page to see the text, it can sometimes cause a line of text to become "too long" and extend beyond the screen. In this situation, the user will need to scroll horizontally to read the entire line, which makes reading difficult, as they have to scroll both vertically to navigate through the content and horizontally to see the end of each line. Who --- ### This check affects the following users who have * Vision impairments: Who zoom the content to be able to read the text. * Motor impairments: Who find it difficult to perform a scroll action. ### User story ![A senior lady wearing a large flowery hat, standing outside in the sunshine,](https://acquia.widen.net/content/826f9703-ad2a-4638-bdc1-71f404e6a040/web/Mon_AccessibilityHelpCenter-UserStory-ElderlyLadyInHat.png) Sarah is a retired school teacher who has been living with diabetes for the past 15 years. Due to her condition, she has experienced gradual vision loss over time. Sarah used to rely heavily on her eyesight to read books, drive, and perform various tasks independently. However, as her vision has deteriorated, she now faces challenges in carrying out everyday activities. _"I need to zoom in on websites, otherwise I simply cannot read the letters anymore. Sometimes, I have to constantly move the mouse back and forth just to read the text. It is frustrating and really annoying because I can see that text on other websites easily adjusts to fit my zoom level."_ Examples -------- This section provides some examples of this check. ### Example 1: Vertical scroll When users zoom in on a website, the length of the lines is adjusted so that the text flows down into a single column (similar to text wrap) instead of causing the screen to expand on the side. In this example, the requirements are satisfied because the user only needs to scroll vertically to read the text. ![A web page contains a column with a paragraph of text. The page has a zoom level of 400%. The text remains inside the column and does not overflow the screen on the side. Therefore, the user only needs to scroll vertically in order to read the full paragraph.](https://acquia.widen.net/content/9ee5f774-42ae-4b6f-b6be-588d4002eadd/web/Mon_AccessibilityHelpCenter-example_page_zoomed_text_does_not_overflow.png?w=480&itok=HG3wDz47) #### Example 2: Horizontal and vertical scroll While users zoom in on a webpage, the lines extend beyond the right edge of the screen, which means that they have to scroll horizontally to read the start and end of each line. This makes it difficult for the user to read because both vertical and horizontal scrolling are required to read the text. ![A web page contains a column with a paragraph of text. The page has a zoom level of 400%. The text does not remain inside the column and overflows the screen on the side. Therefore, the user needs to scroll both horizontally and vertically in order to read the full paragraph.](https://acquia.widen.net/content/44f9ec0b-3af2-4825-b79c-c3351872bebb/web/Mon_AccessibilityHelpCenter-example_page_zoomed_text_overflows.png?w=480&itok=iJX-wpmV) #### Example 3: Multi directional scroll When users zoom in on content that requires a two-dimensional display, it is acceptable to require the scroll in multiple directions. In this example, it is acceptable to display a scroll bar on a map when users zoom in, because a map cannot be meaningfully adapted to a single column view. ![A map on a website is zoomed in to 400%. Scroll bars appear at the bottom and on the right side of the map, enabling the user to scroll in two dimensions.](https://acquia.widen.net/content/b6f2cc79-ea32-47c1-b969-08dfe05f8300/web/Mon_mappscroll-example.png) How --- This section provides information about how to review and fix the issue. ### How to review it Review your page to ensure that content is visible without the need to scroll both vertically and horizontally when: * Content designed to vertical scroll is set to a width equivalent to 320 CSS pixels; or when * Content designed to horizontal scroll is set to a height equivalent to 256 CSS pixels. ### How to fix it 1. Maximize the browser window to ensure you have a viewport width that is minimum 1280 pixels, which is corresponding to 320 CSS pixels. The website [https://whatismyviewport.com/](https://whatismyviewport.com/) can tell you your current viewport dimensions. 2. Use your browser zoom function to zoom the content to 400%. In most browsers you can press the key combination **CTRL** + **+** or use the browser menu. ![A Chrome browser is open. The "View" menu has been expanded in which it is possible for the user to click a "Zoom in" option.](https://acquia.widen.net/content/6388ae70-704c-4841-8f5b-5bcdeaac793c/web/Mon_browser_zoom_selection.png) 3. Check that there is no loss of content or functionality. Some parts of your content may adapt to fit the layout. For example, a vertical main menu that collapses into a mobile version activated by a button. This is acceptable if the content remains accessible. For instructions on how to solve other issues, visit the best practices for responsive design article: [The Building Blocks for Responsive Design](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks). Notes * 320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom. * Some types of content are exempt from the requirement as they require a two-dimensional display to maintain their intended meaning. This includes images required for understanding (such as maps and diagrams), video, games, presentations, data tables (not individual cells), and interfaces where it is necessary to keep toolbars in view while the content is manipulated. It is acceptable to provide two-dimensional scrolling for such parts of the content. ### Who in your team can typically fix this? * UX design: Decides the layout for different screen resolutions. * Front-end development: Implements the changes. Additional resources -------------------- ### WCAG success criteria * [1.4.10 Reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) Related articles ---------------- [Content is not restricted to a single display orientation](/web-governance/orientation-page-should-not-be-restricted "Orientation of the page should not be restricted")