Layout and content order

COMPONENT GUIDE

Explore behaviors before defining the interface.

Quick guide for designers

When to use

Use when arranging a page into columns or groups and defining how it adapts to small screens, enlarged text, and zoom.

What to design

Show the sequence of content and controls on large and small screens. Include long text, error messages, expanded content, and fixed elements.

How it behaves

Columns can stack and spacing can change without breaking relationships or losing content. Reading and navigating controls continues to make sense in each presentation.

What to document in Figma

Record reading and focus order, groups, layout changes, and handling of long content. Distinguish what the design shows from what needs browser verification.

How to review

In the design, follow the sequence and relationships between instructions, fields, and actions. In the implementation, check reading, keyboard navigation, zoom, text enlargement, and absence of overlap.

Sequence and groups

Does information follow a sequence that makes the task understandable? Do instructions precede the fields or actions they describe?
Do proximity, headings, and spacing make groups clear? Does the relationship remain understandable when columns stack?
Does the visual order suggest a different sequence from reading or focus? Avoid jumps that make it difficult to associate a control with its context. More than one order can make sense when groups are independent.

Adaptation and variable content

Define how columns reorganize without hiding information or requiring a particular device orientation, except where essential.
Allow for translated text, long names, and error messages. Can blocks grow without clipping text, overlapping actions, or changing the sequence?
In a vertical reading area equivalent to 320 CSS pixels wide, ordinary content should reflow without loss of information or functionality and without scrolling in two directions. Tables and maps may need their own treatment when two dimensions are essential.

Context and fixed elements

Do fixed headers, action bars, and notices keep content and the focused control visible and usable? Consider the space they occupy with zoom too.
When details open, messages appear, or the layout changes, can the person continue where they were? Visual reorganization should not move focus without a reason.

Interaction Methods

Mouse and touch

Scrolling the page lets people follow content in the presented sequence. Clicking or tapping a link, button, or field uses that control’s behavior; a column or empty area is not a control.

Using browser zoom or available magnification features makes content larger. When the layout reorganizes, groups and actions remain accessible.

Keyboard

Tab moves forward through controls and Shift + Tab moves backward. The sequence preserves the meaning of the task; static text, columns, and groups do not enter the sequence just because they exist.

Enter activates links and each control’s own commands let people use it. On leaving a group, navigation continues to the next control in the sequence without jumping to an unrelated area.

With the page or a scrollable area active, scrolling commands let people follow content without moving between controls:

Arrow keys scroll content in small increments in the corresponding direction when content extends beyond the visible area.
Space bar or Page Down scroll down by approximately one screen.
Shift + Space bar or Page Up scroll up by approximately one screen.

When focus is in a field or component that uses these keys, they may edit content or operate that control instead of scrolling the page. Screen readers may also intercept commands depending on the navigation mode.

Screen reader on desktop

Reading commands move through text, headings, and controls in the order provided by the page. Navigating by headings or landmarks locates a group and lets reading continue within it.

When navigating a form or list of actions, the person encounters instructions and controls in an understandable sequence. The visual number of columns does not create its own navigation commands.

Screen reader on mobile

In the default sequential navigation mode, swipe right moves forward and swipe left moves backward through content. Double tap activates the selected control. Gestures can vary with the screen reader and its settings.

Explore by touch locates content at the touched position. Even when columns stack, sequential reading keeps instructions, content, and actions related.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given a page with content and controls arranged in columns

Keyboard navigation

GIVEN a page with controls in more than one group
WHEN I use Tab and Shift + Tab to navigate controls
THEN I SEE focus in a sequence that preserves the meaning of the task and can recognize the context of each control

Screen reader on desktop

GIVEN a page with related instructions, fields, and actions
WHEN I navigate content with screen reader reading commands
THEN I HEAR information in an understandable sequence without interleaving sections from independent groups

Screen reader on mobile devices

GIVEN a layout reorganized into one column on mobile
WHEN I navigate content with a screen reader and activate the controls I need
THEN I HEAR related instructions, content, and actions in an understandable order and can complete the task

Reflow with zoom

GIVEN a vertical reading area with content that does not require two dimensions
WHEN I increase zoom to a width equivalent to 320 CSS pixels
THEN I SEE content reflow without clipping or overlap, can use all actions, and do not need to scroll in two directions to read

Content growth and context preservation

GIVEN a focused field on a page with a fixed action bar
WHEN an error message appears or text takes up more lines
THEN I SEE the field and its message without overlap and focus remains on the expected control

Points to consider

Start with the unstyled sequence. Flexbox and Grid distribute elements; choosing either does not by itself determine reading order or an accessible experience.

In the implementation, DOM order must preserve reading meaning. Visual features such as order, area placement, and reversed rows can change presentation without changing the sequence offered to assistive technologies.

Avoid positive tabindex to compensate for an incoherent visual sequence. Fix the structure and layout and verify actual keyboard and screen reader navigation.

Independent groups do not require one single order. The sequence must preserve meaning and operation; within a process, related instructions, steps, and actions must maintain their relationship.

Check ordinary content at 320 CSS pixels wide and text enlarged to 200%. Reflow can also be checked in a 1280 CSS pixel window at 400% zoom. These are distinct checks; the design alone does not prove the result.

Maps and tables may require two dimensions for their meaning. The exception does not automatically extend to the entire page or all text within those areas.

Confirm that fixed elements do not hide focused controls. When inserting or removing content, preserve focus and context; only move focus when the interaction warrants it.

References

Additional references for components of type Layout and content order.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.

W3C — Understanding Meaningful Sequence (external link, opens in a new tab)

W3C — Understanding Focus Order (external link, opens in a new tab)

W3C — Understanding Reflow (external link, opens in a new tab)

W3C — Understanding Resize Text (external link, opens in a new tab)

Page regions

Headings