Inicio /
Cuaderno /
Cosas /
Estrellas /
Flashes /
Música /
Enlaces /
Libro de visitas /
Acerca de
Guía de inaccesibilidad para páginas web
Fecha de publicación: 2024-05-17.
Así que ya probaste tu sitio en varios navegadores, pusiste texto
alternativo en imágenes y videos, reescribiste tu sitio usando solo etiquetas
HTML semánticas como <nav> y <header>,
tu sitio tiene un diseño responsivo que se adapta a todos los teléfonos
y tu público discapacitado puede leer tu sitio con facilidad. ¡Bah!
¡Puras patrañas! En este artículo vamos a hacer todo lo contrario. Veremos
varias formas de excluir a cuanta gente sea posible de visitar tu sitio sin
simplemente poner una contraseña y bloquear el acceso.
Método 1: Carga todo tu contenido con Javascript
Excluye a: Quienes desactivan Javascript o usan navegadores que no lo admiten.
Dejar afuera a la gente que no usa scripts es muy sencillo y, de hecho,
muy común. Una forma involucra simplemente
incluir todo el HTML que necesitas dentro de un script y luego dejar que
Javascript lo escriba en la página. Diseña
una plantilla HTML básica y agrega un <div> en el cuerpo
con algún identificador como id="lol". Luego tu script hará
el trabajo:
<script>
document.getElementById('lol').innerHTML('<p>¡Muerte a los enemigos de Javascript!</p>');
</script>
Si deseas ser más moderno y sofisticado, sigue el modelo de «sitio de una página». Escribe una plantilla HTML básica y dótala de un script que cargue una librería para convertir Markdown a HTML y otro que descargue y convierta el texto que quieres mostrar desde algún archivo .md externo.
Como alternativa, puedes escribir todo el contenido del cuerpo de tu página, cifrarlo con algún algoritmo como base64 o rot13 y añadir un script que lo descifre y reescriba cuando se abra la página.
Desafortunadamente, no hay tanta gente que desactiva scripts, así que tenemos que ir más lejos.
Método 2: Usa Javascript para borrar el contenido de la página
Excluye a: Quienes navegan con Javascript activado.
La idea general de cada uno de estos métodos es abusar de las
características de los navegadores para excluir a quienes las usan. En este
caso puedes vaciar el contenido de <body> cambiando
su propiedad innerHTML a una cadena vacía (o algún mensaje).
Incluye lo siguiente al final de <body>:
<script> document.body.innerHTML = ""; </script>
Como casi todos tienen scripts activados, esto es suficiente para eliminar a la mayoría. Otras opciones más maléficas incluyen redirigir a una página desagradable:
<script> window.location.href = "https://twitter.com"; </script>
o cambia rápidamente los colores de la página, por si odias a los epilépticos. ¿No es genial Javascript? Las opciones son ilimitadas.
Pruébalo... (cuidado: luces parpadeantes)
Método 3: Usa hojas de estilo para hacer ilegible el contenido de la página
Excluye a: Quienes navegan con CSS activado.
¿No fue suficiente eliminar al 99% de tu público? Podemos ir más lejos. Puedes usar CSS para esconder el contenido del sitio:
<style>
* {
display: none;
}
</style>
o usa animaciones CSS 3 para causar estragos. Aunque no me lo creas, he visto esta técnica en uso por ciertos administradores que quieren que desactives CSS a toda costa.
<style>
* {
animation: lol 2s infinite;
}
@keyframes lol {
0% {
rotate: 0deg;
}
25% {
rotate: y 90deg;
scale: 1.5;
}
50% {
rotate: 180deg;
}
75% {
rotate: x 270deg;
border-radius: 50%;
}
100% {
rotate: 360deg;
}
}
</style>
Las media queries son características de CSS3 que permiten alterar el contenido de la página según la resolución de pantalla y orientación, entre otras. El siguiente CSS permite esconder el contenido para cualquier pantalla en modo retrato, como teléfonos, aunque fácilmente puedes animar el contenido o lo que se te ocurra.
<style>
@media (orientation: portrait) {
* {
display:none;
}
}
</style>
Método 4: Abusa la retrocompatibilidad
Excluye a: Quienes usan navegadores que soportan los atributos de
color del elemento <body> (incluso sin CSS).
Este es probablemente el método más sencillo. Agrega los atributos
bgcolor, text, link,
vlink y alink a <body> y dales
como valor algún color chillón como #ff00ff. Si no cambias los colores de tu
sitio con CSS, entonces cualquier persona que deje a su navegador usar los
colores del sitio, solo verá magenta puro:
<body bgcolor=#ff00ff text=#ff00ff link=#ff00ff vlink=#ff00ff alink=#ff00ff>
Este lo aprendí en una página muy antigua en contra de Netscape. Tal parece que incluso ahora a ningún navegador le importa si haces tu sitio ilegible con este método o CSS.
Links es un ejemplo poco común de un explorador en donde esta técnica es ineficaz porque Links corrige los colores de las páginas con mal contraste entre fondo y texto.
Método 5: Aplica el carrusel de la muerte
Excluye a: Quienes usan navegadores basados en Internet Explorer, Chrome o Firefox (excepto Pale Moon) incluso con Javascript desactivado.
Este es diabólico: Encierra el contenido del cuerpo de la página en uno o
varios <marquee>. Juega con los atributos que admite este
elemento para causar el máximo dolor.
En Firefox un valor alto de scrollamount como 1000 es suficiente
para hacer que la página parpadee rápidamente, pero te invito a ser un
miserable como en el ejemplo... Nota que si CSS es necesario para mostrar
<marquee> depende del explorador.
<body> <marquee scrollamount=1000 scrolldelay=1 truespeed> [...] </marquee> </body>
En tiempos antiguos era posible hacer lo mismo pero con
<blink> para fastidiar a los usuarios de Netscape.
Pruébalo... (cuidado: se mueve rápido)
Método 6: Carga todo el contenido textual de tu página como imágenes sin texto alternativo
Excluye a: Quienes navegan sin imágenes o usan lectores de pantalla.
¿Realmente podría alguien hacer algo más demoníaco? Diseña tu sitio
en un editor de imágenes y pega tu obra en tu sitio tal cual con atributos
alt vacíos ¡o incluso sin ellos, para hacer enojar a los amantes
de los estándares!
¿No es suficiente? Secciona la imagen y distribuye las partes en tablas. Agrega texto alternativo, pero que no tenga nada que ver con el contenido. ¡Que las imágenes sean GIFs animados con dos cuadros: el primero con contenido y el segundo en blanco, pero que el primero tenga un retraso muy pequeño y el segundo uno muy largo! ¡Qué GIFs, que la página sean varios videos!
Espero que algunas de estas ideas te sean útiles para diseñar sitios menos amigables y traer un poco más de desgracia e infelicidad a la red. ¿Se te ocurre algún otro método para maximizar el dolor?
¿Comentarios? Dime qué piensas en el libro de visitas.