title: Screen reader: Read DOM structure then focus
body: <p>I have a simple web based text adventure which could be played using a screen reader. What I want is that when I navigate to the next page the content is read in DOM structure and then the focus is set to the button. So it should read the title, text and buttons. When I use the screen reader the focus then should be on the first button so that I don't have to navigate through the whole page to get to the button.
  Is this possible?</p>
  <p>Here is a really simple example of what I have:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  html, body, tw-passage, aside, .container {
    height: 100%;
  }
  
  a {
    cursor: pointer;
    text-decoration: underline;
  }
  
  
  body {
    margin: 0;
  }
  
  div, p {
    text-align: center;
  }
  
  .title {
    font-size: 2em;
    line-height: 1em;
  }
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  
  .container div:nth-of-type(2) {
    display: flex;
    flex-flow: row wrap;
    overflow: scroll;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }
  
  .contentImg {
    max-height: 50vh;
    max-width: 100%;
    margin-bottom: 10px;
  }
  
  .content {
    order: 2;
    display: flex;
    flex-direction: column;
  }
  
  .content a {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    padding: 10px;
    margin: 5px;
  }
  
  .content p {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main class="container"&gt;
    &lt;div id="title_Start" class="title"&gt;Title&lt;/div&gt;
    &lt;div&gt;
      &lt;span class="content"&gt;
        &lt;span id="content_Start" class="LANG"&gt;
          Text...
        &lt;/span&gt;
        &lt;span class="choices"&gt;
          &lt;a&gt;Link 1&lt;/a&gt;
          &lt;a&gt;Link 2&lt;/a&gt;
        &lt;/span&gt;
      &lt;/span&gt;
        &lt;img class="contentImg" src="https://www.pngkey.com/png/detail/233-2332677_image-500580-placeholder-transparent.png"/&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>