Web Governance
Are users forced to scroll in two dimensions when zoomed in?
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."
This section provides some examples of this check.
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.
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.
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.
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.
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.
For instructions on how to solve other issues, visit the best practices for responsive design article: The Building Blocks for Responsive Design.
UX design: Decides the layout for different screen resolutions.
Front-end development: Implements the changes.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance