Luiso Vázquez

Perceptible: diseñar para que la información llegue a todos

Luiso Vázquez — Mon, 18 May 2026 15:57:43 +0000

En la entrada anterior hablábamos de los cuatro principios básicos de las WCAG: perceptible, operable, comprensible y robusto. El primero de ellos es probablemente uno de los más fáciles de relacionar con el diseño visual, pero también uno de los que más errores acumula en sitios web reales.

Que una web sea perceptible significa que la información debe poder llegar al usuario de distintas formas, sin depender únicamente de un sentido o de una manera concreta de navegar. No basta con que algo esté en pantalla: tiene que poder leerse, escucharse, interpretarse o ser entendido por tecnologías de asistencia.

Dicho de otra forma, una web perceptible no da por hecho que todas las personas ven, escuchan o procesan la información de la misma manera.

El contraste no es solo una cuestión estética

Uno de los ejemplos más claros es el contraste de color. Muchas veces, por buscar una estética más limpia o minimalista, se utilizan textos grises muy claros sobre fondos blancos, botones con poco contraste o estados de interacción demasiado sutiles.

Visualmente puede parecer elegante, pero si el usuario tiene dificultades de visión, está usando una pantalla con poco brillo o intenta leer desde el móvil bajo la luz directa del sol, ese diseño empieza a convertirse en una barrera.

El contraste no afecta solo al cuerpo de texto. También es importante en enlaces, botones, formularios, mensajes de error, etiquetas, iconos y cualquier elemento que ayude al usuario a entender o interactuar con la página.

Diseñar con buen contraste significa asegurarse de que esa identidad sigue funcionando en situaciones reales.

Texto, jerarquía y legibilidad

La accesibilidad también está en decisiones aparentemente pequeñas: el tamaño de la fuente, el interlineado, la longitud de las líneas o la forma en la que organizamos los títulos.

Un bloque de texto demasiado largo, sin subtítulos ni descansos visuales, puede hacer que una página sea difícil de seguir. Lo mismo ocurre con textos muy pequeños, pesos tipográficos demasiado finos o una jerarquía poco clara entre títulos, subtítulos y párrafos.

Una buena jerarquía ayuda a escanear el contenido, entender qué es importante y avanzar sin esfuerzo. Y eso no beneficia solo a personas con dificultades visuales o cognitivas, sino que mejora la experiencia para cualquier usuario.

Imágenes con sentido

Otro punto importante es el uso de imágenes. No todas cumplen la misma función.

Una imagen decorativa puede no necesitar una descripción detallada, pero una imagen que aporta información sí debería tener una alternativa textual. Por ejemplo, si usamos un diagrama para explicar los principios POUR, esa información no debería estar únicamente dentro de la imagen.

El texto alternativo sirve para que una persona que navega con lector de pantalla pueda entender qué aporta esa imagen. Pero no se trata de describir por describir. Lo importante es explicar la función de la imagen dentro del contexto.

No depender solo del color

El color es una herramienta muy útil, pero no debería ser la única forma de comunicar algo.

Por ejemplo, si un formulario marca un error únicamente en rojo, puede que algunas personas no entiendan qué está pasando. Sería mejor acompañarlo de un mensaje, un icono o una explicación clara.

Lo mismo ocurre en gráficas, estados de botones, avisos o etiquetas. Si la única diferencia entre dos elementos es el color, estamos dejando fuera a usuarios con daltonismo, baja visión o simplemente a personas en contextos donde la pantalla no se ve bien.

Una buena práctica es preguntarse: Si quitara el color, ¿la información seguiría entendiéndose Si la respuesta es no, probablemente hay que reforzar el diseño con otro recurso.

Audio, vídeo y contenido multimedia

El principio perceptible también afecta al contenido audiovisual. Si una información importante aparece solo en un vídeo sin subtítulos, una persona con dificultades auditivas puede perderla. Si un audio no tiene transcripción, ocurre lo mismo.

Añadir subtítulos, transcripciones o alternativas textuales no solo mejora la accesibilidad. También ayuda a personas que están en un entorno con ruido, que no pueden activar el sonido o que simplemente prefieren leer.

Al final, se trata de no encerrar la información en un único formato.

Perceptible no significa aburrido

A veces se piensa que diseñar de forma accesible limita la creatividad, pero en realidad suele ocurrir lo contrario. Obliga a tomar mejores decisiones.

Un buen contraste puede reforzar la personalidad visual. Una jerarquía clara puede hacer que una página parezca más cuidada. Una interfaz legible transmite más confianza. Y un contenido bien estructurado mejora la experiencia desde el primer momento.

Diseñar de forma perceptible no significa hacer webs planas o sin carácter. Significa evitar que la estética se convierta en una barrera.

¿Y después qué?

Hacer que una web sea perceptible es el primer paso para no dejar a nadie fuera. Si una persona no puede acceder a la información, todo lo demás deja de importar.

Pero una vez que el usuario puede percibir el contenido, aparece la siguiente pregunta: ¿puede interactuar con él? De eso trata el siguiente principio: que una web también sea operable.

La entrada Perceptible: diseñar para que la información llegue a todos se publicó primero en Luiso Vázquez.

Diseñar para todos: una puerta abierta a la accesibilidad web

