A11y improvements to 404 page

[sterkenburgsara]

Description

In a previous ticket, Carlos flagged a title tag issue with the Drupal & React 404 pages and suggested making an improvement to the React version. As the team inspected that, we realized that the title of the 404 page "Sorry -- we can't find that page" has incorrect heading hierarchy and was an H3, not an H1. The title tag also did not match this title semantically. Those issues were fixed in ticket #85960.

To surface any remaining a11y issues, we filed a ticket with CAIA and one of their accessibility SMEs took a look and sent follow-on comments for what we should do to enhance the a11y of the page. This additional improvements should be solved by this ticket.

User story

As a Cartography team member, I want our 404 page to meet accessibility requirements so that it can effectively serve all Veterans.

As a Veteran, I want to know when I reach a page that is not found, and have the page title, title tag, and the page content all communicate this clearly to me so that I can recover from the error and take next steps to accomplish my task.

Notes

• This ticket is a follow-on to improvements made around the page title and title tag in ticket #85960
• Read the recommendations in this CAIA ticket around content improvements and a11y
• Revisit heading hierarchy of the page and make sure all headings are incrementally increasing according to WCAG requirements.

Possible tasks:

• [x] Make changes articulated in the CAIA ticket here
• [x] Update the React 404 designs in Figma to reflect these changes
• [x] File a ticket with the Design System team to suggest that these same changes be consumed by the Drupal 404 page so that both pages are in sync with one another
• [ ] Implement the changes

Acceptance criteria

• [ ] The react 404 page now meets a11y requirements and has responded to CAIA feedback on improving it
• [ ] The CAIA ticket has been closed
• [ ] Design system team ticket has been filed to get same changes made to the Drupal instance
• [ ] QA review
• [ ] A11y review

[laflannery]

@sterkenburgsara The one update I might make to this ticket is regarding this AC:

Design system team ticket has been filed to get same changes made to the Drupal instance

I do not believe the DS owns the 404 page, I believe we do (Sitewide) so I'm not sure you would need to file a DS ticket. I will confirm this and get back to you though

[fmccaf1]

Updated design linked here

For now, these designs are living in our (Cartography team)'s Figma file. At any point we can move over to CAIA's files, just let me know where is the best location.

[fmccaf1]

I also just updated the experimental design ticket to reflect updated design.

[sterkenburgsara]

Update: @fmccaf1 presented the React design to DSC today 6/27/2024. They agreed the Design System Team should govern the 404 and that our recommendations should be accepted and also assumed by the Drupal version for single 404 design cohesion across the site. However, they asked us to align as closely with the USWDS 404 design as possible instead of continuing with the current design. In light of that, closing this ticket and creating a follow-on ticket that better captures that ask for the team's backlog.