Propuesta de workflow para tests de Zoom ~ 1.4.4 Resize text (Level AA)

Workflow empleado por el Equipo de Accesibilidad

Siguiendo la guía de Deque, la herramienta seleccionada por el equipo para verificar este criterio es el DevTools del navegador.

Dificultades del workflow anterior

El zoom de la interfaz de las DevTools no aplica un Zoom de Navegador, este zoom amplía la UI, no afecta directamente al Viewport. En los casos en los que se pudo observar un cambio en el Viewport al aplicar el zoom de las DevTools al 200%, es porque el contenedor del Viewport cambia su ancho para no desbordarse contra la barra latetal (DevTools). Si este zoom modificara realmente el Viewport, se activarían las mediaqueries/breakpoints de las páginas y cambiaría el layout idealmente

El viewport se ve afectado al aplicar este zoom de las DevTools al 150% solo porque no cabe en pantalla, en el resto de escalas, no se vió afectado el Viewport.

Pasos a seguir para el nuevo workflow

1. Comprobar que tenemos el escalado de pantalla al 100%
   • Windows 11: Click derecho en el escritorio/ Opciones de pantalla/ Escala
2. Abrir el navegador Chrome
3. Presionar F12 o Ctrl + Shift + I. Mac: ⌘ + ⌥ + I
4. Verificar que está desactivado el modo Responsive
5. Arrastrar la barra lateral de las DevTools hasta llegar al tamaño de Viewport deseado.
6. En este punto, hacer Zoom hasta alcanzar 200%

Antes de medir, comprueba en la barra de DevTools que:

• El modo Responsive está desactivado
• El Viewport tiene el tamaño deseado
• El indicador de escala muestra 1.00
• Sabes con qué resolución de pantalla estás trabajando

Otro acercamiento para lograr 200% de zoom

Con el modo Responsive activado, dividir las dimensiones del viewport a la mitad (largo y ancho). Esta equivalencia se explica más adelante

Web para verificar viewport actual

https://whatismyviewport.com/

Conceptos

Viewport

En términos de navegadores web, se refiere a la parte del documento que usted está viendo, la cual es actualmente visible en su ventana. El contenido fuera del viewport no es visible en la pantalla hasta que sea desplazado dentro de él. La porción del viewport que se encuentra visible en ese momento se denomina visual viewport. Este puede ser más pequeño que el viewport de diseño, por ejemplo, cuando el usuario hace uso del zoom. El viewport de diseño (layout viewport), sigue siendo el mismo, pero el visual viewport se empequeñeció.

Resource: https://developer.mozilla.org/es/docs/Glossary/Viewport

DPR

El device pixel ratio (DPR) es una propiedad que indica la relación entre los píxeles físicos de la pantalla y los píxeles lógicos o CSS que usa el navegador para dibujar la interfaz.

En otras palabras, te dice cuántos píxeles reales hay por cada “píxel” que ves en el diseño web.

Dispositivo	Resolución física	Resolución CSS (viewport)	DPR	Resultado visual
Laptop 1080p sin escala	1920×1080	1920×1080	1	1 píxel CSS = 1 píxel físico
Laptop 1080p con escala 150%	1920×1080	1280×720	1.5	Cada píxel CSS ocupa 1.5 píxeles físicos
iPhone moderno (Retina)	1170×2532	390×844	≈3	Alta densidad; todo se ve más nítido

Resource: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Equivalencia entre Viewport y Zoom

Reducir un Viewport de 1366x768 píxeles a la mitad en alto y ancho, es quivalente a hacer Zoom hasta 200%. Hacer Zoom del Navegador al 200% en una resolución de 1366x768 es lo mismo que tener el viewport a 683x384.

Resource: https://www.w3.org/WAI/standards-guidelines/act/rules/59br37/proposed