Are users forced to scroll in two dimensions when zoomed in?
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
Sight-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
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.
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.
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.
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
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/ can tell you your current viewport dimensions.
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.
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.
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.
Are users forced to scroll in two dimensions when zoomed in?
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
Sight-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
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.
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.
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.
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
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/ can tell you your current viewport dimensions.
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.
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.
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.
Web Governance