Addaw, ir a inicio Donar

Técnica Scripts de cliente WCAG 2.2

SCR34Calcular con JavaScript tamaños y posiciones que se adapten al texto

Nombre oficial en el W3C: Calcular el tamaño y la posición de forma que se escalen con el tamaño del texto

En pocas palabras

Algunos scripts colocan elementos en la pantalla, como un submenú o un globo de ayuda. Esta técnica pide que el script mida el tamaño y la posición reales en ese momento, en lugar de usar cifras fijas en píxeles. Así, si la persona agranda el texto, los elementos crecen y se recolocan sin taparse ni cortarse.

Por qué es importante

Muchas personas con baja visión agrandan el texto del navegador al 200 % o más. Si un script fijó la altura de una caja en 100 píxeles, el texto ampliado no cabe. Queda cortado o se monta sobre otro contenido.

Por ejemplo, un submenú colocado «a 40 píxeles del borde» puede acabar encima del título que lo abre. La persona no puede leer ni una cosa ni la otra.

Cómo se hace

  1. Evite escribir en el script medidas fijas en píxeles para alturas, anchuras o posiciones.
  2. Obtenga las medidas reales del elemento cuando las necesite: offsetWidth, offsetHeight o getBoundingClientRect().
  3. Para colocar un elemento junto a otro, calcule su posición a partir de la del elemento de referencia. Tenga en cuenta que offsetLeft y offsetTop se miden respecto a su contenedor, no a la página.
  4. Vuelva a calcular cuando cambie el tamaño de la ventana o del texto, por ejemplo con ResizeObserver.
  5. Siempre que se pueda, deje que el CSS haga el trabajo sin JavaScript: unidades em o rem, flexbox o grid.

Cómo comprobarlo

  1. Localice los elementos que coloca o dimensiona un script: submenús, globos de ayuda, paneles.
  2. Aumente solo el tamaño del texto al 200 %, sin usar el zoom. En Firefox: menú Ver, Zoom, «Ampliar solo el texto».
  3. Abra esos elementos y compruebe que el texto cabe entero y que nada queda cortado ni tapado.
  4. Pruebe también con el zoom al 400 % en una ventana de 1280 píxeles de ancho.

Ejemplo

Un globo de ayuda se coloca debajo de su botón según la posición real de este y se recoloca si cambia el tamaño.

var boton = document.getElementById('ayuda');
var globo = document.getElementById('globo');
function colocar() {
  var caja = boton.getBoundingClientRect();
  globo.style.top = (caja.bottom + window.scrollY) + 'px';
  globo.style.left = (caja.left + window.scrollX) + 'px';
}
colocar();
new ResizeObserver(colocar).observe(document.body);
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 SCR34 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

Scripts del lado del cliente.

Descripción

El objetivo de esta técnica es calcular el tamaño y la posición de los elementos de forma que se escalen adecuadamente cuando se escala el tamaño del texto.

En JavaScript hay cuatro propiedades que ayudan a determinar el tamaño y la posición de los elementos:

  • offsetHeight (la altura del elemento en píxeles)
  • offsetWidth (la anchura del elemento en píxeles)
  • offsetLeft (la distancia del elemento al borde izquierdo de su elemento padre (offsetParent) en píxeles)
  • offsetTop (la distancia del elemento al borde superior de su elemento padre (offsetParent) en píxeles)

Calcular la altura y la anchura con offsetHeight y offsetWidth es sencillo, pero al calcular la posición izquierda y superior de un objeto como valores absolutos es necesario tener en cuenta el elemento padre. La función calculatePosition que se muestra a continuación recorre todos los nodos padre de un elemento para obtener el valor final. La función recibe dos parámetros: objElement (el nombre del elemento en cuestión) y la propiedad de desplazamiento (offsetLeft u offsetTop):

Ejemplos

Calcular el tamaño y la posición de los elementos de forma que se escalen adecuadamente cuando se escala el tamaño del texto

function calculatePosition(objElement, strOffset {
  var iOffset = 0;
	if (objElement.offsetParent) {
    do {
      iOffset += objElement[strOffset];
      objElement = objElement.offsetParent;
    } while (objElement);
  }
  return iOffset;
}

El siguiente ejemplo ilustra el uso de la función anterior para alinear un objeto debajo de un objeto de referencia, a la misma distancia del borde izquierdo: 

// Get a reference object
var objReference = document.getElementById('refobject');
// Get the object to be aligned
var objAlign = document.getElementById('lineup');
objAlign.style.position = 'absolute';
objAlign.style.left = calculatePosition(objReference, 'offsetLeft') + 'px';
objAlign.style.top = calculatePosition(objReference, 'offsetTop')
 + objReference.offsetHeight + 'px';

Pruebas

Procedimiento

  1. Abrir una página diseñada para ajustar el tamaño de los contenedores cuando cambia el tamaño del texto.
  2. Aumentar el tamaño del texto hasta el 200 % con el ajuste de tamaño del texto del navegador (no con la función de zoom).
  3. Examinar el texto para asegurarse de que el tamaño del contenedor se ajusta para dar cabida al tamaño del texto.
  4. Asegurarse de que ningún texto queda «recortado» o ha desaparecido como consecuencia del aumento del tamaño del texto.

Resultados esperados

  • Las comprobaciones n.º 3 y n.º 4 son verdaderas.

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.

Solicitar una auditoría

Basado en la técnica SCR34 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.