SFCG

Lesson 13: Text-Only Resizing

Learn how to test content responsiveness and reflow by resizing only text.

Quick note: For this lesson, we'll be using a bookmarklet I created for testing 200% text size. I use it almost daily in my consulting work.

Background

Text-only resizing has a lot of overlap with our previous lesson (Lesson 12: Page-Level Zoom), but it's not exactly the same. They carry the same risks, but they tend to occur in different circumstances.

  • A user may need larger text on all websites, so instead of setting page-level zoom for each website, they configure text size in their browser settings.
  • A user may need larger text all the time, so they configure text size in their device settings. (This situation is where many mobile websites and web applications fall short.)
  • A user may want to increase text size without causing an entire page to switch to a "mobile" layout, so they use one of the two previous approaches.

5-minute action steps

Save the bookmarklet:

  1. Open your preferred web browser
  2. Create a new bookmark
  3. Give it a good name (maybe "Toggle text zoom")
  4. Copy-and-paste the following code for the URL:
javascript: (function () {
  const htmlElement = document.querySelector('html');
  const currentFontSize = htmlElement.style.getPropertyValue('font-size');
  const isZoomed = currentFontSize === '200%';
  const newFontSize = isZoomed ? null : '200%';
  htmlElement.style.setProperty('font-size', newFontSize);
})();

Use the bookmarklet:

  1. Go to the web page you want to test
  2. Click the bookmarklet
  3. Make note of whether the text size is doubled
  4. 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
  • Text sizes may be set with pixel units (making them non-dynamic)
  • 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 text-only resizing, and these are some of my results."