3

Tengo un escenario como el siguiente:

html {
  background: #eee;
}

section {
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 1em;
  padding: 1em;
}

[tabindex]:focus {
  outline: 1px dashed blue;
}
<section tabindex="0">
  <h1>
    Esta sección <u>SÍ</u> se marcará
  </h1>
  <p>
    Pero no se entrará dentro porque nada tiene tabindex, y no quiero que se lea nada.
  </p>
</section>

<section tabindex="0">
  <h1>
    Está sección <u>SÍ</u> se marcará
  </h1>
  <p>
    Pero sólo quiero que se lea cuando entro dentro y no cuando pongo el foco encima.
  </p>
  <p tabindex="0">
    Por ejemplo, esto sí se debería leer porque tiene tabindex, pero sólo cuando gane el foco.
  </p>
</section>

Donde hay varias secciones que se van a resaltar cuando ganen el foco porque tienen tabindex, para que sea más fácil identificar dónde se encuentra el usuario en cada momento.

Dentro de dichas secciones puede haber contenido de texto o contenido interactivo que también puede ganar el foco (ya sea porque es un botón o porque tiene tabindex). No tengo control sobre lo que va dentro.

Cuando se resalte una sección es para hacerlo de forma gráfica, no quiero que el lector de pantalla lea el contenido completo, porque si tiene algo interactivo dentro se va a leer dos veces y no quiero que haya duplicados en ese sentido.

Por ejemplo. Tal y como está ahora, usando el tabulador, se activará la primera sección y se escuchará algo del estilo:

Sección. Esta sección sí se marcará. Pero no se entrará dentro porque nada tiene tabindex, y no quiero que se lea nada.

Dándole al tabulador de nuevo se activará la segunda sección y se escuchará algo como:

Sección. Esta sección sí se marcará. Pero sólo quiero que se lea cuando entro dentro y no cuando pongo el foco encima. Por ejemplo, esto sí se debería leer porque tiene tabindex, pero sólo cuando gane el foco.

Dándole al tabulador de nuevo se activará el segundo párrafo (porque tiene tabindex) y se escuchará algo como:

Por ejemplo, esto sí se debería leer porque tiene tabindex, pero sólo cuando gane el foco.

Ese escenario no es el que quiero. Cuando una sección gana foco se lee completa y luego a su vez se lee el contenido cuando gana foco. Por ejemplo, la última frase se repite dos veces: una cuando se activa la sección y otra cuando se entra dentro.

El comportamiento que quiero es el siguiente:

  1. Pulso tabulador y se activa la primera sección. Nada se lee.
  2. Pulso tabulador y se activa la segunda sección. Nada se lee.
  3. Pulso tabulador y se activa el último párrafo de la segunda sección y SÍ se lee.

He intentado que no se lea la sección utilizando varios métodos pero han fallado:

  • Usando role="presentation": para que se ignore su significado y no se lea... pero el problema es que role="presentation" no aplica si el elemento puede ganar el foco (p.e. con un tabindex o si es interactivo).
  • Usando role="none": es un sinónimo de role="presentation" y falla igualmente.
  • Usando aria-label="": el aria-label vacío es ignorado y la sección se lee igual.
  • Usando aria-hidden="true": de este modo se ignora la sección y no se lee su contenido completo cuando ganar el foco -que es lo que quiero-, pero cuando se entra dentro, los elementos tampoco son leídos.

html {
  background: #eee;
}

section {
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  margin: 1em;
  padding: 1em;
}

[tabindex]:focus {
  outline: 1px dashed blue;
}
<section tabindex="0" aria-hidden="true">
  <h1>
    Esta sección <u>SÍ</u> se marcará
  </h1>
  <p>
    Pero no se entrará dentro porque nada tiene tabindex, y no quiero que se lea nada.
  </p>
</section>

