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?
Here is a really simple example of what I have:
* {
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;
}<main class="container">
<div id="title_Start" class="title">Title</div>
<div>
<span class="content">
<span id="content_Start" class="LANG">
Text...
</span>
<span class="choices">
<a>Link 1</a>
<a>Link 2</a>
</span>
</span>
<img class="contentImg" src="https://www.pngkey.com/png/detail/233-2332677_image-500580-placeholder-transparent.png"/>
</div>
</main>