search

department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
282 stars 202 forks source link

[Other - Accessibility] Page transitions not announced by screen readers. (00.00.1) #43972

Closed shiragoodman closed 2 years ago

shiragoodman commented 2 years ago

General Information

VFS team name

Debt Resolution

VFS product name

Combined VA Debt Portal

VFS feature name

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

No VA.gov Experience Standard for the issue found.

Issue Details

When navigating from Your VA debt and bills (/summary) to Current copay balances or Current VA debt via the "Check your balance" and "Check the status" links, focus is not set to the h1 and the h1 heading is not announced by screen readers.

The same behavior occurs when viewing copay details. However, everything is properly announced when viewing debt details.

When the heading of the new page isn't announced, screen reader users don't receive any feedback on whether following the link worked or where they are now.

Link, screenshot or steps to recreate

  1. Log into staging as test user 81.
  2. Navigate to /manage-debt-and-bills/summary.
  3. Activate a screen reader. Recommend VoiceOver on Mac or NVDA on Windows for testing.
  4. Press [Tab] to move to the "Check your balance and resolve your bill" link.
  5. Press [Enter].
  6. Note that you have navigated to the new page, but nothing is announced by the screen reader.
  7. Press [Tab] to move to the first "Check details" link.
  8. Press [Enter].
  9. Note that you have navigated to the new page, but nothing is announced by the screen reader.
  10. Go back to Your VA debt and bills.
  11. Press [Tab] to move to the "Check the status and resolve your debt" link.
  12. Press [Enter].
  13. Press [Tab] to move to the first "Check details and resolve this debt" link.
  14. Note that the new page title is announced by the screen reader.

VA.gov Experience Standard

Category Number 00, Issue Number 00

Other References

Platform Recommendation

When moving to the new page, focus should be programmatically set to the h1 element using a tabindex="-1" attribute. The behavior when following the "Check details and resolve this debt" link should be a good template.

VFS Team Tasks to Complete

AngelaFowler82 commented 2 years ago

Part of the problem may be that for some of these there are actually two transitions. First we are shown a page which informs the user that information is being loaded, then we are shown a page with the information requested. In these cases we may need to add a time out so that focus isn't inadvertantly placed on the "loading" message then lost.

Dr-Pongo commented 2 years ago

Reviewed the heading changes on the new experience with @AngelaFowler82 and got approval to close and continue 🥳 CC: @denisecoveyduc @OptionSelect