Luiso Vázquez — Thu, 12 Mar 2026 11:16:25 +0000

¿Qué es la accesibilidad web y por qué deberíamos hablar más de ella?

La accesibilidad web es un tema que se menciona cada vez más, y con razón. Sobre todo ahora que las cosas se están poniendo serias: en muchos países, ya es obligatorio que los sitios web de nueva creación cumplan con ciertos estándares de accesibilidad. Y no es solo una cuestión legal, también es una cuestión de sentido común, empatía y diseño responsable.

Para que nos entendamos todos, la accesibilidad web consiste en aplicar una serie de buenas prácticas y estándares para que cualquier persona, independientemente de sus capacidades, pueda navegar y disfrutar del contenido de una página web de forma cómoda.

Las más conocidas suelen ser las dificultades visuales, pero hay muchas otras situaciones que pueden afectar la experiencia de un usuario: desde problemas auditivos o motores, hasta dificultades cognitivas, del habla o del aprendizaje.

Un poco de historia: ¿de dónde viene todo esto?

Si nos remontamos a los orígenes de las tres uves dobles allá por los años 90, encontramos a Tim Berners-Lee, el inventor de la World Wide Web. Fue él quien estableció la primera conexión entre un cliente y un servidor usando el protocolo HTTP.

Poco después, fundó el W3C —World Wide Web Consortium—, una organización que desde entonces se ha encargado de definir y mantener los estándares que hacen que la web funcione: HTML, CSS, SVG, etc.

Pero el objetivo no era solo técnico. Desde sus inicios, el W3C ha defendido una web abierta, segura, interoperable y, por supuesto, accesible para todos.

Con esa intención nacieron las Pautas de Accesibilidad para el Contenido Web, más conocidas como WCAG —Web Content Accessibility Guidelines—. Estas pautas ofrecen una base sólida para que el contenido web sea más accesible a personas con distintos tipos de discapacidad: visual, auditiva, motora, cognitiva, del habla, del lenguaje, del aprendizaje, neurológica…

Los principios básicos de las WCAG

Las WCAG están organizadas en torno a cuatro principios fundamentales, conocidos como POUR por sus siglas en inglés.

Los cuatro principios POUR

Estos cuatro principios sirven como base para entender qué necesita una web para ser accesible. No se centran solo en cómo se ve una página, sino también en cómo se usa, cómo se entiende y cómo la interpretan distintas tecnologías.

Perceptible: la información debe estar disponible para los sentidos —vista, oído, etc.— sin depender exclusivamente de uno solo.
Operable: los usuarios deben poder interactuar con los elementos de la página, incluso si no pueden usar un ratón, una pantalla táctil o un teclado tradicional.
Comprensible: el contenido debe ser claro y predecible, tanto en el lenguaje como en el comportamiento de la interfaz.
Robusto: el sitio debe poder ser interpretado correctamente por diferentes navegadores, dispositivos y tecnologías de asistencia.

Pero no se quedan ahí. Cada principio se descompone en directrices, y estas a su vez se dividen en criterios de éxito que se pueden comprobar. Esos criterios son los que se evalúan para saber si una web cumple con la accesibilidad en alguno de sus tres niveles.

Los niveles de accesibilidad: A, AA y AAA

Estos niveles ayudan a medir el grado de cumplimiento de una web respecto a las pautas WCAG. En la práctica, sirven para establecer objetivos y saber hasta qué punto una página está preparada para ofrecer una experiencia accesible.

Nivel A: el mínimo imprescindible.
Nivel AA: el recomendado (y muchas veces obligatorio por ley).
Nivel AAA: el más alto, pensado para experiencias muy optimizadas.

En la mayoría de los casos, alcanzar el nivel AA es el objetivo recomendado, ya que el nivel AAA es muy exigente y no siempre viable para todos los tipos de contenido.

Accesibilidad más allá de la discapacidad

Además, estas pautas abarcan desde aspectos muy técnicos —como la semántica del HTML o el contraste de colores— hasta otros más relacionados con el contenido, el diseño o la interacción.

Un ejemplo muy claro: una persona ciega que navega con un lector de pantalla necesita que los botones, enlaces e imágenes estén correctamente descritos para poder entender e interactuar con la página.

Pero la accesibilidad no es solo para personas con discapacidades. ¿Alguna vez has intentado leer algo en tu móvil bajo la luz directa del sol y apenas distinguías el texto por falta de contraste? En ese momento, aunque no tengas ninguna discapacidad, te enfrentas a una barrera similar.

Diseñar pensando en la accesibilidad significa mejorar la experiencia para todos, en todo tipo de contextos.

En resumen: la accesibilidad no es solo un checklist técnico, es una manera de diseñar pensando en todas las personas, sin dejar a nadie fuera.

¿Y ahora qué?

Este post es solo una introducción, pero en los próximos iré desgranando cada uno de estos principios, compartiendo ejemplos concretos, herramientas útiles y consejos prácticos que puedas aplicar en tus proyectos.

Porque hacer sitios accesibles no solo es una obligación: es una forma de cuidar a quienes usan nuestro trabajo. Y eso, al final, es lo que debería importarnos más.

La entrada Diseñar para todos: una puerta abierta a la accesibilidad web se publicó primero en Luiso Vázquez.