Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Latest release: Component Library: v56.6.1 released on Jun 9, 2026 | Guidance: Sprint 1 released on Jun 16, 2026 | Figma: Changelog

Templates

Form Step - Minimal - Design decisions

Key design decisions for the Form Step - Minimal template.

What is an ADR?

We use the ADR (Architecture Decision Record) to structure design decision documentation. Each ADR covers three things: the context that prompted the decision, the decision itself, and its consequences — including trade-offs and any open questions.

Background

The minimal form flow template was created to address a specific usability problem: redundant content above the fold was confusing sighted users, disorienting screen reader users, and pushing form questions below the fold on mobile. By using a simplified header and footer that removes navigation elements, each form page gains space and clarity. The H1 on each page becomes unique — describing the specific question being asked — rather than repeating the form title across every step.

The pattern was first used in the check-in experience in November 2022, went through multiple rounds of usability research in 2022 and 2023, and was formally added to the VA Design System in November 2023.

Problem statement

Form header usability testing identified these pain points:

  • Sighted Veterans were confused by repetitive content in forms — the H1 and step heading repeated for several pages in a row
  • Screen reader users were disoriented by repetitive H1s, which are meant to uniquely describe the current page rather than summarize an overall flow
  • Veterans with low vision using magnification on mobile devices had form questions pushed below the fold entirely

Research

Timeline

  • November 2022 — Check-in Team research;
  • September 2023 — Veteran Facing Forms team research
  • November 2023 — Added to the VA Design System
  • August 2024 — Veteran Facing Forms team research with VADS components
  • March 2025 — Form 21-4138 taken through staging review using the template;
  • April 2025 — Template documentation published on VADS
  • August 2025 — Used in form 20-10206 for
  • October 2025 — Recommendation received to make the stepper a heading; decided not to change the design at this time ()

ADR 001 - Form question as the H1; form title and stepper are not headings

  • Decision date: March 2025

Context

In the standard VA.gov form template, every page of a multi-page form shared the same heading structure:

  • H1: The form title (e.g., “Application for disability benefits”) — identical on every page of the form
  • H2: The stepper/progress indicator (e.g., “Step 1 of 5: Your personal information”) — identical across every page within a step
  • H3: The unique question or content for that specific page (e.g., “Your name and date of birth”)

This structure meant that when a screen reader user navigated by headings — the most common way to scan a page — the H1 and H2 gave them no useful information about where they were in the form. The only meaningful heading, the H3, was buried third in the hierarchy. Focus management compounded this: some forms sent focus to the H2 (stepper) on page load; more recent forms improved on this by sending focus to the H3, but the heading hierarchy remained inverted — the most important thing on the page had the lowest heading level.

Sighted users experienced a parallel problem: the form title and step label consumed significant space above the fold, repeating on every page, while the actual question was pushed down the page.

Decision

The form question — the unique, page-specific content — becomes the H1 on every page of the form. The form title and stepper remain on the page visually, in the same positions, but carry no heading semantics. They are presentational elements.

On every page transition within the form, focus is sent to the H1. Because the form title and stepper appear visually above the H1 in the layout, focus lands below those elements. This is intentional. Screen reader users can still navigate to the form title and stepper — they are in the DOM and fully traversable in browse mode — but they are not part of the heading hierarchy and do not receive focus on page load.

Consequences

Positive:

  • The heading hierarchy on every form page is now meaningful. A screen reader user navigating by headings encounters the one thing that is unique to that page.
  • The repeated form title no longer pollutes the heading structure across every step of a multi-page form.
  • Focus lands on the most relevant content immediately on page transition.
  • Sighted users see less redundant content above the question, giving the question more visual prominence.

Negative / watch items:

  • Focus lands visually below the form title and stepper. Some users and reviewers may initially find this disorienting or flag it as a focus order violation. It is not — the elements above the H1 are still reachable and readable, but they are not the primary purpose of the page.
  • Teams migrating existing forms to this template will need to write a unique H1 for every page. For forms that already used H3 labels for each question, this is a small lift. For forms that did not, it requires more content work.
  • Decision date: March 2025

