To ensure an accessible and equitable experience for all users, the accessibility standard requires websites to allow users to increase text size up to 200% of its original size – without relying on the browser's built-in zoom tools. This means the website itself must support dynamic text resizing without compromising layout, functionality, or content readability. This capability is especially important for people with vision loss, reading difficulties, or temporary limitations, and is a core principle of web accessibility.
We can't rely on browser zoom for two main reasons:
- Responsiveness
Today, websites are optimized for multiple screen sizes. When users zoom through the browser, the site behaves as if it's on a small mobile screen. Content may disappear because there's no room for it on a mobile viewport. The content a user wants to read could vanish entirely. - Motor Control Challenges
For people with motor disabilities, pressing CTRL and scrolling (or clicking a "+" button) is difficult. Not everyone can do this. When we implement this feature using buttons (or any other method that preserves the rules we'll cover shortly), we make it much easier for them. Plus, we help regular users too.
Any text resizing feature must follow several key rules:
Rule 1: Preserve Content Width
The width of the text container must not change or create horizontal scrolling. Horizontal scrolling is difficult for people with motor disabilities and those with reading difficulties.
Rule 2: Prevent Text Overlap
Text must not overlap or stack on top of itself. See the image below to understand how this affects readability:
[Image: Overlapping text lines making content unreadable]
Rule 3: Avoid Text Clipping
Text must not disappear or be cut off mid-word. Consider this example:
[Image: Clipped text being cut off at the edge]
Clipped text creates an unpleasant reading experience and signals neglect. Worse, it may damage the intended message, making content impossible to understand.