Web tool has content not contained in a landmark
See original GitHub issueDescribe 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
- Launch a FastPass on any page.
- Save the FastPass page as an html file.
- Open the file then turn on the landmarks visual helper.
- 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
Issue Analytics
- State:
- Created 3 years ago
- Comments:11 (4 by maintainers)
I see what you mean, the control says “select activity”. Agree we should name it “activity” then
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"
andaria-label="activity"
to its container. @ferBonnin do you agree?