Nested Content Scrolls

Short Description

Windows and frames that scroll can cause navigation challenges and visual disorientation for magnifier users

Long Description

  • Nesting content that responds to scrolling includes scrollable windows /frames, which appear as separated areas of content within the larger page. One example of content is maps that are embedded in a page and zoom in or out when the mouse pointer is over the map and a scroll action is performed.
  • Someone using a screen magnifier can only see a portion of the screen at a time, so if one part is doing something different from the rest, it can be disorienting.
  • A scrollable window/frame set within a webpage should, for example, have borders or use color contrast to indicate to the user that the scrollable area is in some way distinct from the surrounding page. Without this visual indication, a user might be confused as to why some content is scrolling independent from the rest of the content on the page.
  • When a user who does not use magnification encounters a well-delineated scrollable window or frame, it is usually easy for the user to choose whether or not to interact with the content in this scrollable area. For magnifier users, navigating these scrollable areas can be challenging in several ways:
    • If the scrollable area is not clearly delineated from the surrounding page, a magnifier user may shift visual focus from the surrounding page to the scrollable area and be unaware that they are now interacting with the scrollable area. This can cause confusion and can result in the magnifier user effectively getting stuck in the scrollable area, unaware that scrolling in this area does not scroll the entire page.
    • When a magnifier user is unknowingly stuck in a scrollable frame / window, they may miss or be unable to locate key content on the larger page.
    • Because a scrollable window or frame allows content to be scrolled independent of content on the larger page, the visual relationship between content in the scrollable area and content on the larger page changes. Magnifier users depend on visual landmarks, and on fixed relationships between visual landmarks, to stay oriented on a page. So when the content of an embedded scrollable window, moves independent of the rest of the page, this changes relationships between visual landmarks. This can make it difficult for a magnifier user to stay oriented on the page.
    • It is easy for a magnifier user to get “stuck” scrolling in an embedded scrollable window or map, as described above. Once the user realizes they are stuck, they must scroll to the left or right in an attempt to move outside of the scrollable area. Smaller embedded windows may not be difficult to escape using this technique. Larger windows can be more difficult, requiring the user to scroll a further distance to reach the edge of the embedded window, and, once they are outside the window, careful circumnavigation of the window, traveling along the window’s edge until they reach the bottom of the frame allows them to return to regular navigation of the larger page.

Example of Issue

No example currently available

Recommendations

  • Limit the size and use of scrollable areas.
  • Clearly delineate the scrollable area by using borders that are recognized as window borders, and / or use contrasting background color.
  • Inclusion of a scroll bar within a scrollable window/frame can serve as a visual indicator that the user has entered a scrollable space.
  • In the case of content such as embedded maps, it may be helpful to have the map only respond to scroll actions once a user has chosen to interact with the map by clicking on the map area.

WCAG Reference

Accessibility/Usability

Usability

Impacted Assistive Technology

Screen Magnifier

Impacted Type of Device

Computer
Mobile