Tengo una aventura de texto simple basada en la web que se puede jugar con un lector de pantalla. Lo que quiero es que cuando navegue a la página siguiente, el contenido se lea en la estructura DOM y luego el foco se establezca en el botón. Por lo tanto, debe leer el título, el texto y los botones. Cuando uso el lector de pantalla, el enfoque debe estar en el primer botón para que no tenga que navegar por toda la página para llegar al botón. es posible?
Aquí hay un ejemplo realmente simple de lo que tengo:
* { 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>