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%
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 #2 Results
- Mozilla Firefox tips and tricks: Zoom in, Zoom out.
- Opera Tutorials: Keyboard shortcuts
This technique may be used to test the following sections of best practice.
|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|