<section tabindex="0" aria-hidden="true">
  <h1>
    Está sección <u>SÍ</u> se marcará
  </h1>
  <p>
    Pero sólo quiero que se lea cuando entro dentro y no cuando pongo el foco encima.
  </p>
  <p tabindex="0">
    Por ejemplo, esto sí se debería leer porque tiene tabindex, pero sólo cuando gane el foco.
  </p>
</section>

También probé envolviendo todo el contenido de la sección en un div con aria-hidden="false" pero parece que el aria-hidden="true" del ancestro toma preferencia sobre ese, y el contenido se sigue ignorando.

¿Cómo se podría conseguir lo que quiero?

1 respuesta 1

2

No sé si es la solución y si funcionará al 100% pero se podría usar document.activeElement.

Con eso detectamos el focus en cuando este sobre el texto que se debería leer y cambiamos toda la sección a aria-hidden = "false":

Lo he comprobado con ChromeVox y funciona

Código simplificado (y seguro mejorable):

setInterval( () => {

    if ( document.activeElement === document.getElementById( 'text' ) ) {
    
      document.getElementById( 'section' ).setAttribute( 'aria-hidden', 'false' );
    }
    
  }, 10 );
<section tabindex="0" aria-hidden="true">
  <h1>
    Esta sección
    <u>SÍ</u>
    se marcará
  </h1>
  <p>
    Pero no se entrará dentro porque nada tiene tabindex, y no quiero que se lea nada.
  </p>
</section>

<section id="section" tabindex="0" aria-hidden="true">
  <h2>
    Está sección
    <u>SÍ</u>
    se
    <marcará></marcará>
  </h2>
  <p>
    Pero sólo quiero que se lea cuando entro dentro y no cuando pongo el foco encima.
  </p>
  <p tabindex="0" id="text">
    Por ejemplo, esto sí se debería leer porque tiene tabindex, pero sólo cuando gane el foco.
  </p>
</section>

Actualizado

He solucionado los problemas de múltiples secciones y si se vuelve hacia atrás:

setInterval( () => {

    document.querySelectorAll( '.text' ).forEach( function ( el ) {    
      
      if ( document.activeElement === el ) {
        el.parentNode.setAttribute( 'aria-hidden', 'false' );
        
      }
      else {
        el.parentNode.setAttribute( 'aria-hidden', 'true' );
      }
    } );
    
  }, 10 );
<section tabindex="0" aria-hidden="true">
  <h1>
    Esta sección
    <u>SÍ</u>
    se marcará
  </h1>
  <p>
    Pero no se entrará dentro porque nada tiene tabindex, y no quiero que se lea nada.
  </p>
</section>

<section class="section" tabindex="0" aria-hidden="true">
  <h2>
    Segunda sección
    <u>SÍ</u>
    se
    <marcará></marcará>
  </h2>
  <p>
    Pero sólo quiero que se lea cuando entro dentro y no cuando pongo el foco encima.
  </p>
  <p tabindex="0" class="text">
    Número 2, esto sí se debería leer porque tiene tabindex, pero sólo cuando gane el foco.
  </p>
</section>

<section class="section" tabindex="0" aria-hidden="true">
  <h2>
    Tercera sección
    <u>SÍ</u>
    se
    <marcará></marcará>
  </h2>
  <p>
    Pero sólo quiero que se lea cuando entro dentro y no cuando pongo el foco encima.
  </p>
  <p tabindex="0" class="text">
    Número 3 esto sí se debería leer porque tiene tabindex, pero sólo cuando gane el foco.
  </p>
</section>

2
  • El problema de esta solución es que si vuelvo hacia atrás, entonces se vuelve a leer la sección completa. Y no sé si escalaría bien a una página con múltiples secciones (decenas). Pero parece un buen intento. Voy a hacer pruebas.
    – Alvaro Montoro
    Commented el 19 abr. 2019 a las 19:19
  • Ok perfecto... cuéntame igualmente si ha servido o no en tu entorno (me interesa este tema)... además quería preguntarte sobre el screen reader: Con cual o como haces tu las pruebas? Commented el 19 abr. 2019 a las 19:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.