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:
- Pulso tabulador y se activa la primera sección. Nada se lee.
- Pulso tabulador y se activa la segunda sección. Nada se lee.
- 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 querole="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 derole="presentation"
y falla igualmente. - Usando
aria-label=""
: elaria-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?