Incorrect focus management when screen reader users click links within the megamenu & land on pages with left nav menu

[laflannery]

Describe the defect

On certain pages on VA.gov, if a screen reader user clicks on a link in the desktop megamenu, the focus remains in the megamenu instead of moving to the title of the content page. This creates confusion and frustration for the user.

To Reproduce

Steps to reproduce the behavior:
(With your screen reader turned on)

1. Go to Va.gov homepage
2. Click on "VA Benefits and Health Care" in the header
3. Click on "Education and training" in the megamenu
4. Click on "Eligibility"
5. When the Eligibility page loads, the screen reader continues to read the links within the megamenu instead of the Eligibility page content.

AC / Expected behavior

• After activating any link within the megamenu, focus should always be on the skip link at the top of the page
• Ensure that your solution works across VAgov, not selectively
• Confirm with the Accessibility Lead
• After merge to prod, validate whether your solution works on injected-header sites
• (if necessary) Create any follow-up tickets

Additional context

After testing, I was not able to reproduce this behavior on all pages, only some. I am unsure if there is something different about the pages, or the megamenu or what exactly is making this behavior inconsistent across various pages.

[apisandipas]

Developer Notes

Recreation Attempt

When attempting to recreate the issue, using a screen reader, I've been unsuccessful when using the steps described above. Here is what I tried and experienced:

(With screen reader turned on)

1. Go to Va.gov homepage
2. Click on "VA Benefits and Health Care" in the header
3. Click on "Education and training" in the megamenu
4. Click on "Eligibility"
5. When the Eligibility page loads, the screen reader reads the Skip to Content Link and when thats clicked, it started to read the links in the Left Side Navigation Links.

Screen Reader used:

• Chrome Screen Reader
• MacOS VoiceOver utility.

Determination

While I could not reproduce the issue as described, I think we may be talking about the same thing after all. The links in the Left Side Navigation are nearly identical to those that appear in the Education section of the Mega Menu.

This makes sense given that in the markup, the parent element of both this Navigation and the main content area possesses the "content" ID attribute. So it's behaving as expected, but probably not as desired. This isn't then a Mega Menu issue after all, but likely a template structure issue. It's likely that we may need to change all Templates with Left had navigation to an Aside Element for the navigation and wrap the main content with a Main tag as well as give it the "content" ID attribute. Thought it may be sufficient enough to move the "content" ID to the parent element of the main content itself rather than change the semantic structure of the page.

To restate the issue: The id="content" element wraps both the side navigation menu and the main content section. I believe ideally it would only wrap the main content of the page, this given the "Skip To Content" link the desired effect of skipping to the main content section.

I would suggest we do a Spike ticket to determine LOE for making this change across the page templates. At first glance it appears the id="content" is in 49 different layout templates.

@laflannery - Can you confirm that what I've said is accurate in regards to the expected behavior?
@wesrowe @jilladams - Should this be made into a Spike ticket to make LOE determinations?

[wesrowe]

@laflannery @apisandipas - I just tried the Chrome screen reader extension and had a different experience: it read the H1 but the put focus on the VA logo (not even the skip link).

This situation would benefit from a quick meeting to get on the same page and run Bryan's hypothesis by Laura. I'll try to find us a time.

[laflannery]

@apisandipas It looks like you are correct, the SR is just reading top to bottom from the main landmark. I am still getting some odd behavior - some pages read the breadcrumbs, some don't; sometimes the skip link is read, other times it's not, etc. but overall you are correct, this is not reading the mega menu, it's the left navigation

[apisandipas]

I spoke with @laflannery on Zoom about the issue and we both agree that the behavior is too inconsistent to guess what what might be happening versus what ought to be happening. We plan to confer with a native screen-reader user to decided what should be happening and then determine a course of action from there.

[laflannery]

@apisandipas and @wesrowe Notes from my discussion with Angela:

• She agrees that it's reading the left nav - apparently she has mentioned this duplication of links between the megamenu and left navigation before and how it might be causing confusion and it seems that was the case here.
• Her recommendation is to force focus on page load to the H1:
  • This would be on content pages only. For example we were looking at a page with a form, we would want focus to go to the first form field
  • Our previous concern about what gets skipped when focus is forced - Angela says this is ok. Assistive technology users can easily go back to the left nav or the mega menu if you need/want to. So she was not concerned about this
  • She compared it to a sighted user - as a sighted user what do you do first when a page loads? You look at and read the H1. Then if needed you scan the other parts of the page. Forcing focus to the H1 will effectively do the same thing for a screen reader user.

Let me know if you have other concerns that I forgot to ask Angela, also if the solution we are asking for is not possible. Thanks!

[apisandipas]

@laflannery I want to make sure I'm clear on the ask here. Are we thinking that we want to have the H1 be the first focusable item on the pages with text content? Is this instead of the Skip to Content link? Or have it be the first thing focused after the skip to content link. I'm pretty sure I can force this by adding adding tabindex to the H1. I'm not sure if I would need to add on to the Skip Link as well. Perhaos tabindex=1 on the Skip Link and tabindex=2 on the H1 would be enough to force the order explicitly.