¿Alguna vez te has preguntado si cualquier persona, sin importar sus capacidades, podría navegar por tu página web? Para ti, si estás en ese momento, hemos creado este artículo para explicar, de forma clara y sencilla:
- Qué significa tener una web accesible
- Por qué es importante esta adaptación (más allá de «para cumplir la ley”)
- Y cómo puedes mejorar la experiencia de tu web para abrir las puertas de tu “casa” a todas las personas que la visitan.
(Si no todas, a muchas que, ahora mismo, quizás no pueden hacerlo).
¿Que se te «hace bola» tanta información? Nos tienes a mano tanto para el (re)diseño, como para realizar una auditoría de accesibilidad que te permita superar los estándares mínimos.
¿Vamos allá?
¿Qué es la accesibilidad web y qué beneficios tiene?
Una web accesible es aquella que está diseñada para incluir a personas con alguna discapacidad visual, auditiva, cognitiva o motriz. El diseño accesible permite que puedan navegar con mayor facilidad y, por cierto, también beneficia a las personas mayores. Así que, si quieres tener en cuenta a esta audiencia… ¡léete este artículo de cabo a rabo!
Además de ser un gesto de empatía y compromiso social, tener una web inclusiva aporta beneficios a nivel marca y empresa:
- Mejora la experiencia de usuario general. No solo para quien la necesita.
- Aumenta el alcance, porque más personas pueden acceder al contenido.
- Te ayuda a posicionarte como marca responsable.
- Y, además, cumples con la legislación vigente.
Normativa sobre accesibilidad web
En España y Europa existen leyes sobre accesibilidad digital que afectan especialmente a negocios relacionados con el sector público. Lo que, posiblemente, más te interesa a nivel legal es:
Real Decreto 1112/2018 en España
Obliga a que los sitios web y apps del sector público (y entidades financiadas públicamente) cumplan criterios de accesibilidad.
WCAG 2.1 y UNE-EN 301549
Son los estándares internacionales más utilizados y definen los requisitos técnicos que debe cumplir una página web accesible: contraste de color, navegación por teclado, etiquetas en imágenes…
Plazos y requisitos legales
El cumplimiento es obligatorio para las webs nuevas desde 2019 y apps móviles desde 2021. Las empresas privadas también están llamadas a adaptarse, especialmente si ofrecen servicios digitales.
Tipos de webs obligadas por ley a ser accesibles:
Las webs que están obligadas, por Ley, a ser accesibles, son las de:
- Organismos públicos
- Universidades y centros educativos
- Empresas que prestan servicios públicos
Pero, como mencionábamos más arriba, aunque tu empresa no esté obligada por ley a ser accesible, mejorar la accesibilidad te dará más de una ventaja competitiva y reputacional.
Por eso, este artículo pretende ser más una inspiración que una guía.
Ejemplos reales de webs accesibles
La mejor manera de entender la accesibilidad web es viendo casos reales. Así que, en este apartado, te daremos algunos ejemplos reales de webs accesibles. Luego, profundizaremos en cómo puedes hacer o convertir tu sitio, en un lugar inclusivo.
Ejemplos de diseño inclusivo en sectores como comercio electrónico, educación y administración pública
Algunas tiendas online implementan navegación por teclado, descripciones de productos accesibles o procesos de compra adaptados.
Aunque parezca mentira… universidades, ayuntamientos y Estado deben cumplir los estándares mínimos de accesibilidad, y, a nivel técnico así es (aunque a veces parezca imposbile entregar algún trámite…).
Por eso, vamos a poner de ejemplo la mísmísima web del Ministerio de Asuntos Económicos y Transformación Digital. En esta captura puedes ver cómo en los vídeos incluye subtítulos y, además, una intérprete de lengua de signos. En el botón visible en la captura, el texto es claro y con doble señal…
Pero es que esta misma web, a nivel técnico, tiene una puntuación de 100 en accesibilidad (aunque a nivel rendimiento, sea un dinosaurio extinto, ya lo verás).
No te preocupes, más abajo te mostramos cómo realizar este análisis en tu web.
Comparación entre una página accesible y una no accesible
A nivel genérico, una página web accesible debería tener contrastes altos que faciliten la lectura, botones con textos claros y permitir la navegación sencilla desde teclado.
Por contra, una menos accesible puede tener imágenes sin descripción o formularios sin etiquetas.
Pero, enrealidad, la accesisbilidad va MUCHO MÁS ALLÁ. Y por eso queremos de este artículo una super-guía que te permita ver cómo puedes adaptar tu web a los estándares.
Cómo comprobar la accesibilidad de tu web
Existen herramientas gratuitas que te pueden ayudar a realizar una primera comprobación de accesibilidad. Ahora te mostramos tres.
Si todavía no tienes una web, y te interesa saber cómo hacerla usable y accesible, te recomendamos que vayas directamente a este punto: Diseño web usable y accesible.
WAVE, Lighthouse y Axe. Tres herramientas para medir la accesibilidad web
Imaginar que tu web es una casa y quieres adaptarla para que tod@s tus amig@s y familia puedan entrar y disfrutar… sin dificultades añadidas a la silla de ruedas o a una ceguera parcial. Por ejemplo.
WAVE, Lighthouse y Axe son herramientas que te permiten analizar cada habitación y señalar los “defectos” que pueden ser barreras para la actividad de esas personas con mensajes como: “¡Oye! Esta entrada no es apta para silla de ruedas” o “Aquí falta luz”.
Estas tres herramientas te devuelven una lista de acciones para hacer de tu web un lugar inclusivo, explicándote por qué es importante adaptarlos (a veces incluso con ejemplos).
Cada herramienta muestra los errores con sus propias “palabras”, pero en general se dividen en 3 niveles:
- Errores, los problemas importantes que deben solucionarse rápidamente, como un botón que no sea claro.
- Advertencias. aquellos aspectos mejorables, como un color que puede ser difícil de ver.
- Sugerencias o Recomendaciones, que, en realidad, son oportunidades de mejora para optimizar, todavía, más la experiencia.
Solo tienes que entrar la web que quieres analizar y:
- En el caso de WAVE o Axe, abrir la extensión en el navegador. Lighthouse está integrado en Chrome (botón derecho > “Inspeccionar” > pestaña “Lighthouse”)
- WAVE proporciona un análisis visual en tiempo real. En Axe y Lighthouse necesitas pulsar “analizar” y esperar unos segundos para recibir el informe.
Siguiendo con el ejemplo de la web del Ministerio de Asuntos Económicos y Transformación Digital, éste es el análisis que ofrece Lighthouse (100 en accesibilidad y notable en acciones recomendadas).
Como el objetivo de este artículo no es realizar el análisis de ese sitio en concreto, vamos a explicarte qué debes tener en cuenta.
Cómo interpretar los resultados
En realidad, las herramientas interpretan los resultados para ti. Básicamente tienes que leer las respuestas y aplicar las acciones necesarias:
- ¿El error es que te faltan etiquetas alt? Las incluyes.
- ¿Te indica que hay falta de contraste en algunas zonas? Lo aumentas.
Y así con todo.
La clave, en este caso, quizás esté en entender cuáles son los mínimos aceptables, teniendo en cuenta que, cuanto más accesible sea tu web, más personas podrán utilizarla sin frustrarse (y más te premiarán los buscadores, como Google, por tener un sitio accesible).
En este caso, los estándares de accesibilidad se dividen en tres niveles:
- A (básico)
- AA (Los mínimos legales según WCAG 2.1. Recomendado y exigido en muchos países. )
- AAA (avanzado, y más exigente)
El nivel AA incluye, medidas como:
- Contraste de color mínimo 4.5:1 entre texto y fondo. Y puedes comprobarlo con herramientas como WebAIM Contrast. WAVE o Axe lo marcan directamente. En el caso de Lighthouse, lo detecta si lo analizas desde DevTools.
- Poder navegar sin ratón (solo con teclado).
- Todas las imágenes importantes tienen texto alternativo (descriptivo).
- Ausencia de contenido móvil o que parpadea.
- Los formularios tienen etiquetas claras.
- Uso correcto de encabezados: <h1>, <h2>, etc.
Entonces, ¿cómo sabes si tu web cumple los mínimos?
Lo recomendable es que en WAVE o Axe tengas 0 errores y pocas advertencias. En Lighthouse, necesitarás al menos una puntuación de 90.
Checklist básico para verificar la conformidad con WCAG
Hemos creado este checklist básico para que puedas saber si te acercas a cumplir el nivel AA. Aunque no sustituye a una auditoría técnica completa, te dará una orientación importante sobre el número de acciones a realizar.
¿El objetivo? Tener el máximo de [ ] marcados.
* Si quieres que te enviemos el imprimible, pídenoslo en comentarios o email. Sin spam posterior ni cadenas de emails. Palabrita.
En cuanto a texto y contraste:
- [ ] El contraste de color entre texto y fondo es mínimo 4.5:1
- [ ] El texto grande (mayor a 18px en negrita o 24px normal) tiene contraste mínimo 3:1
- [ ] No se transmite información solo por color (ej: error en rojo sin texto)
- [ ] El texto puede aumentarse hasta un 200% sin perder legibilidad
En cuanto a navegación con teclado:
- [ ] Todo es accesible usando solo el teclado
- [ ] El foco del teclado es visible y sigue un orden lógico
- [ ] No hay elementos que bloqueen el foco o lo pierdan
En cuanto a contenido:
- [ ] Todas las imágenes relevantes tienen etiqueta alt descriptiva
- [ ] Los vdeos tienen subtítulos (si hay audio)
- [ ] El contenido no se mueve automáticamente o se puede pausar/detener
- [ ] No hay parpadeos que puedan provocar malestar (máx. 3 por segundo)
En cuanto a estructura y HTML Semántico:
- [ ] Se usan correctamente las etiquetas HTML (<h1>, <nav>, <main>…)
- [ ] El contenido tiene encabezados jerárquicos (<h1> seguido de <h2>…)
- [ ] Hay saltos de sección claros (visuales y en código)
En formularios:
- [ ] Cada campo tiene una etiqueta clara (label) asociada
- [ ] Hay mensajes de error comprensibles y visibles
- [ ] Se indican instrucciones o formatos requeridos (por ejemplo: «email válido»)
El idioma:
- [ ] El idioma principal del sitio está definido con el atributo lang=»es» o lang=»en»
- [ ] Si hay texto en otro idioma, está marcado correctamente (lang=»en» en un texto en inglés dentro de una web en español)
En adaptabilidad (responsive + accesibilidad):
- [ ] El diseño se adapta bien a móviles y tablets
- [ ] El contenido no se rompe al hacer zoom o cambiar tamaño de pantalla
- [ ] Los elementos táctiles tienen suficiente espacio entre sí
En cuanto a ayudas tecnológicas:
- [ ] El sitio es compatible con lectores de pantalla
- [ ] Los botones y enlaces tienen nombres claros y no genéricos («haz clic aquí» no es suficiente)
- [ ] No hay trampas de foco ni contenidos que se activen solos sin aviso
Diseño web usable y accesible
Que una web sea accesible no está reñido con que tenga un diseño atractivo o aburrido. De hecho, la accesibilidad es una de las mejores armas en la estrategia. Por eso vamos a profundizar un poco más en este aspecto.
Principios del diseño centrado en el usuario (UX)
Una web usable busca simplicidad y claridad en la navegación para que el usuario (las personas) encuentre de manera intuitiva el contenido.
- Accesibilidad es que todas las personas deben poder usarla, también aquellas con discapacidades visuales, auditivas, cognitivas…
- Usabilidad es que sea fácil de usar, intuitivo, sin necesidad de leer un manual.
Básicos del diseño centrado en el usuario, son la jerarquización del contenido o la creación de rutas intuitivas. Pero para hacer esto, antes, debes conocer al potencial usuario (persona) y sus necesidades:
- ¿Qué necesita?
- ¿Qué conocimientos técnicos tiene?
- ¿Usará más el móvil? ¿Se conectará desde la oficina?
- ¿Tiene alguna discapacidad? ¿Cuál es su edad?
Preguntas como éstas, pueden ayudarte a crear un diseño que se adapte la mayor parte de personas. Pero es importante tener en cuenta que, rara vez, se consigue la perfección a la primera. Y, sobre todo, que la forma de navegar, interactuar y buscar, cambia con el tiempo.
Por eso, otro de los principios del diseño UX, es la mejora continua en proceso cíclico (diseño iterativo).
Siempre, poniendo a las personas en el centro del diseño. No al revés.
El diseño debe facilitar que el usuario realice lo que quiere: comprar, informarse, reservar, leer, registrarse… Por eso es importante reducir al máximo el número de pasos y acciones para conseguirlo, utilizar textos claros y eliminar obstáculos.
Cada clic debe acercarlo a su objetivo, no alejarlo.
Buenas prácticas en tipografía, colores y navegación
A continuación, facilitamos algunas recomendaciones para crear una web accesible, clara y cómoda para “todo el mundo”.
La tipografía:
- Debe ser legible y tener un tamaño adecuado. El mínimo recomendado es de unos 16px para textos de párrafo con un interlineado 1,5 veces su tamaño, para facilitar la lectura.
En notas, etiquetas o pies, puedes utilizar un tamaño inferior.
- Las tipografías sans serif son más fáciles de leer (Roboto, Arial, Verdana…).
- Evita utilizar cursivas en textos largos (sí puedes utilizarlas en palabras muy puntuales o títulos).
- Ten una jerarquía clara (títulos, subtítulos y párrafos) con estilos marcados para que el usuario pueda ubicarse.
En cuanto a los colores:
- Ya hemos anticipado que para cumplir los mínimos, es necesario utilizar un contraste de 4.5:1 entre el texto y el fondo.
- Para textos de más de 18px en negrita, es suficiente con 3:1
.. Recuerda que puedes utilizar la herramienta WebAIM Contrast Checker para comprobarlo.
- También debes evitar utilizar el únicamente el color para transmitir información.
Por ejemplo, si hay un error en un formulario, además de marcar el texto en rojo, puedes añadir un icono o un mensaje tipo «Hay un error en este campo«.
- Presta especial atención a combinaciones problemáticas para el daltonismo: Rojo/verde, azul/púrpura o verde/marrón.
En cuanto a la navegación, te recomendamos:
- Crear menús simples y predecibles
- Utilizar estructuras lógicas y claras para organizar el contenido (títulos H1, H2, H3…)
- Que el usuario pueda navegar con teclado
- Tener botones visibles y descriptivos. Y enlaces grandes y accesibles (mínimo 44x44px).
- Indicadores de foco visibles:
- Evitar elementos en movimiento o parpadeo (como sliders automáticos sin control por parte del usuario). Además de dificultar la experiencia, pueden ser peligrosos para personas con epilepsia fotosensible.
El objetivo del diseño accesible y usable es crear experiencias digitales cómodas, humanas y universales.
Por eso en Agencia Pronoia tendemos a crear páginas sencillas, ordenadas y claras. Es el mejor camino para que más personas puedan disfrutar y entender lo que ofreces.
>>>> Contáctanos sin compromiso para rediseñar (o crear) tu web inclusiva. O para pedirnos la plantilla imprimible del checklist.
