Search code examples
htmlaccessibilitywcag

Is horizontal scrolling within a container considered inaccessible (even though the page itself is responsive)

This is the guidance I'm looking at: https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

For example, in the image below, the highlighted red container scrolls horizontally, but the rest of the page is responsive.

The w3 guidance says 2-d scrolling should be avoided, but I didn't know if that specifically meant the page itself should not scroll horizontally.

example page with an example of horizontally scrolling container highlighted

Solution

  • I believe that 1.4.10 Reflow is intended to address webpages where the entire page requires vertical and horizontal scrolling to be readable on mobile devices. If yours only requires horizontal scrolling in one small area, then you should be fine.

    This may be helpful:

    1.4.10 Reflow (AA)

    Intent: Having to scroll in two dimensions to view content on a page makes seeing and reading the content difficult. If a user has to scroll in order to see a full line of text, it becomes very difficult to then follow to the next line.

    https://dequeuniversity.com/resources/wcag2.1/1.4.10-reflow

    It's also worth noting a couple of things with a design like this:

    • The items in this section need to be keyboard accessible, as per 2.1.1. Keyboard.
    • The user should be able to scale the text to 200% without the layout breaking, as per 1.4.4. Resize Text.
    • When a keyboard user tabs through the links, the focus ring should be visible, as per 2.4.7 Focus Visible.