SFCG

Lesson 12: Page-Level Zoom

Learn how to test content responsiveness and reflow by zooming a page.

Background

Page-level zoom is a standard browser feature that's used to increase the size of web page content. It doesn't require assistive technology, and can be quickly adjusted with a keyboard shortcuts. People are able to have different zoom levels for different websites, and the number is saved by a browser for future viewing.

If a website isn't designed or coded to shift a web page's layout or content as the page is zoomed, there are risks like:

  • Partially cutting off vital content
  • Forcing users to scroll oddly
  • Making content unreachable

5-minute action steps

  1. Go to the web page you want to test
  2. Adjust the page zoom to 200%
    • Increase: hold the control/command key and press the plus key
    • Decrease: hold the control/command key and press the minus key
    • Reset: hold the control/command key and press the zero key
  3. Make note of content now hidden or difficult to reach

Analyzing the results

Determining what's preventing content from resizing and reflowing results requires some knowledge of HTML, CSS, and how to inspect them using a browser's devtools. If that's not your area of expertise, no worries! Go ahead to the next section and prepare to share your results.

Here are some things to check:

  • The "viewport" meta tag (<meta name="viewport">) may be missing or incorrect
  • UI elements might have non-dynamic heights or widths set
  • Text, flexbox, or grid wrapping might be prevented
  • Text on top of images may both shift in a way that fails color contrast
  • There may not be any or enough CSS media queries to adjust layouts

Share your results

The end goal of this exercise is to resolve the issues you've found. Tracking them in your project management system is a huge step toward that goal. Sometimes we can't fix accessibility issues immediately, but we can always chip away at them over time.

Share the results you've noted today with the person or team responsible for fixing these kinds of issues. You might start the conversation with, "I'm learning to test page-level zoom, and these are some of my results."