Table of Contents
Giving the page user an option to progressively resize and increase the text’s size is the aim of this strategy. It’s possible that many people with limited vision are unaware of their browser’s font size modifications and rarely use magnifying software. This may be particularly true for older people who are only now becoming interested in computers and who may be experiencing age-related vision loss. It may also apply to some people who require higher font sizes due to cognitive problems.
For certain users, the system provided by this method will be easier to utilize. The system may use scripts to dynamically change the font size, or it may feature buttons or links that change the visual presentation to a different style sheet.
The author should provide controls that allow the user to progressively alter each word’s text size on the page to a size that is at least 200% larger than the default text size in order to implement this method.
The controls themselves ought to be as easy to find as possible (e.g., displayed prominently on the page, with larger text, strong contrast, etc.). You can use buttons, links, or linked pictures to achieve this.
This technique can also be used when scalable fonts are not an option, such as in legacy programs.
How to do Text resize
As per WCAG 2.0 Level AA, Guideline 1.4.4, it is imperative to enable the user to resize text. Text can be resized up to 200 percent without compromising on functionality or content, except for text images and captions.
This rule states that all text on websites must be zoomable or resizable. All modern desktop browsers will force a full page zoom when the user clicks cmd/ctrl+; therefore, it’s no longer an issue that older browsers, dating back to roughly 2004, couldn’t adjust text sizes as pixels or points. (Pro Tip: If you set your media queries using EMs instead of PX, zooming will also trigger the media query).
This guideline’s section on touch displays and pinch-zooming behaviors is more pertinent. In summary, you pass the guideline if you can pinch-zoom; if not, you fail it. For a variety of design reasons, zooming is typically disallowed. These reasons mainly have to do with aesthetics and/or pinned headers, which take up the entire display when pinch-zoomed.
Examples
• A person with low vision increases the text on a webpage from one em to 1.2 ems using their browser. Although she was unable to read the writing at the smaller size, the user was still able to read the larger font. The way any of the information is presented on the website is unaffected by using the larger font for the text.
• A Web page’s scale can be changed using a control. The website layout is changed by selecting various parameters so that the best design for that scale is used.
• The zoom feature in the user agent allows the user to change the scale of the material. Each bit of data adjusts uniformly, and the user agent provides scroll bars as required.
Research arrangement
Text scaling on webpage elements may result in different outcomes depending on the length units selected.
Since absolute length units (cm, in, px, etc.) are assumed to always be of the same size, they can be used interchangeably. I will emphasize px in my research because it is the most frequently used option for screen-rendered content, commonly referred to as a CSS pixel.
The relative length units (rem, em, vw, vh, etc.) are connected to other variables such as the viewport width and the font size of the parent element. It seems sensible to emphasize rem units in this case since they seem to be affected by text scaling settings in the first place (unless a developer changes the font size of the root element directly). To give you an idea of the kind of effect text resizing has, I created a little webpage that shows both absolute and relative length units applied to text elements and non-text components (an image of a ⭐️ in this example).
Page Zoom Overview in Safari | iOS
Let’s take a look at the iOS Safari browser, starting with the iPhone SE 2020. As mentioned earlier, a special webpage was created to track the effects of text resizing. It offers these three options:
1) A picture and a text element, both with pixel-based sizes defined.
2) There are two elements: a text and a picture, both with definite rem dimensions.
3) Two components with vmax-specified sizes—a picture and a text.
The ResizeObserver API allows us to track changes in their pixel size. We can also see the size of the viewport in the upper right corner by applying the same technique.
In Safari for iOS, the only content scaling option is page zoom. We can change the level by clicking the Aa button in the address bar. This is how the webpage looks when it is first compressed up to 200%.
Summary
Text scaling is a difficult problem in web development because of varied browser implementations, a lack of a universal formula, and several factors (page zoom, text zoom, default font size) that affect text size.
When it comes to font size and element dimensions that should scale with text, relative length units—such as rem—are the closest thing to a universal answer. Even in this case, be prepared for a few minor discrepancies.
The good news is that you can test the functionality of all currently known text scaling approaches by using Firefox during development and adjusting the available parameters.