Context

The standard VA.gov header and footer contain extensive navigation: site-wide menus, links to other benefit areas, sign-in controls, and footer links. On informational pages this navigation is valuable. Inside a multi-step form, it creates a problem — every link is an opportunity to leave the form mid-completion, losing progress or interrupting a task that requires focused sequential input.

Decision

The form step template uses the Header - Minimal and Footer - Minimal components on all internal form pages. These components are intentionally stripped of navigation elements. They identify the VA and display the plain-language form title, but provide no links that would take a user away from the form flow.

This applies only to internal form pages — the question pages where users are actively filling out the form. The introduction page and confirmation page use the full header and footer, where navigation is appropriate because the user is not mid-task.

Consequences

Positive:

  • Users are less likely to abandon the form mid-completion by following an unrelated navigation link.
  • The reduced visual weight of the header and footer gives more space and attention to the form content itself.
  • The form experience feels focused and task-oriented rather than embedded in a larger website.

Negative / watch items:

  • Users who need to navigate elsewhere while in a form must use explicit affordances within the form (such as a “Finish later” or “Save and exit” link) or the browser back button. Forms should provide a clear exit path rather than relying on the user to discover one.
  • The minimal header and footer should not be used on the introduction or confirmation pages, where users benefit from being able to navigate freely.
  • Decision date: March 2025

Context

The standard VA.gov form template uses two separate affordances for backward navigation: a breadcrumb at the top of the page (linking back up the site hierarchy) and a Back button at the bottom of the page (paired with the Continue button). In a minimal form flow, breadcrumbs are problematic for the same reason as the full header — they provide links that take users out of the form and back to the broader site, interrupting a task that requires focused sequential completion.

Decision

The breadcrumb is replaced with a “Back to previous page” back link positioned at the top of the page, below the minimal header. This back link handles all backward navigation within the form. As a result, the Back button is removed from the bottom of the page — the Continue button appears alone.

Backward movement (back link, top of page) and forward movement (Continue button, bottom of page) are intentionally separated. The back link keeps users within the form flow rather than navigating them out of it.

Consequences

Positive:

  • Consistent with the minimal navigation philosophy — no links that exit the form flow.
  • Reduces visual clutter at the bottom of the page, giving the Continue button more prominence.
  • Clear spatial separation between going back (top) and going forward (bottom).

Negative / watch items:

  • Users familiar with the standard Back/Continue button pair may not immediately look for a back link at the top of the page. The placement should be consistent across all pages of the form so users learn the pattern quickly.
  • Decision date: March 2025

Context

A multi-page VA.gov form has distinct phases: an introduction page before the user begins, the active form steps where they enter information, a review page where they verify their answers, and a confirmation page after submission. The case for restricting navigation applies differently depending on where in the flow the user is.

Decision

The introduction page and confirmation page use the full VA.gov header and footer. The form step pages and the review page use the minimal header and footer.

On the introduction page, the user has not yet committed to the task. They may need to navigate to other parts of VA.gov to gather information, check their eligibility, or sign in. Restricting navigation here would be premature and potentially harmful. On the confirmation page, the task is complete. The user has successfully submitted the form and should be free to navigate wherever they need to go next.

On the form step pages and the review page, the user is actively engaged in completing the form. Navigation links create opportunities to abandon the task mid-completion. The review page is included here because it is still part of the active task — the user has not yet submitted and should remain focused on completing the flow.

Consequences

Positive:

  • Navigation restrictions are applied precisely where they help, and lifted where they would get in the way.
  • Users can freely orient themselves before starting and after finishing.
  • The transition from full to minimal header at the start of the form and back to full at confirmation provides a natural sense of entering and exiting the task.

Negative / watch items:

  • Teams must be careful not to apply the minimal header and footer to the introduction or confirmation pages. The boundary is: if the user can still abandon without consequence, use the full header; if they are mid-task, use the minimal header.
Edit this page in GitHub (Permissions required)
Last updated: May 18, 2026