[MyHealth] 404 page content

[laurwill]

Description

The Cartography team recently built a 404 page for non-Drupal pages (everything in My HealtheVet) that is a literal duplicate in code to the Drupal version (so that the same design and functionality would be present across all VA.gov pages regardless of programming language). We are in the process of submitting this to the Design System Team so that a single 404 design can live on and be governed across both programming languages.

Problem 1: Heading hierarchy is not correct

If you type in any bad URL you can see it (i.e. va.gov/dummy). You'll see that the Drupal version page is missing an H1. This is a violation of a11y requirements. Currently, the page title is coded as an H3 and it reads "Sorry -- we can't find that page." Would love for you to help me tweak language of this heading and then we'll bump it to an H1.

Problem 2: Title tag is not accurate

The current title tag reads: VA.gov | Veterans Affairs This is not accurate. The title tag should probably be something like Page Not Found | Veterans Affairs so that it represents the page title. I will update the title tag once we align on a revised H1.

Solution

We are proposing that we fix the problems in our React verison of the 404 (react version) and then propose those changes back to CAIA to implement on the Drupal version.

What we need help with

Can you look at the 404 page title (image below) and help me think about what it should say instead?

[sterkenburgsara]

As a quick fix, what do you think of this?

• Remove the word "Sorry" and the em-dash from the title (pictured in ticket above) and update to "We can't find that page"
• Bump the page title to an H1 so that it meets a11y req's
• Update title tag to be Page Not Found | Veterans Affairs

[sterkenburgsara]

//cc @laflannery if you get a second to peek at the 404 and share your a11y PoV that would be really helpful!

[laurwill]

Hey @sterkenburgsara your fixes look great to me! We could tweak the body text while we're at it.

[H1] We can't find that page Try searching VA.gov. Or select a common question or popular page.

And uncap the Q in "Common questions" header

[laflannery]

@laurwill based on your updated copy, would you mind if we also updated the "Popular on VA.gov" heading to be more specific "Popular pages on VA.gov" so it aligns with where you are directing folks in how to take action?

Additional Accessibility recommendations

1. Make page title an H1
   • As stated in the original ticket description, the main page title is an H3 currently and should be changed to an H1.
2. Make the other headings H2s
   • Currently the other 2 headings on the page (Common Questions, Popular on VA.gov) are H3s but need to be H2s to follow proper hierarchy.
3. Contain all page content within main
   • The page is broken up into 2 <div> sections but only one of these has been assigned the main landmark role. Someone navigating by landmarks on a screen reader might miss the bottom half of the page because of this set up. The 2 options are to:
     • Remove role="main" from the <div> it is on currently and add it to the parent <div>.
     • Remove role="main" from the <div> it is on currently and change the parent <div> to <main> which doesn't need a role.
4. Search component
   • I would recommend updating the search form to use the default search component if there are no technical limitations
5. Link component
   • I would recommend updating the links in the lists to use the default link component
   • And that these lists are following spacing/styles for the Quicklinks component

@sterkenburgsara Let me know if there are any questions on the recommendations above!

[laurwill]

Yes! Good call @laflannery — "Popular pages on VA.gov" it is :)

[sterkenburgsara]

Update: I thought github was broken so I submitted this ticket 7 times (created a bunch of dupes by accident). The one that is open (linked above) is our follow-on ticket that will address fixes beyond the page title & corresponding title tag. :-)

[strelichl]

@sterkenburgsara Not sure if I'm following along right, is this one ok to close out then?