Reflow

[ecureuill]

1.4.10

This is a "not-end" requirement. What I want to mean is that this should be considered for any new page you create that Student can access. Also should correct the old pages.

I will use the label Feature Design Notes to this cases

---

Content can 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.

Except for parts of the content which require two-dimensional layout for usage or meaning.

320 CSS pixels is equivalent to a starting viewport width of 1280 CSS pixels wide at 400% zoom. For web content which is designed to scroll horizontally (e.g., with vertical text), 256 CSS pixels is equivalent to a starting viewport height of 1024 CSS pixels at 400% zoom.

Examples of content which requires two-dimensional layout are images, maps, diagrams, video, games, presentations, data tables, and interfaces where it is necessary to keep toolbars in view while manipulating content.

(Click to watch) Animation of zooming in on a responsive site. The content reflows to fit the screen.

Scenario: Responsive Design

• [ ] Responsive web design Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform with this.

• [ ] Avoiding scrolling in horizontally and vertically written languages Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.

Some Techniques you can use

• Using media queries and grid CSS to reflow columns
• Using CSS Flexbox to reflow content
• Allowing for Reflow with Long URLs and Strings of Text
• Using CSS width, max-width and flexbox to fit labels and inputs
• Calculating size and position in a way that scales with text size

Test Procedure

1. Check visible content elements at a desktop viewport width such as 1280px
2. Set the viewport width to 320px by narrowing the browser window, or by zooming in so that the viewport width is now 320px
   1. In a viewport of 1280 x 1024 you can zomming the broswer by 400% to have an equivalent vieport of 320px
3. Examine the target page to verify that all text content is available without horizontal scrolling. Exception: Horizontal scrolling is allowed for the following content:
   1. Data tables
   2. Photos
   3. Maps
   4. Charts
   5. Games
   6. UI with toolbars
4. For each content element that is not provided at the viewport width of 320px, check that there is a way to reach the same or equivalent content via discolure widgets, pop-ups, or links to other views

Expected Results: Checks 3 and 4 are true.

Examples

:x: The following examples demonstrate the failure to make content visible at a wider viewport width also available after a reflow to 320px:

• A block of blog entry links in a side column disappears entirely after reflow (i.e., it is not available further down in the single column view).
• Labels above text inputs are hidden and replaced by placeholder text after reflow, without a technique showing dedicated labels when focusing the fields.
• Sections of content text disappear after reflow, without being available via some disclosure widget.
• Information-carrying images disappear after reflow, without link or the availability of an equivalent alternative.
• A global search field disappears after reflow, without an icon or menu option to reveal a search function or reach an equivalent search page.

Scenario: Switch control

There may be situations where an author needs to use a layout that requires horizontal scrolling. In that case, it is sufficient to provide options within the content that switch to a layout that does not require the user to scroll horizontally to read a line of text. This may be achieved using standard style switching technology.

It should be noted that it is also sufficient to lay out the content in such a way that horizontal scrolling is required to access content, but that it is not necessary to scroll horizontally in order to read a line of text.

For instance, a spreadsheet that requires horizontal scrolling is acceptable if no horizontal scrolling is necessary for each column individually (i.e., scrolling is only necessary to see other columns, but not for the left or right edges of each individual column).

Tests Procedure

1. Open the content that requires horizontal scrolling on a full screen window.
2. Check that there is an option within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text.
3. Activate the option.
4. Check to make sure that horizontal scrolling is not required to read any line of text.

Expected Results: Checks 2 and 4 are true.

NOTE This technique can be used in combination with a style switching technique to present a page that is a conforming alternate version for non-conforming content. Refer to C29: Using a style switcher to provide a conforming alternate version and [Understanding Conforming Alternate Versions for more information]'https://www.w3.org/WAI/WCAG21/Understanding/conformance#conforming-alt-versions).

Examples

Example 1

A real estate company has an online annual report that has an identical layout to that of their print version, and as such, requires horizontal scrolling to read a line of text. A control is on the page that switches the stylesheet and provides a layout that does not require horizontal scrolling.

Example 2

A financial spreadsheet is online. It includes text explaining changes in the housing market in January. Off-screen to the right, there is a column with an explanation of changes to the market in September. The user can horizontally scroll to the September area and read each line of text without any further scrolling when the window size is maximized.

[github-actions[bot]]

This Feature is ready to be implemented.