Understanding WCAG SC 1.4.10 Reflow
Version and Level: 2.1/2.2 (Level AA)

Success Criterion 1.4.10 Reflow ensures that content can adapt to different screen sizes without losing information or functionality. For vertical scrolling content, this means ensuring it remains readable at a width equivalent to 320 CSS pixels, and for horizontal scrolling content, at a height equivalent to 256 CSS pixels. Essentially, if the website is responsive and adjusts well to various screen sizes, it meets the Reflow requirement automatically. This is crucial for users who may need to zoom in to read content, as it ensures they can do so without losing access to any part of the page.

Benefits:

  1. Improved Accessibility for Low Vision Users: Users with low vision can zoom in up to 400% without losing content or functionality.
  2. Enhanced User Experience: Content reflows to fit smaller screens and zoomed-in views, making it easier to read and navigate.

Main Objective:

To ensure that content can be resized and reflowed to fit smaller screens and zoomed-in views without requiring horizontal scrolling or losing functionality.

Best Practices:

  • Use Responsive Web Design from conception: Use Responsive Web Design (RWD) from the conception of design.

  • Implement accessible links and elements: Use accessible links, modals, and toggle elements to show or hide content. For example, in a navigation bar if the screen viewport shrinks or is zoomed in, provide a hamburger button to access the content in a different viewport.

  • Avoid horizontal scroll bars: Avoid horizontal scroll bars when content is zoomed to 400%.

  • Prevent content overlaps and clipping: Prevent content overlaps, clipping, and functionality loss.

Examples & Explanation:

Example: A website uses a grid layout that reflows content to fit the viewport when zoomed in up to 400%.

What Should Be Avoided

HTML/CSS

              <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <title>Non-Responsive Grid Layout</title>
                  <!-- Incorrect meta viewport missing -->
                </head>
                <body>
                  <header>
                    <h1>Welcome to Our Website</h1>
                  </header>
                  <main>
                    <div style="width: 1000px;">
                      <h2>Main Content</h2>
                      <p>This is a paragraph of text that is too wide to fit in a smaller viewport. When zoomed in, the user must scroll horizontally to read all the content.</p>
                    </div>
                  </main>
                  <aside>
                    <p>Additional content can be placed here.</p>
                  </aside>
                  <footer>
                    <p>Footer information goes here.</p>
                  </footer>
                </body>
              </html>

Explanation:In this incorrect implementation, the necessary viewport meta tag is missing, preventing proper scaling and responsiveness. As a result, when users zoom in, the content becomes too wide for the viewport, causing horizontal scrolling. This makes it difficult for users to read and interact with the content, leading to a poor user experience. Additionally, without media queries and CSS for responsive layout adjustments, the content remains fixed and doesn't adapt to different viewport sizes, further exacerbating the issue.

What Should Be Done

HTML/CSS

              <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Added viewport meta tag -->
                  <title>Responsive Grid Layout</title>
                  <style>
                    body {
                      display: grid;
                      grid-template-columns: 1fr;
                      gap: 1rem;
                      padding: 1rem;
                    }
              
                    @media (min-width: 576px) {
                      body {
                        grid-template-columns: repeat(2, 1fr);
                      }
                    }
              
                    @media (min-width: 992px) {
                      body {
                        grid-template-columns: repeat(3, 1fr);
                      }
                    }
                  </style>
                </head>
                <body>
                  <header>
                    <h1>Welcome to Our Website</h1>
                  </header>
                  <main>
                    <p>This is a paragraph of text that will reflow to fit the viewport, ensuring that users do not need to scroll horizontally to read all the content.</p>
                  </main>
                  <aside>
                    <p>Additional content can be placed here.</p>
                  </aside>
                  <footer>
                    <p>Footer information goes here.</p>
                  </footer>
                </body>
              </html>

Explanation:Using a responsive grid layout with CSS media queries ensures that the content reflows to fit the viewport at various sizes. This prevents the need for horizontal scrolling and maintains readability and functionality when zoomed in up to 400%. Additionally, the viewport meta tag with the width=device-width property ensures the page is rendered at an appropriate width on all devices and initial zoom levels.

Next Up

Expand your knowledge with SC 1.4.11 - Non-text Contrast. Learn to ensure non-text elements are accessible for all users.

Go to SC 1.4.11