Ensure all perceivable text is included in an ARIA landmark

I have created a html page when i do the accessibility testing i got some ARIA-landmarks suggesstions like below

Ensure all perceivable text is included in an ARIA landmark.

Using that i have added some landmarks for the heading tags like below

<div class="sign-up-title-container">
  <h1 class="sign-up-title" role="heading" aria-level="1" aria-label="Sign up now" style="color: #000000; background-color: #fcb913">
     Sign up now
   </h1>
</div>

<div class="sw-cta-container-v1">
  <p class="sw-cta-sub-text-v1" role="presentation" aria-label="Already a member?">
Already a member?
  <span>
    <a class="sw-cta-text-v1" role="button" aria-label="Log In" href="/en-us/login/?redir=/en-us/home/">Log In</a>
  </span>
  </p>
</div>

Based on the suggestions i have added the role as heading with aria-level="1" and aria-label="Sign up now"

But after running the test again i am facing the same message

Ensure all perceivable text is included in an ARIA landmark.

Not sure what i am doing wrong. Could anyone suggest me what is mistake i am doing.

The example code does not include any landmark, so the message will persist. The added ARIA attributes are harmful and deteriorating accessibility, you should probably remove them all.

> A landmark is an abstract role for a section of content that is important enough that users will likely want to be able to navigate to the section easily and have it included in a dynamically generated summary of the page. Landmarks allow assistive technologies to navigate and to find content quickly.

From ARIA: landmark role on MDN, emphasis was added for this answer.

Since landmark is an abstract role, you need to use one of the derived roles for your section, like form or region.

Any <form> is already a landmark role, and should have a helpful accessible name. This seems relevant to the example at hand, were two forms (sign-up and log-in) exist.

<form class="sign-up-title-container" aria-labelledby="sign-up-title">
  <h1 class="sign-up-title" id="sign-up-title" style="color: #000000; background-color: #fcb913">
     Sign up now
   </h1>
</form>

This will provide a named landmark, that users of assistive technology can directly find in a list of page landmarks and navigate to it.

For the issues with the suggested ARIA attributes.

Using ARIA states some foundational rules:

> If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

> Do not change native semantics, unless you really have to.

Don’t <h1 role="heading" aria-level="1">
Do <h1>

Is explicitly defining the role and level again, that the <h1> element already has. It’s only a more verbose version and should be avoided. The same goes for the next part, which also achieves nothing different, as the accessible name of an element is by default it’s text contents:

Don’t <h1 aria-label="Sign up now">Sign up now</h1>
Do <h1>Sign up now</h1>

Don’t <p role="presentation">
Do <p>

A <p> element has an implicit role of paragraph. By changing it to presentation, any semantics are taken away from this element, which makes navigating the document harder for users of assistive technology.

> The presentation role and its synonym none remove an element's implicit ARIA semantics from being exposed to the accessibility tree.

Naming presentational elements is prohibited as per ARIA standard, so aria-label must be removed.

<a role="button" href="…

This is taking away the link role that <a href> already has. It helps users understand that interacting with the element will cause some form of navigation.

Instead, the button role is applied:

> The button role is for clickable elements that trigger a response when activated by the user.

It can make sense to do so, if only visibility of a part of the UI is changed. “button or link” is covered to a large extend on the web.

@andy has some good info in his answer, especially regarding all the extra ARIA that was added to the code to try to "fix" the landmark issue.

You didn't say what tool you used to scan the page to check the accessibility, but in any event, tools that recommend that all content be contained in a landmark is purely a suggestion and not a WCAG or accessibility requirement.

You're certainly encouraged to have everything in a landmark but you don't have to. If you do want landmarks, try to use native HTML elements first before resorting to adding a role. So your page structure might be something like this:

<header>
  <!-- company logo, main top navigation elements, etc -->
  <nav>
    <!-- main top navigation -->
  </nav>
</header>

<main>
  <!-- body of page -->
</main>

<footer>
  <!-- typical footer links -->
</footer>

All of the HTML elements in the example above have default landmark roles:

• <header> (banner landmark if on page level)

• <nav> (navigation role)

• <main> (main role)

• <footer> (contentinfo role if on page level)