question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Web tool has content not contained in a landmark

See original GitHub issue

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

Landmarks 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:closed
  • Created 3 years ago
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
ferBonnincommented, Sep 2, 2020

@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

1reaction
LiLoDaviscommented, Sep 2, 2020

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

All page content must be contained by landmarks | Axe Rules
Ensure all content is contained within a landmark region, designated with HTML5 landmark elements and/or ARIA landmark regions.
Read more >
"Skip to main content" link is not contained in a landmark
If a user wants to find the main content, they can use their landmark tool to find the <main role="main"> region directly. ·...
Read more >
Accessibility rule: Contentinfo landmark should not be ...
Best practice dictates that the primary landmark should not be enclosed within another landmark. All content must be contained within discrete areas, such...
Read more >
All content must be contained in landmarks
When content is not contained in a landmark, it will be unreachable using landmark navigation, which is an important feature provided by assistive ......
Read more >
Using ARIA landmarks to identify regions of a page - WCAG WG
The purpose of this technique is to provide programmatic access to sections of a web page. Landmark roles (or "landmarks") programmatically identify ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found