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

Allow Text Resizing (VIS-WEB-001-01)

Pages MUST be coded to allow users to increase the font size of all page content 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.

Content Reflow (VIS-WEB-001-04)

When viewport size is constrained to 320 CSS pixels vertically by 256 CSS pixels horizontally:

  • there is not loss of information, meaning, or functionality and any status messages are presented in the zoomed viewport.
  • user is only required to scroll in one dimension to view or find the content

User Text Styling (VIS-WEB-001-05)

User text style settings do not cause a loss of content when:

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

Test Procedures

OS Text Size Settings (VIS-WEB-001-01-T)

Windows: Use the Windows key and type "Make Text size bigger"

Mac: Display settings>Larger Text

 

Use the OS settings to increase text size to 200% and confirm that text on the target page adapts and is not clipped, truncated, or obscured.

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.

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

  1. Use your system's display settings to set the display resolution to 1280 x 1024.
  2. Use your browser's settings to set the target page's zoom to 400%
  3. Examine the target page to verify that all text content is available without horizontal scrolling. Content can be displayed directly in the page, revealed via accessible controls, or accessed via direct links.

Text Spacing Bookmarklet (VIS-WEB-001-05-T)

  1. Load the page in the browser of your choice.
  2. Run the Text Spacing Bookmarklet
  3. Perform a visual inspection of the content and confirm that there is not a resulting loss of content or meaning.

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.