Skip to content
This repository is currently being migrated. It's locked while the migration is in progress.
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/_accessibility/focus-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ On most static pages, you won’t need to move focus because browsers handle tha
#### When a new page loads

* **Don't move focus when a static page loads.** Browsers automatically set focus at the top, which works well for most users.
* **For single-page applications, set focus to the first unique heading when a new page loads.** If the new content does not have a unique heading, choose the element that gives users the most context. For multi-page forms, follow the specific guidance for [managing focus in form flows]({{ site.baseurl }}/templates/forms/accessibility-guidelines#managing-focus-in-form-flows).
* **For single-page applications, set focus to the first unique heading when a new page (route change) loads.** If the new content does not have a unique heading, choose the element that gives users the most context. In single-page applications, a new page is defined by a route change, even though the browser does not reload the document. For multi-page forms, follow the specific guidance for [managing focus in form flows]({{ site.baseurl }}/templates/forms/accessibility-guidelines#managing-focus-in-form-flows).
Comment thread
jeana-adhoc marked this conversation as resolved.
Outdated

#### When page content is added or removed

Expand Down
8 changes: 4 additions & 4 deletions src/_templates/forms/accessibility-guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,12 @@ Digitized forms on VA.gov are built as single-page applications (SPAs). When use

{% include a11y/focus-management-benefits-risks.md %}

### Where to move focus when a new form page loads
### Where to move focus when a new form page (route) loads

When a new page loads in a form application, move focus to an element that gives users context and helps them find the next action. Use these guidelines to choose the best focus location:
When a new page (or route) loads in a form application, move focus to an element that gives users context and helps them find the next action. Use these guidelines to choose the best focus location:

- **If the page has a unique page heading**, set focus there. The unique heading is usually an H1 at the top of the page or H3 inside the step content.
- **If the page does not have a unique page heading**, set focus on the step indicator header. This header is usually an H2.
- **If the page has a unique page heading**, set focus there. The unique heading is usually an H1 at the top of the page or an H3 inside the step content. Each route should have a heading that is unique to that view.
- **If the page does not have a unique page heading**, set focus on the step indicator header. This header is usually an H2. Avoid relying on this pattern when possible—prefer providing a unique heading for each route.
Comment thread
jeana-adhoc marked this conversation as resolved.
Outdated
- **When users navigate back to a form page**, treat it like a fresh page load and move focus to the top unique heading.

### Where to move focus in other scenarios
Expand Down
Loading