Skip to main content

Layout and Structure

Principle​

Layout must support clear reading order, predictable navigation and comfortable interaction across all screen sizes.

Logical Reading and Focus Order​

Guidance​

  • Ensure that the visual layout follows a clear and logical reading order (top-to-bottom, left-to-right for LTR languages).
  • The placement of content and interactive elements must naturally produce a logical keyboard focus order that preserves meaning and expected interaction flow — components should appear in the layout in the same sequence in which users are expected to read and interact with them.
  • Avoid major layout shifts across breakpoints, and do not rely on CSS reordering to change how content appears. This can create mismatches between reading order and focus order.
  • If a design requires an unusual layout that would force developers to adjust focus order manually (e.g., using tabindex), the design should be revised instead.
  • Keep related elements grouped together visually and structurally to maintain clarity and expected navigation flow.
  • Primary actions must be placed where users expect them and be easy to reach in the interaction flow.

WCAG Reference​

Headings and Structure​

Guidance​

  • Use headings to express a clear visual and logical hierarchy of content. Users should be able to understand the page structure from headings alone.
  • Each page must contain one primary heading (mapped to <h1> in code) and a descriptive page title. The main heading and page title should describe the same purpose and ideally closely align.
  • Design should clearly indicate which heading is the main one.
  • Follow a consistent hierarchy:
    • The largest or most prominent section heading maps to <h2>
    • Subsections map to <h3>
  • Do not visually “jump” levels (e.g., a subsection should not look more prominent than its parent section). Maintain a logical hierarchy in both structure and appearance.
  • Ideally, the visual hierarchy should match the semantic hierarchy used in HTML. When they differ for design reasons, the correct hierarchical level must still be clearly indicated in the design (e.g., via naming in Figma). Correct heading hierarchy is essential for screen reader users — headings allow them to navigate the page structure quickly, jump between sections, and understand how the content is organized.
  • Headings must be descriptive and meaningful (“Shipping options”, not “Section”).
  • Use consistent terminology between navigation labels, page titles and headings.
  • Do not use heading styles purely for decoration — every heading must correspond to a meaningful section.
  • Prefer visible headings whenever possible. If a visible heading is not appropriate, but the section would benefit from a heading for accessibility and orientation, provide a visually hidden heading with meaningful wording.
  • Keep the heading hierarchy consistent across templates and breakpoints.

WCAG Reference​

Spacing and Grouping​

Guidance​

  • Use consistent spacing scale across the interface.
  • Provide enough vertical spacing between paragraphs, sections and interactive elements.
  • Avoid crowding elements — dense layouts reduce readability and increase interaction errors (especially on touch devices).
  • Group related content and separate unrelated content with clear visual spacing.
  • Layout must remain clear and usable when text spacing is increased.

WCAG Reference​

Hover Interactions​

Guidance​

  • Do not hide critical or required information or actions inside hover-only or other hidden interactions (e.g. micro-interactions that are not accessible via touch or keyboard).
  • Any information revealed on hover (e.g., tooltips or helpful details) must also be accessible through keyboard focus and touch (tap or long press).
  • Content revealed on hover or focus must remain visible until the user dismisses it or removes hover or focus.

Responsiveness and Breakpoints​

Guidance​

  • Ensure content reflows naturally without overlapping, clipping or horizontal scrolling at all viewport widths, down to 320 pixels.
  • Exception: content that requires a two-dimensional layout (e.g. large data tables) is allowed to use horizontal scrolling.
  • Avoid layouts that drastically change the meaning or order of elements on smaller screens.
  • Maintain consistent hierarchy and grouping across breakpoints.
  • Ensure interactive elements remain large enough and spaced appropriately on mobile.

WCAG Reference​

Avoid Fixed Heights and Overflows​

Guidance​

  • Avoid designs that restrict text to a fixed height or small container where longer content cannot expand naturally.
  • Whenever possible, do not hide text — users must be able to read complete information without guessing that something is missing.
  • If truncation is necessary (e.g., in cards, lists, product tiles), it must be visually obvious (ellipsis or similar) and a clear mechanism must exist to reveal the full text (tooltip, modal, expand action, detail page).
  • Ensure that truncation never removes essential meaning or critical information.
  • Content must remain fully accessible when text size or spacing is increased (e.g. text zoom).

WCAG Reference​