Reflow: lists with nested list levels

Example lists with nested lists

The following two examples are meant to demonstrate why Success Criterion 1.4.10 Reflow allows for a whole list to scroll in two-dimensions while ensuring individual list items still fit within the 320 CSS pixel width.

Zooming in to 400% on an original browser viewport width of 1280 pixels, the difference between a list which allows two-dimensional scrolling vs one that limits the entire list and its nested lists to a 320px width can be seen.

In the first example, although the list is horizontally scrollable, you can scroll to the start of a nested list, identifiable via the indentation and by the starting bullet of a list item. Reading the content of that nest listitem and its sibling list items requires one only scroll in a single direction (vertically). To read the content of a parent or child list, one again can horiztonally scroll to the start of that item, and then only scroll in a single direction to read.
In the second example, while the list does not require horizontal scrolling and technically meets the requirement, readability declines from the 3rd level of nesting onward. By the 4th level, each letter breaks onto a new line, making the content unnecessarily difficult to read.

Note that there are additional styling updates that one might make, or futher manipulations to the lists to present the content in a differnet manner, bypassing the need for any horizontal scrolling. And those would be ways to adjust content to meet Reflow. But this example is also a valid means to meet the Reflow SC.

Example 1

Make a list using one of the HTML list elements, or even an ARIA role=list container.
- There are three types of lists in HTML which can contain list items li elements.
  - the ul element
  - the ol element
  - the menu element
- Another type of list, description lists, exist as well - but they do not contain list items (li elements).
Neither the start or end tags of any of the HTML list elements are omissible.
- The end tags of li elements can be omitted if the li element is immeditely followed by another li element or there is no more content in the parent list element.
- The list marker for each li element is initially based on the parent list element used.
  - The list maker can be modified by using CSS,
    - A list item's ::marker can be styled similarly to other pseudo elements, like ::before and ::after. Use it to modify or restyle or create custom unordered list markers.
    - Using the ::before pseudo element, one can use the CSS counter and content properties to create custom incrementing numeration for list items.
  - or the list marker can be modifed by using the type attribute, if the parent list element is an ol element. The type attribute is obsolete on the ul element, and is not allowed on the menu element.
Validate your markup to make sure your lists are properly structured.

Example 2

Make a list using one of the HTML list elements, or even an ARIA role=list container.
- There are three types of lists in HTML which can contain list items li elements.
  - the ul element
  - the ol element
  - the menu element
- Another type of list, description lists, exist as well - but they do not contain list items (li elements).
Neither the start or end tags of any of the HTML list elements are omissible.
- The end tags of li elements can be omitted if the li element is immeditely followed by another li element or there is no more content in the parent list element.
- The list marker for each li element is initially based on the parent list element used.
  - The list maker can be modified by using CSS,
    - A list item's ::marker can be styled similarly to other pseudo elements, like ::before and ::after. Use it to modify or restyle or create custom unordered list markers.
    - Using the ::before pseudo element, one can use the CSS counter and content properties to create custom incrementing numeration for list items.
  - or the list marker can be modifed by using the type attribute, if the parent list element is an ol element. The type attribute is obsolete on the ul element, and is not allowed on the menu element.
Validate your markup to make sure your lists are properly structured.