Accessibility-insights-web: Web tool has content not contained in a landmark

[LiLoDavis]

Describe the bug

In the FastPass and Assessment pages, some content is not contained in any landmark. While this isn't a WCAG violation, it violates guidance provided in the WAI-ARIA Authoring Practices 1.1:

Including all perceivable content on a page in one of its landmark regions and giving each landmark region a semantically meaningful role is one of the most effective ways of ensuring assistive technology users will not overlook information that is relevant to their needs.

To Reproduce
Steps to reproduce the behavior:
Inspect the HTML or

1. Launch a FastPass on any page.
2. Save the FastPass page as an html file.
3. Open the file then turn on the landmarks visual helper.
4. See that some text is not contained in any landmark:
   
   
   
   • The Target Page link
   
   
   • The Export result button
   
   
   • The Start over button
   
   
   • The alert that appears when the target page is in a hidden state
   
   

Expected behavior

I recommend including this content in the banner landmark. According to [WAI-ARIA]:(https://www.w3.org/TR/wai-aria/#banner)

A banner landmark contains site-oriented content at the beginning of the page within a website.

If we substitute "app" (or "tool") for "site," it describes this content pretty well.

I think it would be relatively easy to include the Target page link and the two buttons in the <header> element. It might be challenging to get the alert into the header without affecting the layout. OTOH, the alert is probably a lower priority.

Screenshots

The visual styling is a little odd because I'm using the visual helper on a local file.

Context (please complete the following information)

• OS Name & Version: Microsoft Windows 10 Enterprise, 10.0.18363 Build 18363
• AI-Web Version & Environment: 2.19.3
• Browser Version: Google Chrome, Version 84.0.4147.89 (Official Build) (64-bit)
• Target Page: Web tool FastPass or Assessment page

Are you willing to submit a PR?

No

Did you search for similar existing issues?

Yes

Additional context

None

[msft-github-bot]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[msft-github-bot]

This issue requires additional investigation by the Accessibility Insights team. When the issue is ready to be triaged again, we will update the issue with the investigation result and add "status: ready for triage". Thank you for contributing to Accessibility Insights!

[ferBonnin]

@LiLoDavis the new UI has the target page to the side of the left nav bar; given on how the page is structure and the keyboard order we cannot contain the command bar as part of this banner landmark; we could create another banner landmark (or any other landmark that is relevant for this section; maybe navigation?)

[msft-github-bot]

The team requires additional author feedback; please review their replies and update this issue accordingly. Thank you for contributing to Accessibility Insights!

[LiLoDavis]

@ferBonnin It looks like we could include the FastPass/Assessment selector in the navigation landmark by moving role="landmark" to the div with id="side-nav-container--28pZA".
I'm not sure the command bar would qualify as navigation, as only one of the controls is a link. We could create a "command bar" landmark by adding role="region" plus aria-label="command bar" to the div with class="details-view-command-bar--3CM-3".

[pownkel]

@LiLoDavis The "navigation" landmark on the left nav is added by office fabric, not by our code, and we don't have a way to remove it to move it to the larger container. Would it be better to create a new landmark for the switcher, or create a larger landmark to encompass both the switcher and the nav (with the nav still inside its own smaller landmark)?

[LiLoDavis]

Hm. The switcher by itself doesn't really meet the definition of a navigation landmark. Also, if you have multiple navigation landmarks in the same page, each is supposed to have a label that makes it unique. I presume we can't add a label to the fabric control.

I think it would be best to create a custom landmark for the switcher by adding role="region" and aria-label="activity" to its container. @ferBonnin do you agree?

[ferBonnin]

@LiLoDavis sounds good, although I would suggest aria-label = "workflow" instead of _activity_

[LiLoDavis]

@ferBonnin I like "workflow" better than "activity". However, the landmark would be called "workflow," and its only control would be called "select activity". Seems like we might be introducing an additional term unnecessarily.

[ferBonnin]

@ferBonnin I like "workflow" better than "activity". However, the landmark would be called "workflow," and its only control would be called "select activity". Seems like we might be introducing an additional term unnecessarily.

I see what you mean, the control says "select activity". Agree we should name it "activity" then

[LiLoDavis]

Looks great!