Implementación de Foco Visible
En este documento se describen los detalles de implementación para el test de Foco Visible (S.C 2.4.7).
Alcance
En este test se comprueba que exista un indicador de foco visible en todos los elementos enfocables con Tab. No se toma en cuenta si este indicador es claramente perceptible (existe un buen contraste entre el elemento enfocado y desenfocado) y tampoco se comprueban elementos que no sean alcanzables solamente con Tab.
Detalles del test
El test comienza enfocando el primer elemento enfocable dentro del container seleccionado por el tester.
Mientras el foco se mantenga dentro de dicho container y no pasemos por un elemento ya visitado anteriormente:
- Se hace un screenshot al elemento enfocado (detalles del screenshot en la siguiente sección)
- Se presiona Tab para enfocar el siguiente elemento
- Se hace un segundo screenshot al elemento que estaba previamente enfocado en el paso 1
- Se comprueban las diferencias entre los screenshots del paso 1 y 3. Si no hay diferencias se reporta como indicador de foco no visible (detalles de la comparación más adelante).
Detalles más importantes: Por cada elemento se hacen dos SS y una comparación. La cantidad de elementos visitados coincide con la cantidad de elementos alcanzables con Tab dentro del container.
Screenshots
Con el objetivo de que el entorno no interfiera en la comparación y para poder capturar al elemento sin excluir ningún borde o outline, insertamos el elemento dentro de un nuevo contenedor al que llamamos wrapper. Clonamos el elemento original con todos sus estilos y lo insertamos en el wrapper. Este wrapper tendrá el mismo background que el padre del elemento original. Además se le agrega un padding al wrapper de 20px para asegurarnos de capturar todo el outline del elemento.
El único estilo del elemento original que no se clona es la position. No podemos dejar al elemento con una position absolute porque puede no caer dentro del wrapper.
Las páginas de Mastercard están excluidas de este proceso porque resulta prácticamente imposible clonar los estilos de los elementos en estado enfocado. En estas páginas hacemos el screenshot en el mismo lugar donde está el elemento (no se clona el elemento ni se inserta en un wrapper).
Comparación de imágenes
Una vez capturados los dos estados (enfocado y no enfocado) del elemento, se procede a comparar ambas capturas para determinar si el indicador de foco es visible.
Para esto primero recortamos 5px de los bordes de la imagen. Como el wrapper tiene un padding de 20px esto no afecta la parte de la imagen que corresponde al elemento y al mismo tiempo borra zonas de la imagen donde puede influir el entorno de la página.
A continuación se calcula la imagen diferencia. Esto es, la resta entre los pixeles de una imagen y los de la otra. Esta imagen diferencia se convierte luego a escala de grises para facilitar el tratamiento posterior.
En algunos casos estamos notando que en imágenes aparentemente idénticas aparecen diferencias. Esto se puede deber a fenómenos como la antialiasing, ruidos que se insertan en la toma de los screenshots y/o el rendering del propio navegador. Este ruido se expresa en la imagen diferencia como píxeles que no son negros (un pixel negro en la imagen diferencia significa que ese pixel tiene el mismo valor en las dos imagenes que se están comparando).
La estrategia para quitar el ruido es intentar eliminar todas las formas no-negras en la imagen que sigan patrones irregulares. Es decir, formas que no creen líneas rectas y largas o franjas enteras de un mismo color.
En estos momentos este approach no es perfecto ya que deja de detectar foco no visible en algunos elementos pero si usamos una estrategia de borrado de ruido más radical comenzamos a reportar falsos positivos en otros elementos que tienen un indicador de foco muy tenue.