Support Zoom (VIS-WEB-001)

Make sure fonts can be increased to 200% without breaking layout.

To accommodate users with low vision and users who benefit from more readable text, make sure that all elements of the interface remain usable when the browser view is zoomed to at least 200%.

This rule applies to all text on the page other than text that is part of logos. When the view is zoomed to 200% all interface elements must continue to function normally.

Requirements

Increase Text Size to 200% (VIS-WEB-001-01)

Pages MUST be coded to allow users to increase the size of all page content (including text) via built-in browser zoom by at least 200% without text clipping, truncating, or being obscured.

<!-- Don't use maximum scale in your meta tags on responsive pages -->

<meta name="viewport" content="width=device-width, initial-scale=1.0">
		

Browser Zoom - Usable (VIS-WEB-001-02)

Using the built-in browser functionality to zoom all page content to 200% (including text), all interactive content MUST remain fully usable.

Browser Zoom - Informed of Changes (VIS-WEB-001-03)

Using the built-in browser functionality to zoom all page content to 200% (including text), any user actions that result in on-screen changes MUST meet one of the following criteria

  • A clear visual cue is provided within the viewed area that indicates to the user that the page has changed outside of the currently viewed area based on their action, OR
  • The resulting change occurs within the currently viewed area.

Test Procedures

Visual Inspection (VIS-WEB-001-01-T)

Increase page text 200% using the browser's built in functionality and confirm that the zoomed layout has no clipped, truncated, or obscured text.

Visual Inspection (VIS-WEB-001-02-T)

Using the browser's built in functionality, set the browser to a width of 1280px and then increase the zoom level to 200% and confirm that all interactive content is fully usable at the increased zoom level.

Visual Inspection (VIS-WEB-001-03-T)

Using the browser's built in functionality, set the browser to a width of 1280px and then increase the zoom level to 200% and confirm that when an action is initiated that results in changed content

  • a clear visual cue is provided within the currently viewed area indicating a change has occurred outside of currently viewed area, OR
  • the resulting change can be observed within the current view.

Related Content

WCAG Success Criteria

W3C Techniques

Common Failures

These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information.  You should not act or rely on such content without seeking the advice of a professional.  All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.