Scrolling in more than one direction is not necessary for small displays and zoomed content
1.4.10 Reflow
This document gives information about the related accessibility checks:
Scrolling in more than one direction is not necessary for small displays and zoomed content.
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.
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 gives some examples of this check.
Example 1
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
While users zoom in on a webpage, the lines extend beyond the right edge of the screen, necessitating horizontal scrolling to read the start and end of each line. This makes reading difficult for the user as both vertical and horizontal scrolling are required to read the text.
Example 3
When users zoom in on content that requires a two-dimensional display, it is permissible to have 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
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:
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 do that by pressing the key combination “CTRL” + “+” - or via the browser’s 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 perfectly acceptable as long as the content remains accessible.
To solve any issues, follow best practices for responsive design.
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.
Scrolling in more than one direction is not necessary for small displays and zoomed content
1.4.10 Reflow
This document gives information about the related accessibility checks:
Scrolling in more than one direction is not necessary for small displays and zoomed content.
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.
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 gives some examples of this check.
Example 1
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
While users zoom in on a webpage, the lines extend beyond the right edge of the screen, necessitating horizontal scrolling to read the start and end of each line. This makes reading difficult for the user as both vertical and horizontal scrolling are required to read the text.
Example 3
When users zoom in on content that requires a two-dimensional display, it is permissible to have 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
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:
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 do that by pressing the key combination “CTRL” + “+” - or via the browser’s 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 perfectly acceptable as long as the content remains accessible.
To solve any issues, follow best practices for responsive design.
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