Técnica Scripts de cliente WCAG 2.2
SCR36Proporcionar 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 resumen
Mostrar texto en una marquesina o en una franja que se desplaza ahorra espacio, pero deja fuera a quienes leen despacio o usan tecnologías de asistencia. Esta técnica propone ofrecer un botón que detenga el movimiento y muestre el bloque de texto completo de forma estática, en el mismo lugar o en una ventana aparte, para que cada persona lo lea a su ritmo. No sirve cuando el texto no cabe de una vez en pantalla, como en un chat largo.
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 las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica SCR36 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
