Page Integrity when Zooming

Zooming may work marginally differently with some browsers, but on the whole with responsive design, web page content should zoom by 200% without disturbing the layout, to the degree that items do not reflow to comply with WCAG 2.0 guidelines. For WCAG 2.1 there is the need to adjust the viewport to 1280 pixels wide and zoom to 400%. Avoid horizontal scrolling unless required for the content (e.g., a data table or map)(Webaim).

On desktop/laptop computers, 200% is usually achieved by using the key combination of Ctrl + or Apple key + 5 times in most browsers. If content is disrupted by this process then there may be the need to resort to text only resizing, through the use of assistive technologies or changing font sizes in the browser settings, if available. Some webpages also offer text size changes so that images remain in their original state. Text zooming tends to break the integrity of a web page's design if it goes above 150%

zoom comparisons

provided by Patrick H. Lauke on a Webaim discussion about the subject of Browser zooming sufficient for WCAG 1.4.4 (resize text)


Depending on the type of mouse you are using it is possible to test for zooming by using the mouse wheel or Ctrl + (Cmd + on Mac) and Ctrl - (Cmd - on Mac) and Ctrl + 0 (Cmd + 0 on Mac) to return to normal in Chrome, Internet Explorer (Edge) and Firefox.   

The Web Developer toolbar in Firefox has a resizing menu that also offers different resolutions and a chance to check the window size.



This technique may be used to test the following sections of best practice.

Document Section Heading
WCAG 2.1 1.3.4 Orientation More Info
WCAG 2.1 1.4.10 Reflow More Info
WCAG 2.1 1.4.12 Text Spacing More Info
WCAG 2.1 2.5.1 Pointer Gestures More Info