CTA-button in header-hierarchy to make the CTA more accessible

At the top of our web app, we have a heading followed by a CTA-button. Something like this mockup i just made up:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Mission: Id like to make the CTA easy to find for users using screen readers.

Suggestion: One way is to place the button in a h2, like this

<h1>Welcome to the club!</h1>
  <h2>
    <button>Become a VIP-member today</button>
  </h2>
  <p>lorem ipsum.....</p>

Since users with screen readers are using the header layout of a page to get an idea of the contents of that page, this solution would perhaps make the CTA very easy to find for these users.

(Sure, you can, and perhaps shall, place the CTA at another location on the page, but that's out of the scoop for this question).

Any pros and cons using this method? Are there any other solutions I can use to fulfill my mission?

Tags: