Enlarged Text

Overview

Users can zoom content in two ways:

• Full page zoom: Hold Ctrl (or Cmd on Mac) and press + to zoom in, or – to zoom out. This scales the entire page.
• Text-only zoom: In some browsers (like Firefox), you can zoom text separately from images and layouts.

Default zoom preserves page layout but may require horizontal scrolling at high zoom levels. Some users prefer text-only zoom to avoid scrolling.

Web developers should test that pages remain readable and functional when enlarged. See web accessibility guidance for development guidance, and use accessibility testing tools for testing support.

How to Test for Text Enlargement Support

WCAG 2.1 requires that content be readable at 200% zoom without loss of content or function.

Test in Firefox with text-only zoom:

1. Open the page in Firefox.
2. Select View > Zoom > Zoom Text Only (or press Ctrl+Shift+A).
3. Zoom in by holding Ctrl and pressing + six times. This reaches approximately 200% zoom.
4. Scroll through the entire page and check:
   • All text is readable without horizontal scrolling.
   • No content is cut off, hidden, or overlapping.
   • Interactive elements (buttons, links, form fields) remain accessible.
   • Navigation is still logical and usable.

How to Avoid Loss of Content When Text Is Enlarged

Follow these principles when building web content:

• Use responsive design: Design pages to adapt to different screen sizes and zoom levels. Use flexible layouts that reflow as needed.
• Use percentages, not pixels: Set widths, heights, and font sizes using relative units (%, em, rem) rather than fixed pixels. This allows content to scale smoothly.
• Avoid constraining text container heights: Let text containers grow as needed when text enlarges. Fixed heights cause content to be cut off.
• Test frequently: Test at multiple zoom levels (100%, 150%, 200%) and on various screen sizes during development.

For developers working with UGA CMS:

• Follow responsive design principles when customizing pages.
• For content managers working with third party developers please contact them directly.

Why This Matters

Text enlargement is a critical accessibility feature for many users:

• Low vision: People with age-related vision loss or visual impairments depend on text enlargement to read.
• Small screens: Mobile and tablet users often need to zoom in to read small text.
• Bright environments: Outdoor lighting and glare can make default text sizes hard to read.
• Temporary vision issues: Eye strain, fatigue, and temporary vision problems affect many users occasionally.

Testing Tips

• Always test at 200% zoom, the WCAG standard for text resize testing.
• Try both full-page zoom and text-only zoom in Firefox to see different effects.
• Check for content overflow (text hidden behind other content or cut off at container edges).
• Test on different viewport widths and devices to simulate real-world use.
• Test interactive elements like buttons and form fields to ensure they’re still usable when enlarged.

Common mistakes

When designing and developing pages that support text enlargement, watch out for these common issues:

• Fixed font sizes using pixels: Setting font sizes with px (pixels) instead of relative units like rem or em prevents text from scaling when users enlarge text. Always use relative units.
• Layouts that break at 200% zoom: Pages that stack columns, hide navigation, or become unreadable at higher zoom levels fail WCAG requirements. Test layouts at multiple zoom levels during development.
• Text clipped by overflow:hidden: Using overflow:hidden on containers can hide text when it enlarges. Instead, allow containers to expand or use overflow:auto to enable scrolling.
• Horizontal scrolling required at larger sizes: Content that requires horizontal scrolling at 200% zoom fails WCAG 2.1. Pages should reflow to a single column or allow scrolling without horizontal movement.
• Images of text that cannot be resized: Using images to display text (like screenshots of text or text in graphics) prevents resizing. Always use actual HTML text instead.
• Fixed-height containers cutting off enlarged text: Setting fixed heights on elements like divs or cards can cut off text when it enlarges. Use min-height instead or allow containers to grow with content.

WCAG Accessibility Criteria

Text enlargement is addressed by these WCAG 2.1 Level AA criteria:

• 1.4.4 Resize Text: Users must be able to enlarge text up to 200% without loss of content or function.
• 1.4.5 Images of Text: Avoid using images to display text; use actual text instead.
• 1.4.10 Reflow: Content must reflow properly when text is enlarged; no horizontal scrolling at 200% zoom.
• 1.4.12 Text Spacing: Users must be able to adjust text spacing (line height, paragraph spacing, etc.) without loss of content.

Getting help

If you have questions or need assistance, the Digital Accessibility Services Hub (DASH) is available to support colleges, schools, and administrative units as they build sustainable accessibility practices.

• Contact DASH at [email protected] for consultations, training, or technical assistance.
• Visit the DASH training page for resources and learning opportunities.

Accessibility is a shared responsibility, and every step you take makes UGA’s digital environment more inclusive.