Usability & Web Accessibility – Zoom & Resizing Text
Posted by Yale University | Date Accessed: August 16, 2022
Table of Contents
- How Browsers Zoom and Resize Text
- Avoid Clipped, Truncated, Obscured, and Overlapping Text
- Avoid Horizontal Scrolling
- Development Best Practices
How Browsers Zoom and Resize Text
Users with low vision may prefer to have their browser resize text or zoom into page content to make it easier to read.
Enlarging text is primarily the browser’s responsibility. Browsers accomplish this chiefly in one of two ways: enlarging the font size only, or zooming into the entire page and applying responsive styles, as appropriate.
Developers should code in such a way that does not interfere with the browser’s default ways of enlarging content. Developers should verify this for themselves.
Instructions for how to zoom or resize text in common browsers:
- Safari: changing font size and zoom level(link is external)
- Chrome: zoom and set font size(link is external)
- Firefox: font size and zoom(link is external)
- Microsoft Edge: making text larger(link is external)
It is also important to avoid providing images of text, as such text cannot be resized through text resizing, and may become blurry when zoomed.
Avoid Clipped, Truncated, Obscured, and Overlapping Text
A developer’s primary responsibility is to insure that, when enlarged, text doesn’t become illegible when zoomed because it overlaps with adjacent text or truncated altogether:
These kinds of problems are more likely to occur with text resizing rather than with zooming content. While a page technically fulfills the WCAG criteria if it allows either text resizing or zooming, it is best practice for developers to accommodate both if possible.
Avoid Horizontal Scrolling
Internet users expect to scroll vertically. But, they may not be accustomed to scrolling horizontally, or may lack the motor ability to do so. Developers should avoid horizontal scrolling on viewports 320px wide and larger.
Development Best Practices
To allow for maximum support of browser zooming and resizing, developers should follow a few best practices:
- Use CSS, rather than tables, for layout.
- Define font sizes and text container dimensions in relative units, such as ems, rems, percents, or named font sizes. Avoid explicitly defining the width and height of containers in pixels.
- When scripting, calculate the size and position of elements such that they scale with text size(link is external).
- While WCAG 2 does not give a mandate for a minimum font size, it is best that developers use generous, legible font sizes.
- Provide sufficient space between columns of text to mitigate the risk of text overflowing their containers.
- If images of text must be used, the text should be at least 18pt (24px).
About This Article:
A Life Worth Living has copied the content of this article under fair use in order to preserve as a post in our resource library for preservation in accessible format. Explicit permission pending.
Link to Original Article: https://usability.yale.edu/web-accessibility/articles/zoom-resizing-text