VGAR Visual Requirements

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.

When viewport size is constrained to 320 CSS pixels wide:

• there is no loss of information, meaning, or functionality and any status messages are presented in the resized zoomed viewport.
• user is only required to scroll VERTICALLY in one dimension to view or find the content
  • EXCEPT when the content requires a two-dimensional layout for meaning like tables, maps, or diagrams.

When viewport size is constrained to 256 CSS pixels high:

• there is no loss of information, meaning, or functionality and any status messages are presented in the resized zoomed viewport.
• user is only required to scroll HORIZONTALLY in one dimension to view or find the content
  • EXCEPT when the content requires a two-dimensional layout for meaning like tables, maps, or diagrams.

Actionable components have a minimum target size of 24x24 CSS pixels except for:

• Objects with a target offset of at least 24px.
  • EX: A 20px width “Cancel” button has its right most edge at least 4px away from a “Submit” button placed on the right.

• Inline content within a sentence or block of text.
  • EX: A wiki paragraph has multiple instances of hyperlinked text. Increasing the height and width of these links would impact the presentation of text and make it more difficult to read.

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.

Tool: Browser - Inspect Code

1. Inspect the target page
2. Activate the "Toggle device toolbar" button in the top left of the browser inspect panel.
3. Use the dropdown button at the top of the page to set device width to 320px for vertically scrolling pages
   • 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.

OR

1. Change width back to a minimum of 375, then change device HEIGHT to 256px for horizontally scrolling pages
   • Examine the target page to verify that all text content is available without VERTICAL scrolling. Content can be displayed directly in the page, revealed via accessible controls, or accessed via direct links.

Exception: Horizontal scrolling is allowed for the following content:

1. Data tables`
2. Photos
3. Maps
4. Charts
5. Games
6. UI with toolbars

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.