Técnica Scripts de cliente WCAG 2.2
SCR36Permitir ver completo y quieto el texto que se desplaza
Nombre oficial en el W3C: Proporcionar un mecanismo que permita a los usuarios mostrar el texto en movimiento, en desplazamiento o de actualización automática en una ventana o área estática
En pocas palabras
Algunos textos largos se desplazan dentro de una caja pequeña, como una marquesina de avisos. En ese caso, la página debe ofrecer un control que los detenga y muestre todo el texto a la vez, quieto. Puede mostrarse en la misma zona, ampliada, o en otra parte de la página. Así cada persona lo lee a su ritmo.
Por qué es importante
El texto que pasa por una ventanita solo lo leen bien quienes leen rápido. Las personas con baja visión, con dislexia o que leen despacio se pierden partes.
Quien usa un lector de pantalla o un ampliador de pantalla también tiene problemas: el contenido cambia mientras intenta leerlo. Ver todo el texto quieto elimina esa prisa.
Cómo se hace
- Ponga junto a la zona en movimiento un botón claro, como «Ver todos los avisos».
- Al pulsarlo, detenga el desplazamiento y muestre el bloque completo, sin cortes ni movimiento.
- El texto puede mostrarse en la misma zona, ampliada, o en otra sección más grande de la página.
- Asegúrese de que el botón funciona con teclado y de que el foco no se pierde al mostrar el texto.
- No sirve si el texto no cabe entero de una vez, como un chat muy largo. En ese caso, use otra técnica, como pausar el desplazamiento.
Cómo comprobarlo
- Localice cada zona con texto que se desplaza.
- Busque el control que la detiene y muestra el texto completo. Actívelo con el teclado.
- Compruebe que el movimiento se para y que se ve todo el texto a la vez.
- Con un lector de pantalla, compruebe que el texto completo se puede leer de principio a fin.
Ejemplo
Un botón detiene una marquesina animada con CSS y muestra todo su texto quieto.
<div id="marquesina" class="desplazando">
Piscina cerrada el lunes. Nuevo horario de la biblioteca: de 9:00 a 21:00.
</div>
<button type="button" id="ver-todo">Ver todos los avisos</button>
<script>
document.getElementById('ver-todo').addEventListener('click', function () {
var caja = document.getElementById('marquesina');
caja.classList.remove('desplazando'); // detiene la animación CSS
caja.classList.add('completo'); // muestra todo el texto quieto
});
</script>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica SCR36 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Cualquier tecnología que mueva, haga parpadear o actualice texto y pueda crear un bloque de texto estático.
Descripción
Algunas páginas web muestran texto en desplazamiento porque el espacio disponible es limitado. Desplazar el texto en una pequeña ventana de texto hace que el contenido esté disponible para los usuarios que pueden leer con suficiente rapidez, pero causa problemas a los usuarios que leen más despacio o que usan tecnologías de asistencia. Esta técnica proporciona un mecanismo para detener el movimiento y hacer que todo el bloque de texto esté disponible de forma estática. El texto puede ofrecerse en una ventana aparte o en una sección (más grande) de la página. Así, los usuarios pueden leer el texto a su propio ritmo.
Esta técnica no es aplicable cuando el texto en movimiento no puede mostrarse completo en la pantalla de una sola vez (por ejemplo, una conversación larga de chat).
Esta técnica puede usarse en combinación con una técnica de cambio de estilos para presentar una página que sea una versión alternativa conforme de un contenido no conforme. Para más información, consulte C29: Usar un selector de estilos para proporcionar una versión alternativa conforme y Comprender las versiones alternativas conformes.
Ejemplos
Expandir el texto en desplazamiento en el mismo lugar
Un bloque grande de texto se desplaza por una pequeña área de marquesina de la página. Un botón permite al usuario detener el desplazamiento y mostrar el bloque de texto completo.
Este ejemplo de código requiere que tanto CSS como JavaScript estén activados y disponibles.
El componente CSS
#scrollContainer {
background-color: darkblue;
left: 10px;
overflow: hidden;
top: 50px;
visibility: visible;
}
.scrolling {
height: 50px;
position: absolute;
width: 200px;
}
.notscrolling {
margin:10px;
width: 500px;
}
#scrollingText {
color: white;
top: 0px;
}
.scrolling #scrollingText {
position: absolute;
}El script y el contenido HTML:
<script>
var tid;
function init() {
var st = document.getElementById('scrollingText');
st.style.top = '0px';
initScrolling();
}
function initScrolling () {
tid = setInterval('scrollText()', 300);
}
function scrollText () {
var st = document.getElementById('scrollingText');
if (parseInt(st.style.top) > (st.offsetHeight*(-1) + 8)) {
st.style.top = (parseInt(st.style.top) - 5) + 'px';
}
else {
var sc = document.getElementById('scrollContainer');
st.style.top = parseInt(sc.offsetHeight) + 8 + 'px';
}
}
function toggle() {
var scr = document.getElementById('scrollContainer');
if (scr.className == 'scrolling') {
scr.className = 'notscrolling';
clearInterval(tid);
document.getElementById('scrollButton').value="Shrink";
}
else {
scr.className = 'scrolling';
initScrolling();
document.getElementById('scrollButton').value="Expand";
}
}
<input type="button" id="scrollButton" value="Expand" onclick="toggle()">
<div id="scrollContainer" class="scrolling">
<div id="scrollingText" class="on">
... Text to be scrolled ...
</div>
</div>
...
Ejemplo funcional de este código: Expanding Scrolling Text in Place (expandir el texto en desplazamiento en el mismo lugar).
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica SCR36 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.