Can customers use your website when they enlarge the text?

By Noe Guerrero III

Imagine a McAllen repair shop with a service page that looks fine on a phone. A customer enlarges the page on a laptop to read the service details. The header takes up a third of the screen, the chat button sits over the estimate link, and the customer has to scroll sideways to read a line of text. The page still loads. Getting an estimate is another story.

Pick one thing a customer needs to do, then do it yourself with larger text and again in a narrow browser window. Open the menu, read the service details and reach the next step. If you need to zoom back out to finish, write down where that happened. You'll have a specific problem to give your designer or developer.

Check text size and layout separately

Start in a desktop browser at 100% zoom. Record the page URL, browser and starting viewport width. Then use the browser's zoom control to increase the size in steps up to 200%. Watch labels and instructions as well as paragraphs. A button can look fine at 150% and lose half its label at the next step. If the page changes layouts as you zoom, check that the text actually gets larger. The zoom percentage describes the browser setting, and a layout can change its own font sizes at the same time.

The Web Content Accessibility Guidelines (WCAG) criterion for resizing text calls for text to be enlargeable up to 200% without losing content or functionality, with exceptions for captions and images of text. A supported browser scaling feature can provide that enlargement. W3C guidance on Resize Text

Next, check how the layout reflows in a narrow space. For a page that scrolls down, use a viewport 320 CSS pixels wide. Start with a 1,280 CSS pixel viewport at 100% zoom to reach that width at 400%. You can also set a 320 CSS pixel viewport in responsive design tools for a width check. Use the width of the area displaying the page as your reference. A laptop screen's advertised resolution measures something different. W3C guidance on Reflow

At that width, read a paragraph without moving side to side. A map or data table that needs two dimensions may have its own scroll area. The directions and contact details around it should still fit the page.

Follow the same customer path

Use the service page customers actually land on. In the repair shop example, that might be a page about laptop screen repairs. Find the section that says what the shop can repair, then try to request an estimate. Open the menu at least once and check it while it's expanded. If the website has English and Spanish versions, repeat the steps in both. A label that fits on one line in English can take two lines in Spanish.

• Read the service details. Check the heading, the text under it and any link inside the paragraph. If the text cuts off, see whether you can reveal the rest with the controls the site provides.

• Use the open menu. Scroll it if needed, choose a destination and go back. Check that you can close it and reach the page underneath.

• Reach the estimate button. Look for a sticky header, chat bubble or banner covering the button as you scroll. Try it with the keyboard too. You should be able to see where focus lands and activate the control.

• Check the next screen. On a test form, trigger an empty required field and read the message at the same zoom. If you have a test environment, carry the task through to the confirmation screen. A customer can get through a readable service page and still get stuck on the form. Check a quote form on a phone

Give your developer a result they can reproduce

“Broken at large text” leaves a lot to guess. For the fictional repair shop, a useful note would say “Laptop screen repair page, Spanish, 200% browser zoom. From the home page, open the menu and select Reparación de laptops. On the service page the estimate button is partially covered by the chat bubble. Expected result is a fully visible button that can be reached and activated.” Include a screenshot showing the overlap and the browser width you used.

If a heading or label is cut off, check whether the box can grow and whether the text is allowed to wrap. A card height that was set to align a row of short labels can run out of room when those labels grow. If a fixed banner is the problem, consider letting it scroll with the page at narrow widths. Clipping text can hide a symptom, so check that the full label is still available before calling the fix done. W3C examples of clipped or obscured text

After a fix, repeat the same steps at the recorded zoom and width. Return to 100% and check the path once more. If you changed a shared component like a header or card, test a second page where it appears. Keep the result scoped to what you checked, including the page, language and task. Use the same check on another important page when you next change its layout.