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.
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.
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.
WCAG Success Criteria
- G142: Using a technology that has commonly-available user agents that support zoom
- C28: Specifying the size of text containers using em units
- C12: Using percent for font sizes
- C13: Using named font sizes
- C14: Using em units for font sizes
- SCR34: Calculating size and position in a way that scales with text size
- G146: Using liquid layout
- G178: Providing controls on the web page that allow users to incrementally change the size of all text on the page up to 200 percent
- G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width
- C17: Scaling form elements which contain text
- C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized
- C22: Using CSS to control visual presentations of text
- F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured
- F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%