Html – Ensure all perceivable text is included in an ARIA landmark

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.