a11y: No accessible routing for screen/page changes

Frontend Deployment type

• Other (please specify below)
  • cloud.gov stratos dashboard

Expected behaviour

Whenever screen reader or sighted keyboard-only users activate menu or other interactive control items that change the interface contents, the following is expected to happen:

• Document title should be updated to reflect the new page/view contents (e.g. Applications, Marketplace, etc.)
• Focus should shift to the h1 or main heading element in the new view/page.
• An announcement of what has changed should be given via an aria-live region if a filter or sort mechanism is applied to announce that contents have changed in some way.

Actual behaviour

• Page/document title remains unchanged as "Stratos"
• Focus remains on the element that was activated (link, button, or other control)
• No announcements are made available for screen reader users

Context

Users affected: Low vision, Blind, Motor impaired
Severity: Critical

Applicable WCAG 2 SC(s)

• 1.3.1: Info and Relationships - Level A
• 2.4.2 - Page Titled - Level A
• 4.1.2: Name, Role, Value - Level A

Demo video

Screen recording of Safari + VoiceOver to demonstrate these issues (GSA viewers only)

Recommendations

• Review the Angular Accessibility - Routing and focus management resource for ideas on how to implement within Stratos.
• Article by Dave Rupert on Accessible Page Navigation in Single Page Apps
• Angular.io Blog - Accessibility in Angular Applications

Start with the Angular Accessibility routing and focus management resource linked in the issue, then locate Stratos's routing and view-change entry points. Done means changed views update the document title, move focus to the new view's h1 or main heading, and announce filter or sort changes through an aria-live region.