La herramienta de prueba integrada de Google Lighthouse evalúa la accesibilidad de los sitios en una escala de 0 a 100. Es recomendable esforzarse por lograr la máxima legibilidad del contenido, pero una calificación de 100 no significa que el sitio sea idealmente accesible. Como prueba, realicé un pequeño experimento.Siempre es agradable ver a las personas mostrando sus calificaciones de Lighthouse en Twitter: eso significa que se preocupan por la calidad.
Lighthouse premia a los mejores sitios con un círculo verde con el número 100, que orgullosamente muestra a clientes y amigos.
Evaluar la calidad del código es importante, pero lo más importante, interpretarlo correctamente. Si la herramienta automática dice que el sitio es 100% accesible, este no es necesariamente el caso. Solo significa que hemos sentado las bases para las pruebas manuales. Para las pruebas, Lighthouse usa la biblioteca
ax-core con
su propio conjunto de reglas . Ella revela algunas malas prácticas, pero no todas. Otras prácticas no son malas en sí mismas, pero pueden ser dañinas si se abusa de ellas.
Con una prueba automatizada, no proporcionará buena calidad. Para probar esto, creé el sitio más inaccesible con una calificación perfecta de Lighthouse.
Antecedentes
Zach Leterman tuiteó recientemente:
Idea de artículo gratis:
Cómo construir el sitio web más lento con el puntaje perfecto de Lighthouse
Y la
respuesta de Vadim Makeev me inspiró a trabajar.
¡Sería interesante leer! Lanza una idea:
<img src = picture.png alt = picture.png>
Pensé que era una idea maravillosa: no solo confundir la cantidad máxima de visitantes del sitio web, sino también obtener la calificación perfecta de Lighthouse desde arriba.
Cortar a tantas personas como sea posible
Tomamos como base esta página simple y accesible.
CodePen: Disponibilidad 100%, paso 0CSS requerido
Comencemos con uno simple. Quiero asegurarme de que mi sitio web perfecto no funcione sin CSS. Para hacer esto, agregue el atributo
hidden al elemento del
body . Este es el equivalente HTML de
display: none; en CSS (si desea leer sobre cómo ocultar contenido mientras se mantiene la accesibilidad, consulte
"Ocultación inclusiva" de Scott O'Hara).
HTML
<body hidden> ... </body>
Página perfectamente limpiahidden visualmente el contenido y lo elimina del árbol de accesibilidad. Esto por sí solo es suficiente para eliminar absolutamente todos los visitantes y pasar las pruebas de Lighthouse, pero no estamos buscando formas fáciles. Quiero crear un sitio que sea completamente inaccesible y técnicamente todavía muestre contenido. Entonces, agregue CSS y recupere el contenido.
HTML
<head> <link rel="stylesheet" href="style.css"> </head> <body class="loaded" hidden> ... </body>
CSS
.loaded { display: block; }
Volvemos a lo que teníamos antes, pero CSS ahora debería cargarse.
CodePen: 100% Disponibilidad Paso 1JS obligatorio
Agrega otra dependencia. La clase para mostrar el contenido que ahora estoy agregando no está en HTML, sino a través de JS.
HTML
<head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body hidden> ... </body>
Js
document.querySelector('body').classList.add('loaded');
Wow! El sitio aún no ha cambiado, pero para mostrar al menos parte del contenido, los archivos CSS y JS deben cargarse y funcionar correctamente.
CodePen: 100% Disponibilidad Paso 2Parece que es hora de la primera prueba de Lighthouse. Cruza los dedos!
Resultado perfecto en un sitio web con CSS y JS. Es genial, pero podemos hacerlo mejor.
Al diablo con los lectores de pantalla
Hay muchas formas de interferir con los lectores de pantalla. La forma más fácil y eficiente es usar el atributo
aria-hidden="true" . Este poderoso atributo debe usarse con precaución porque elimina elementos del árbol de accesibilidad. Por lo general, se usa para ayudar a las personas con lectores de pantalla
eliminando contenido redundante o extraño . En nuestro sitio, prescribimos este atributo para el elemento del
body .
HTML
<body hidden aria-hidden="true"> ... </body>
Ahora las personas con lectores de pantalla experimentarán uno de esos
momentos "raros" cuando encuentren un sitio inaccesible .
CodePen: 100% Disponibilidad Paso 3Cortamos a los usuarios con teclados
Los usuarios con teclados pueden navegar por la página presionando la tecla Tab para moverse de un elemento interactivo a otro. El navegador muestra el contorno alrededor de los elementos en foco.
Vamos a deshacernos de esto.
CSS
*:focus { outline: none !important; }
En solo tres líneas de CSS, cortamos a un grupo completo de personas del sitio. Técnicamente, aún pueden interactuar con la página: al presionar Tab, todavía hay una transición entre elementos interactivos, solo el indicador de enfoque ya no se muestra. Dado que en nuestro experimento necesitamos limitar completamente las capacidades de las personas, apaguemos el teclado por completo.
Js
document.addEventListener('keydown', function(e) { e.preventDefault(); })
Nuestra aplicación ahora elimina la funcionalidad predeterminada de todas las claves.
CodePen: 100% Disponibilidad Paso 4Hora de la próxima prueba.
Aún perfecto
Muy bien, es hora de los trucos sucios.
Explotar para modo de alto contraste
En Windows, las personas con discapacidad visual pueden mejorar el contraste activando el llamado
modo de alto contraste .
Luego, todo el sistema operativo comienza a utilizar un esquema de contraste para todas las aplicaciones, incluidos los navegadores.
Podemos orientar la propiedad de
media específicamente para estos usuarios.
CSS
@media screen and (-ms-high-contrast: active) { * { color: #000000; } }
Estas reglas se aplican solo si el modo de alto contraste está habilitado en Windows. Desafortunadamente, no sabemos qué colores usa el tema: claro u oscuro. Establecer el color
#000000 para todos los elementos puede o no funcionar, según las preferencias del usuario. Esta probabilidad del 50% no me conviene, pero tuvimos suerte: los colores contrastantes de Windows se comparan con las
palabras clave en el color del sistema CSS . Puede usar estas palabras clave y asegurarse de que nuestro texto siempre coincida con el color de cualquier fondo en modo de alto contraste. El color de fondo en el sistema operativo coincide con el color de las
windows en CSS. Entonces, especifique este color para todo el texto de la página.
CSS
@media screen and (-ms-high-contrast: active) { * { color: window !important; } }
Oh dios Esto es muy malo. Ahora recibiré una lluvia de ofertas de trabajo de Facebook y Uber.
CodePen: 100% Disponibilidad Paso 5Al diablo con los usuarios del mouse
Aquí es muy fácil: simplemente elimine el cursor de la pantalla.
CSS
*, *:hover { cursor: none; }
Para un usuario con un mouse, la propiedad del
cursor: none; hace lo mismo que para el usuario con el teclado hace la propiedad de
outline: none; . Sin un cursor, es difícil navegar al principio, pero los elementos aún se pueden hacer clic. Mejoremos la calidad de nuestra aplicación, recortando una vez más a los usuarios con una interfaz accesible.
CSS
body { pointer-events: none; }
Bueno, otra cosa. Después de especificar
pointer-events: none; los usuarios ya no pueden hacer clic en ningún elemento. Esta propiedad está bien soportada, pero para que la función funcione en tantos navegadores como sea posible, es recomendable aplicar el principio de degradación progresiva.
Js
function removeA11y() { if ("pointerEvents" in document.body.style) { console.log('pointer-events supported') return; } document.addEventListener('click', function(e) { e.preventDefault(); }) } removeA11y();
Este script alternativo se ejecuta y elimina los eventos de clic de todos los elementos si el navegador no admite la propiedad de
pointer-events .
CodePen: 100% Disponibilidad Paso 6Wow! ¡El sitio todavía es completamente accesible!
Al diablo legibilidad
Ya no podemos usar el mouse o el teclado, pero aún vemos el texto en la página. El desastre
CSS
body { opacity: 0.03; }
El contenido permaneció en la página, pero casi invisible. Impresionante!
CodePen: 100% Disponibilidad Paso 7Exploit de lectura de Safari
Mientras probaba el sitio en diferentes navegadores, noté que todavía está disponible en Safari en modo de lectura.
Al final resultó que, puede desactivar este modo especificando el tamaño mínimo de fuente en el
body .
CSS
body { opacity: 0.03; font-size: 1px; }
CodePen: 100% Disponibilidad Paso 8Abajo con la fuente
El sitio es inaccesible para personas con baja y buena visión, usuarios de mouse, teclado y lectores de pantalla.
Si un usuario experimentado accede a dicho sitio, un
hacker interno puede despertar en él e intentará piratearlo. Quiero decir, ver el código fuente de la página.
La guinda del pastel de la inaccesibilidad de nuestro sitio es la
conversión de texto en mnemónicos HTML . Estos
mnemónicos de entidad se usan típicamente para mostrar caracteres reservados e invisibles y aquellos que son difíciles de ingresar usando el teclado estándar. Los usamos para ofuscarnos.
CodePen: 100% Disponibilidad Paso 9Y la última prueba.
Conclusiones
En el artículo, no quería burlarme del sistema Lighthouse o de su motor con núcleo de hacha. Utilizo regularmente ambas herramientas y me alegro de que lo sean.
Este artículo es sobre nosotros. Las calificaciones indican la calidad de nuestras aplicaciones y sitios, pero no debemos confiar ciegamente en estos números. Debemos entender que las pruebas automáticas son solo el primer paso.
La próxima vez que vea un puntaje de Lighthouse, lea el texto al lado de la calificación.
“Esta prueba identifica oportunidades para mejorar la disponibilidad de su aplicación web . Las pruebas automatizadas pueden detectar solo una parte de los problemas, por lo que también se recomiendan las pruebas manuales ".
Probamos y optimizamos sitios no en aras de una sensación agradable, lo que da una calificación alta. Hacemos esto para las personas: hacer que el sitio sea accesible para la mayor cantidad de usuarios posible. En diseño y programación, no confiamos completamente en la automatización. Entonces, en las pruebas, no debes hacer esto.
Gracias a
Eric por la revisión y comentarios.
Enlaces y recursos