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. 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. 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%
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.
- Julian Bez on 4 reasons not to disable zoom in your responsive design
- Webaim highlight use of zoom Survey of Users with Low Vision Results
- Mozilla Firefox tips and tricks: Zoom in, Zoom out.
- Opera Tutorials: Zoom
This technique may be used to test the following sections of best practice.
|WCAG 2.0||1.4||Make it easier for users to see and hear content…||More Info|
|WCAG 2.0||1.4.4||Resize text||More Info|
See AlsoWCAG 2.0: Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background. Understanding Guideline 1.4
1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) How to Meet 1.4.4 | Understanding 1.4.4