[Other - Accessibility] - Screen reader announces heading from footer when closing modal (00.00.1)

[briandeconinck]

General Information

VFS team name

Sitewide

VFS product name

VA.gov Homepage

VFS feature name

Redesigned homepage

Point of Contact/Reviewers

Brian DeConinck - @briandeconinck - Accessibility

*For more information on how to interpret this ticket, please refer to the Anatomy of a Staging Review issue ticket guidance on Platform Website.

---

Platform Issue

Screen reader announces heading from footer when closing modal

Issue Details

This is a known issue (va.gov-cms-#12008) but I'm noting it here as a launch-blocking issue.

When an NVDA user closes the modal to remain on the current homepage, the footer H2 "Veteran programs and services" is announced, even though focus is moved to the skip link (or possibly elsewhere, depending on va.gov-cms-#12045). This is misleading to screen reader users, telling them they're in a different place on the page than where their keyboard focus actually is. Even a user who is very familiar with the current homepage might struggle to figure out where they are on the page, and would likely have to explore a little to understand where focus was moved to.

Update: Some more details on what's happening after a chat with @laflannery...

This behavior is only happening for NVDA users, and appears to be related to an unresolved bug in NVDA reported in 2016. When the modal is open, NVDA moves focus to the point in the page where the modal lives -- in this case, just before the <footer>. When the modal closes, NVDA starts announcing the content from there (starting with the first heading in the footer), before recognizing that focus has been moved back to the top of the page.

Per the 2021 WebAIM screen reader user survey, NVDA is the primary screen reader for about 31% of users (second-highest market share), and is reported as "commonly used" by about 59% of screen reader users. Given the popularity of NVDA, we can expect that a good share of screen reader users who opt to stay on the current homepage will get this confusing interaction.

With that said, this is an acknowledged bug in third-party software that we don't support, and not an implementation issue with the modal code itself. As it exists now, I would still classify this as a launch-blocking issue. But that's important context to keep in mind.

Laura and I came up with a few potential workarounds, documented in the update to the Platform Recommendation section below.

Link, screenshot or steps to recreate

1. Navigate to https://staging.va.gov and activate NVDA.
2. Using keyboard, close the modal by any method: [Esc], click the [X] button, or click the "Not today" button.
3. Note that keyboard focus is moved to the skip link, but what the screen reader announces does not match that. On NVDA, I'm hearing Info landmark heading level 2 Veteran programs and services before announcing the skip link.

VA.gov Experience Standard

Category Number 00, Issue Number 00

Other References

Platform Recommendation

It looks like there's already a fix in the works, so hopefully this one is easy to close out without any drama. Still documenting it here just to note that it is launch-blocking and needs to be resolved prior to launch.

Update: Working with Laura, we've identified three potential workarounds that may resolve the issue.

• Load the new div on modal open rather than modal close. From the work happening in va.gov-cms-#12045, the new div that receives focus instead of the skip link may satisfy the workaround proposed by James Teh from NVDA.
• Move the modal from the footer to above new div. If NVDA initially begins announcing the content immediately following the modal in the document, then moving the va-modal component to the point in the document that matches where we want users go to seems like it might resolve the issue.
• Add a blank space above the new div that is not hidden in any way so there is something available for NVDA to recognize before going to the hidden elements. This is essentially James Teh's suggested workaround.

Laura is working with the team to try these workarounds.

---

VFS Guidance

• Close the ticket when the issue has been resolved or validated by your Product Owner
• If your team has additional questions or needs Platform help validating the issue, please comment on the ticket
• Some feedback provided may be out of scope for your iteration of the product, however, Platform's OCTO leadership has stated that all identified issues need to be documented and it is still your responsibility to resolve the issue.
• If you do not believe that this Staging Review issue ticket is the responsibility of your team, comment below providing an explanation and who you believe is responsible. Please tag the Point of Contact/Reviewers. Governance team will research and will follow up.

Platform directions

• Update "Issue Title"
• Link to Collaboration Cycle Request epic
• Add the VFS team and product name
• Add your name and practice area under Point of Contact(Practice Area)
• Add the Platform Issue. The Issue column from the VA.gov Experience Standards
• Add the Issue Details and any links, screenshots or steps to recreate
• Add the VA.gov Experience Standard number
• Add assignees: VFS PM
• Add labels:
  • VFS team label
  • VA.gov Experience Standard Issue number (CCIssueXX.YY) where XX is the category number and YY is the issue number, per the VA.gov Experience Standards
  • Practice area labels (508/accessibility, IA, content, design) per the VA.gov Experience Standards
  • 508 defect label, if applicable (508-defect-0, 508-defect-1, 508-defect-2, 508-defect-3, 508-defect-4)
  • Launch-blocking label, if applicable

[jilladams]

Public Websites team is tracking resolution to this in department-of-veterans-affairs/va.gov-cms#12008

[briandeconinck]

I've updated this issue based on my conversation with @laflannery to better describe what's happening. cc @artsymartha68

[jilladams]

@briandeconinck can you clarify: if we find that none of the 3 workarounds is effective, is this still launch blocking?

[briandeconinck]

@jilladams Good question, and I don't have a super clear answer for you. @artsymartha68 checked in with the VA 508 Office for advice, and I'll defer to her based on what she hears back.

[jilladams]

This issue has been resolved by department-of-veterans-affairs/va.gov-cms#12008.