Search tools - Review title tags for improved experience

[mnorthuis]

There are a number of search tools on VA.gov, and each has a slightly different user flows, breadcrumbs, H1s and URL structure. Looking to document these tools and work with accessibility to determine a recommended approach to these attributes to improve accessibility and establish a consistent pattern.

Tools to review:

• Global search
• Find a form
• Resources and support search
• Yellow Ribbon school search
• GI Bill comparison tool (new design)
• Find a VA location

Existing accessibility issues:

• department-of-veterans-affairs/va.gov-cms#13147 508-defect-4 [COGNITION]: Breadcrumbs should match h1
• department-of-veterans-affairs/va.gov-team#29733 508-defect-3 [Headings]: Search resources and support articles or all of VA.gov should be a heading
• department-of-veterans-affairs/va.gov-team#29743 508-defect-2 [Headings]: Search results for resources and support should be consistent with other search heading orders

[mnorthuis]

Existing pages along with their H1s, breadcrumbs, title tags and URLs documented here: https://app.moqups.com/Rnc4BDEKrA/view/page/a7a48e1ac

[mnorthuis]

Recap of discussion with @joshkimux and proposed solution to review with others

• All existing VA.gov search tools are single page experiences - i.e. the user enters their search on a page, that page refreshes to show the results. Users are not sent to a new page to view results, so URLs, breadcrumbs and H1s do not change (URLs simply add parameters), just the content on the page.
• Accessibility standards require a page have an accurate title tag that changes when the URL changes. Our current site does fulfill these requirements.
• An additional best practice would be to also indicate when a change has happened on the page due to user input. For our search tools, a change in the page title would help communicate and reinforce that the page has refreshed based on the input from the user. The more detailed this update is, the more helpful it is.

We recommend exploring an update to the title tag to better communicate when a search page is refreshed and results are displayed. Note: Search engines will not be indexing search results pages, so there are no SEO considerations for these changes.

Options:

• Add a segment to indicate the page now shows results and include as much of the user's search input as possible.
  • Example: "Search for [search criteria] | Search VA.gov | Veterans Affairs"
  • Search entries can be quite lengthy, and some search tools allow for multiple parameters (i.e. facility locator has address, facility type, etc). The browser will truncate the tag in the tab. We could also consider specifying that only certain parameters are shown.
  • Our current standard only shows the current page plus "Veterans Affairs".
  • Note: Screen readers will still read the entire title tag, even if truncated in the visible tab. Sighted users will see a truncated title tag, but should still see the site url (va.gov) when they hover over the tab.
• Add a segment to indicate the page now shows results
  • Example: "Search results | Search VA.gov | Veterans Affairs"
  • This provides a shorter initial segment, but could still be a long title tag.
  • Doesn't provide concise information to users about what they searched for.
  • Our current standard only shows the current page plus "Veterans Affairs".
• Modify the existing page segment of the title tag
  • Example: "Search results for [search criteria] | Veterans Affairs"
  • Title tag may still be truncated by browser, but allows for more concise information
  • The context of the page/search tool is lost
  • Follows our current standard of only showing the current page plus "Veterans Affairs".

[mnorthuis]

Reviewed with sitewide content, and they are good with the request. Their preferred option is the third.

Best next step is for @mnorthuis to map out what each search tool's title tag might look like as a POC.