1.4.10: Reflow

The Reflow guideline requires that content must be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

  • Vertical scrolling content at a width equivalent to 320 CSS pixels.
  • Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Importance of 1.4.10: Reflow Success Criterion

Reflow is essential for creating a flexible, accessible web experience. It benefits users with various disabilities. For users with visual impairments, reflow ensures that text and images can be resized without requiring horizontal scrolling, which can be challenging for screen magnifier users. For those with motor impairments, reflow reduces the need for fine motor control, making navigation easier. Additionally, for users with cognitive impairments, reflow simplifies the user experience by reducing cognitive load, making it easier to focus and understand the content.

Primary Use Cases and Requirements Under Guideline 1.4.10: Reflow (Level AA)

Mobile Users

Scenario: Users on mobile devices need to read and navigate content without excessive scrolling.

Example: A news website that adjusts its layout to fit the screen width of mobile devices.

Implementation:


@media (max-width: 320px) {
    .content {
        font-size: 16px;
        line-height: 1.5;
    }
}

Screen Magnifier Users

Scenario: Users with visual impairments use screen magnifiers to enlarge content, which should reflow within the viewport.

Example: An educational website where text and images resize without causing horizontal scrolling.

Implementation:


.container {
    width: 100%;
    padding: 1em;
}
.image {
    max-width: 100%;
    height: auto;
}

Users with Motor Disabilities

Scenario: Users with motor disabilities benefit from layouts that reduce the need for horizontal scrolling.

Example: A shopping website where product descriptions reflow vertically, allowing easy access to information.

Implementation:


.product-description {
    display: flex;
    flex-direction: column;
}

Users with Cognitive Impairments

Scenario: Users with cognitive impairments need a simple, clear layout that doesn't require navigating in multiple directions.

Example: A banking website where forms and text content adjust to the screen size, reducing the need for scrolling.

Implementation:


.form-container {
    display: block;
    margin: 0 auto;
    width: 90%;
}