El diseño web accesible consiste en tomar decisiones de diseño, contenido y navegación que eliminen barreras, para que cualquier persona pueda percibir, comprender, navegar e interactuar con tu página. La accesibilidad forma parte del diseño desde el primer día y contribuye a crear una mejor experiencia para todos tus visitantes, independientemente de sus capacidades.
Puntos clave
- Principios de accesibilidad: perceptible, operable, comprensible y robusto.
- WCAG 2.2: versión vigente de las pautas de accesibilidad web, organiza 13 pautas en tres niveles de conformidad: A, AA y AAA.
- 10 Best practice de un diseño web inclusivo: encabezados jerárquicos, tipografía legible, espaciado suficiente, texto alternativo, enlaces descriptivos, contraste adecuado, layout escaneable, navegación por teclado, diseño adaptable al zoom y subtítulos en contenidos multimedia.
- Evaluación: las herramientas automáticas detectan una parte de los problemas de accesibilidad. El resto se descubre navegando con teclado, con zoom y con lectores de pantalla.
- Website builder: resuelve de fábrica buena parte de las decisiones técnicas: estructura de encabezados, diseño adaptable, contraste y campos de texto alternativo.
¿Qué es el diseño web accesible?
La accesibilidad web es la práctica de diseñar páginas que puedan usarse con independencia de las capacidades sensoriales, motoras o cognitivas de quien las visita. En la práctica significa tomar decisiones sobre jerarquía, tipografía, color, navegación y contenido que no dejen fuera a nadie.
Si lo que buscas es el marco conceptual completo, los tipos de accesibilidad y el detalle de la normativa, lo tratamos aparte en nuestra guía completa.
De momento, basta con decir que el estándar internacional que lo define son las Pautas de Accesibilidad para el Contenido Web (WCAG), que publica el W3C. Se apoyan en cuatro principios conocidos por el acrónimo POUR (Perceivable, Operable, Understandable, Robust, en inglés):
- Perceptible. La información debe poder percibirse por las vías sensoriales disponibles. Una imagen sin texto alternativo es muda para un lector de pantalla. Un video sin subtítulos no existe para quien no puede escucharlo.
- Operable. La página debe poder manejarse con distintos métodos de entrada: teclado, lector de pantalla, comandos asistivos. Si un elemento solo responde al puntero, esa parte del sitio es una puerta cerrada.
- Comprensible. El contenido tiene que leerse con claridad y la interfaz debe comportarse de forma previsible, con textos legibles y rutas de navegación coherentes.
- Robusto. El sitio debe funcionar hoy y con cada actualización, en navegadores, dispositivos y tecnologías asistivas distintas.
¿Qué ventajas ofrece hacer accesible tu página web?
Las ventajas van más allá del cumplimiento. Una jerarquía de encabezados correcta, un contraste suficiente y una navegación previsible:
- Mejoran la experiencia de cualquier visitante, especialmente en móvil o con conexión lenta.
- Tienen un efecto directo en la optimización SEO on-page: los rastreadores interpretan las páginas de forma parecida a un lector de pantalla, así que el HTML semántico, los textos alternativos y una estructura clara los benefician igual.
- Comunica algo sobre tu marca, porque un sitio que incluye a todos proyecta responsabilidad.
¿A quién afectan las normativas europeas de accesibilidad?
La normativa europea de accesibilidad afecta a las administraciones públicas y a las empresas privadas que ofrecen determinados productos y servicios digitales en la Unión Europea. Eso incluye a pymes, startups y grandes empresas:
- Administraciones públicas y entidades privadas que prestan servicios digitales.
- Pymes, startups y grandes empresas: si venden, informan o gestionan productos y servicios digitalmente dentro de la Unión Europea, están dentro del ámbito de aplicación de la Directiva (UE) 2019/882 sobre requisitos de accesibilidad en estos ambitos.
Existen excepciones según el tipo y el tamaño de la empresa.
- Microempresas que prestan servicios: están exentas de las obligaciones de accesibilidad de la Ley 11/2023.
- Microempresas que venden productos: tienen cargas administrativas simplificadas.
Se considera microempresa la que emplea a menos de 10 personas y cuyo volumen de negocios anual no supera los dos millones de euros, o cuyo balance anual total no supera los dos millones de euros.
En LATAM el marco legal varía por país, pero las WCAG son una referencia mundial y funcionan igual de bien como estándar técnico fuera de la Unión Europea.
💡 Consejo
Aunque tu empresa esté exenta, los criterios de accesibilidad siguen siendo recomendables en cualquier caso, porque el beneficio en experiencia de usuario y en visibilidad no depende de si la ley te obliga.
Cómo hacer accesible una página web en 10 pasos
Estos son los 10 pasos que cubren la mayor parte de las barreras que se encuentran en una web de negocio.
1. Utiliza encabezados claros y jerárquicos
Los encabezados ayudan a organizar el contenido de la página. Aquí entran los títulos que aparecen al comienzo de cada sección y las meta etiquetas HTML, que indican la estructura del documento.
Ayudan a que el contenido sea más legible y fácil de interpretar para los usuarios y los motores de búsqueda. Para quien usa un lector de pantalla, los encabezados ayudan a orientarse por la página, pasar de una sección a otra y encontrar rápidamente lo que busca. Cuanto más larga sea la página, más diferencia marca una jerarquía bien hecha.
📋 Para conseguir una estructura de encabezados correcta:
- Usa un solo H1 por página, normalmente el título principal.
- Mantén el orden lógico, sin pasar de un H2 a un H4.
- Escribe encabezados breves y descriptivos, coherentes con lo que viene después.
- No uses un encabezado solo para conseguir texto más grande. Si necesitas eso, es trabajo del CSS.
2. Elige fuentes fáciles de leer
Una tipografía legible reduce el esfuerzo de lectura para personas con baja visión, dislexia o dificultades cognitivas, y mejora la experiencia de todos los demás en pantallas pequeñas.
📋 Qué funciona mejor para hacer que tu página sea fácil de leer:
- Fuentes sans-serif de formas limpias, del tipo Roboto, Open Sans o Lato.
- Evitar tipografías muy decorativas o script en textos largos.
- Un cuerpo de texto legible sin necesidad de hacer zoom, que además escale bien cuando el usuario lo amplía.
- Una o dos tipografías en todo el sitio. La coherencia visual reduce la carga cognitiva.
3. Cuida el espaciado y el tamaño de los elementos interactivos
Un texto comprimido, con líneas apretadas y párrafos pegados, complica la lectura a quien tiene dificultades de aprendizaje o cognitivas, y a cualquiera que lea en movimiento. El espaciado deja respirar al texto y hace que cada párrafo cueste menos.
La misma atención va para los elementos clicables. Botones, iconos y enlaces tienen que poder identificarse y activarse sin esfuerzo, también con precisión motora reducida.
📋 Tamaños concretos y exactos:
- El mínimo de nivel AA es 24 × 24 píxeles CSS. Este criterio admite una excepción: si un objetivo es más pequeño, debe estar separado lo suficiente para que un círculo de 24 píxeles de diámetro centrado sobre él no se solape con otro objetivo.
- El criterio 2.5.5 corresponde al nivel AAA (una recomendación más exigente): 44 × 44 píxeles.
- Los enlaces que van dentro de una frase quedan exentos.
- Deja espacio entre elementos clicables consecutivos, sobre todo en listas y formularios, donde los toques accidentales son más probables.
4. Añade texto alternativo a las imágenes
El texto alternativo es una descripción breve que se escribe en el atributo alt del HTML y que permite entender el contenido y la función de una imagen a quien no puede verla. Como beneficio adicional, ayuda a los motores de búsqueda y a los sistemas de IA a interpretar correctamente tus imágenes.
📋 Un buen texto alternativo:
- Es conciso.
- Describe la función o la información relevante de la imagen.
- Está escrito en función del papel que juega la imagen en la página.
Cuándo usarlo y cuándo no:
- ✅ Imágenes informativas, que ilustran conceptos o añaden significado.
-
❌ Elementos puramente decorativos, como bordes, iconos de estilo o fondos. Aquí se usa
alt=""y el lector de pantalla los salta. - ❌ Imágenes complejas como gráficos o infografías. El alt no da para tanto, hace falta una descripción textual extendida (ver el paso 10).
En lugar de un alt como «Foto», «Haz clic aquí» o «Logo», escribe «Escalador en una pared de granito al amanecer», «Imagen clicable de una mochila roja en un sendero» o «Logo de SiteGround». Si la imagen lleva texto incrustado, recuerda que las tecnologías asistivas no pueden leerlo, así que esa información debe estar disponible como texto real. En nuestra base de conocimiento explicamos cómo añadir texto alt a las imágenes paso a paso.
5. Utiliza enlaces y llamadas a la acción claros
Quien navega con lector de pantalla suele recorrer la lista de enlaces de la página de forma aislada. Fuera de contexto, un «Haz clic aquí» o un «Leer más» no comunica ni la acción ni el destino.
📋 Buenas prácticas de accesibilidad para enlaces y CTAs:
- Sé específico. «Descargar la guía de accesibilidad» o «Ver nuestros planes» en lugar de «Más información».
- Mantén la brevedad. El enlace debe leerse de un vistazo.
- Estilo coherente. Enlaces y botones tienen que ser reconocibles al instante por color, subrayado o forma.
- No uses la URL como texto. Es difícil de leer y de recordar.
- Usa botones para las acciones. Si la interacción envía un formulario o inicia una descarga, es un botón, no un enlace.
- Marca el foco para que se vea con claridad qué elemento está seleccionado al navegar con teclado.
6. Asegura un contraste suficiente
El contraste entre texto y fondo decide si tu contenido se lee o desaparece. Un texto que se funde con el fondo es invisible para quien tiene daltonismo o baja visión, y también para cualquiera que consulte la web a plena luz del sol.
| Elemento | Ratio mínimo | Criterio |
|---|---|---|
| Texto normal | 4,5:1 | 1.4.3 (AA) |
| Texto grande, desde 18 pt o 14 pt en negrita | 3:1 | 1.4.3 (AA) |
| Componentes de interfaz y objetos gráficos | 3:1 | 1.4.11 (AA) |
| Texto normal, nivel exigente | 7:1 | 1.4.6 (AAA) |
Quedan fuera del requisito los logotipos y el texto de componentes inactivos o puramente decorativos.
📋 Otras medidas:
- El color no debe ser el único recurso que transmite información. Si marcas un error de formulario solo en rojo, quien no distingue ese color no sabe que hay un error. Añade un icono, una etiqueta o un mensaje de texto.
- Vigila los fondos con degradados o imágenes detrás del texto, donde el contraste cambia según la zona. Utiliza superposiciones semitransparentes o fondos sólidos detrás del texto.
- Define una paleta de colores coherente con relaciones de contraste accesibles para los colores primarios, secundarios y de acento.
7. Crea un diseño claro y fácil de escanear
Una estructura de páginas web limpia y bien organizada facilita la comprensión y acelera la navegación, sobre todo para quien escanea el texto en lugar de leerlo. Eso incluye a personas con dificultades cognitivas o atención limitada, y también a cualquiera con poco tiempo, es decir a casi todo el mundo.
📋 Prácticas que funcionan para un diseño fácil de escanear:
- Encabezados y subtítulos que dividan el contenido en secciones lógicas y creen un mapa visual de la página.
- Párrafos cortos, de tres o cuatro frases, en lugar de bloques largos.
- Listas para organizar información enumerable, que además se recorren mejor con lector de pantalla.
- Espaciado coherente entre secciones y elementos, para evitar la sensación de amontonamiento.
- Agrupación lógica: lo que está relacionado debe estar junto, visual y estructuralmente.
- Navegación previsible, con menús y layouts consistentes en todo el sitio.
- Sin distracciones innecesarias. El criterio 2.2.2 (Pausar, detener, ocultar, nivel A) exige un mecanismo para parar cualquier contenido en movimiento o actualización automática que arranque solo y dure más de cinco segundos.
8. Asegúrate de que la web se puede utilizar con teclado
Hay personas que no pueden usar un ratón por parálisis, temblores u otras limitaciones de movilidad, otras que navegan con lector de pantalla, y otras que simplemente prefieren atajos de teclado por rapidez. Todas dependen de que la web funcione sin puntero.
📋 Para que la web sea operable con teclado, comprobar:
- Orden lógico de tabulación. Los elementos interactivos deben recibir el foco en un orden que conserve el sentido, normalmente de arriba a abajo y de izquierda a derecha. El HTML semántico mantiene esa secuencia sin trucos.
- Foco visible. Enlaces y botones deben mostrar con claridad cuándo están seleccionados, con contornos u otras señales visuales.
- Foco no oculto. Cuando un elemento recibe el foco, no puede quedar completamente escondido detrás de un banner de cookies o una barra fija.
- Sin trampas de teclado. Si el foco entra en un componente, tiene que poder salir de él solo con teclado.
- Enlace de «saltar al contenido». Permite esquivar los menús repetidos y llegar directo al contenido principal.
- Formularios etiquetados. Cada campo necesita su etiqueta y sus instrucciones, con mensajes de error legibles por un lector de pantalla.
9. Diseña para diferentes pantallas y niveles de zoom
Una web accesible se adapta a móviles, tablets y escritorio, y también a distintos niveles de zoom, que es el recurso habitual de quien tiene dificultades visuales.
📋 Para hacer que una web sea accesible desde diferentes pantallas y niveles de zoom:
- Redimensionar el texto: el texto debe poder ampliarse hasta el 200 % sin pérdida de contenido ni de funcionalidad.
- Reflujo: el contenido debe poder presentarse sin scroll en dos direcciones a la vez, con un ancho equivalente a 320 píxeles CSS, lo que corresponde a un zoom del 400 % en una ventana de 1.280 píxeles.
- Ningún scroll horizontal innecesario.
- El contenido de móvil debe ser el mismo que el de escritorio, sin versiones resumidas que dejen fuera información.
- Adapta el diseño al contexto de uso: los visitantes que navegan desde dispositivos móviles suelen echar un vistazo rápido, realizan varias tareas a la vez o tienen una conexión lenta. El sitio debe ofrecer flujos sencillos, carga progresiva o contenido multimedia comprimido, navegación intuitiva, iconos reconocibles y botones principales alejados de los bordes para evitar acciones involuntarias.
10. Añade subtítulos y descripciones a los contenidos multimedia
Los subtítulos y las descripciones textuales son lo que hace utilizable el contenido multimedia para personas con discapacidad auditiva, y también para quien no puede poner el audio en ese momento.
📋 Qué subtítulos añadir según el tipo de contenido:
- Vídeos: subtítulos sincronizados y correctos. Los generados automáticamente suelen fallar en nombres propios y terminología, así que conviene revisarlos.
- Vídeos con información visual relevante: una audiodescripción o una alternativa textual que cuente lo que se ve y no se escucha (1.2.3, nivel A).
- Imágenes complejas o metafóricas: una leyenda breve que explique la relación con el texto que las rodea.
- Gráficos, tablas e infografías: una descripción textual extendida debajo de la imagen que resuma los datos principales. Aquí el texto alternativo no basta, porque un ratio, una tendencia y una comparación no caben en una frase.
¿Cómo comprobar si una web es accesible?
Hacer una web accesible también implica comprobar que funciona bien en la práctica, ya que muchos problemas solo aparecen cuando alguien intenta usarla de verdad. Una revisión completa combina siempre herramientas automáticas con pruebas manuales.
Herramientas automáticas para comprobar la accesibilidad
Las herramientas automáticas detectan rápido los problemas más frecuentes: textos alternativos que faltan, contraste insuficiente, jerarquías de encabezados rotas, campos de formulario sin etiqueta.
- WAVE, el Web Accessibility Evaluation Tool de WebAIM, superpone iconos sobre la propia página para que veas dónde está cada problema y a qué elemento corresponde. Es la más útil para entender visualmente qué está mal.
- Lighthouse, integrado en las herramientas de desarrollo de Chrome, incluye una auditoría de accesibilidad junto a las de rendimiento y SEO, y da una puntuación cómoda para comparar antes y después.
- axe DevTools es la más orientada a desarrollo. Detecta problemas técnicos durante la construcción del sitio y explica el criterio concreto que se incumple.
Estas herramientas detectan lo que se puede medir automáticamente, pero una imagen puede tener un alt perfectamente escrito desde el punto de vista técnico y completamente inútil desde el punto de vista humano, y ninguna herramienta te lo va a decir.
Pruebas manuales de accesibilidad
Estas son las comprobaciones que hay que hacer a mano, porque simulan la experiencia real de navegar con necesidades distintas.
| Qué probar | Cómo hacerlo | Qué buscas |
| Navegación por teclado | Recorre la página solo con Tab, Shift+Tab y Enter | Llegar a todos los elementos interactivos y poder salir de ellos |
| Visibilidad del foco | Observa dónde está el foco en cada salto | Un indicador siempre visible, nunca oculto tras cabeceras fijas o banners |
| Orden del foco | Compara el recorrido del foco con el orden visual | Que la secuencia conserve el sentido de la página |
| Zoom y reflujo | Amplía al 200 % y al 400 % | Sin solapamientos, texto cortado ni scroll horizontal |
| Experiencia en móvil | Usa la web en un teléfono real, con una mano | Botones alcanzables y flujos completos |
| Formularios | Complétalos con teclado y provoca errores a propósito | Etiquetas claras y mensajes de error legibles y descriptivos |
| Multimedia | Reproduce videos sin audio | Subtítulos sincronizados y correctos |
| Lector de pantalla | Recorre la página con NVDA, VoiceOver o TalkBack | Que el contenido se entienda escuchado, no solo leído |
| Usuarios reales | Pide a personas con necesidades distintas que completen una tarea clave | Los problemas que las herramientas no pueden detectar |
Checklist de accesibilidad web para tu página
Esta checklist recoge los criterios de las WCAG 2.2 más relevantes para una web de negocio, traducidos a comprobaciones que puedes hacer hoy mismo. El nivel AA suele ser una referencia práctica para trabajar la accesibilidad de una web de negocio.
| Comprobación | Criterio WCAG 2.2 | |
| Estructura | Un solo H1 por página, que identifica el tema principal. | Buena práctica (apoya 1.3.1, A) |
| Encabezados en orden lógico, sin saltos de H2 a H4. | 1.3.1 Información y relaciones (A) | |
| Encabezados descriptivos, no usados para cambiar el tamaño del texto. | 2.4.6 Encabezados y etiquetas (AA) | |
| HTML semántico para listas, tablas y regiones de la página. | 1.3.1 Información y relaciones (A) | |
| Imágenes | Todas las imágenes informativas tienen texto alternativo que describe su función. | 1.1.1 Contenido no textual (A) |
| Las imágenes decorativas usan alt=””. | 1.1.1 Contenido no textual (A) | |
| Los gráficos e infografías tienen una descripción textual extendida. | 1.1.1 Contenido no textual (A) | |
| Ninguna información esencial vive solo dentro de una imagen con texto incrustado. | 1.4.5 Imágenes de texto (AA) | |
| Texto | Tipografía sans-serif legible, con una o dos familias en todo el sitio. | Buena práctica (no es criterio) |
| El texto se amplía al 200 % sin romper el diseño. | 1.4.4 Redimensionar el texto (AA) | |
| La página aguanta interlineado de 1,5 y espaciado entre párrafos de 2 veces el tamaño de fuente. | 1.4.12 Espaciado del texto (AA) | |
| Párrafos cortos y listas en lugar de bloques largos. | Buena práctica (1.4.8, AAA, no obligatorio) | |
| Contraste | Texto normal con ratio de 4,5:1 como mínimo. | 1.4.3 Contraste mínimo (AA) |
| Texto grande y componentes de interfaz con 3:1 como mínimo. | 1.4.3 (AA) y 1.4.11 Contraste no textual (AA) | |
| El color no es el único recurso que transmite información. | 1.4.1 Uso del color (A) y 1.3.3 (A) | |
| El texto sobre imágenes o degradados mantiene el contraste en toda su extensión. | 1.4.3 Contraste mínimo (AA) | |
| Navegación | Toda la funcionalidad se puede usar solo con teclado. | 2.1.1 Teclado (A) y 2.1.2 Sin trampas (A) |
| El indicador de foco es visible y no queda oculto por elementos fijos. | 2.4.7 Foco visible (AA) y 2.4.11 Foco no oculto (AA) | |
| El orden de tabulación conserva el sentido de la página. | 2.4.3 Orden del foco (A) | |
| Existe un enlace de «saltar al contenido». | 2.4.1 Evitar bloques (A) | |
| Los textos de enlace describen su destino sin depender del contexto. | 2.4.4 (A) | |
| Los objetivos táctiles miden 24 × 24 píxeles CSS o tienen separación suficiente. | 2.5.8 Tamaño del objetivo mínimo (AA) | |
| Multimedia | Los videos grabados tienen subtítulos sincronizados y revisados. | 1.2.2 Subtítulos grabados (A) |
| El contenido visual relevante cuenta con audiodescripción o alternativa textual. | 1.2.3 (A) y 1.2.5 Audiodescripción (AA) | |
| Nada se reproduce automáticamente con audio, o existe un control para detenerlo. | 1.4.2 Control del audio (A) | |
| El contenido que se mueve, parpadea o se actualiza automáticamente puede pausarse, detenerse u ocultarse cuando corresponde. | 2.2.2 Pausar, detener, ocultar (A) | |
| Responsive | El contenido funciona a 320 píxeles CSS de ancho sin scroll horizontal. | 1.4.10 Reflujo (AA) |
| El contenido de móvil es el mismo que el de escritorio. | Buena práctica (apoya 1.4.10, AA) | |
| No hay solapamientos ni elementos cortados al aplicar zoom. | 1.4.10 (AA) y 1.4.4 (AA) | |
| Formularios | Cada campo tiene etiqueta visible y asociada programáticamente. | 3.3.2 Etiquetas o instrucciones (A) y 4.1.2 (A) |
| Los errores se identifican en texto y explican cómo corregirlos. | 3.3.1 Identificación de errores (A) y 3.3.3 (AA) | |
| Los campos que piden datos personales declaran su propósito. | 1.3.5 Identificar el propósito de la entrada (AA) | |
| Testing | Revisión automática pasada con WAVE, Lighthouse o axe DevTools. | Metodología de evaluación |
| Recorrido manual completo con teclado y con zoom al 400 %. | Metodología de evaluación | |
| Prueba con al menos un lector de pantalla. | Metodología de evaluación | |
| Una tarea clave validada con usuarios reales. | Metodología de evaluación |
Haz tu web accesible desde el principio
La accesibilidad es una consecuencia de cómo diseñas. Los 10 pasos de esta guía se pueden resumir en unas pocas decisiones que conviene tomar desde el principio: una jerarquía clara de encabezados, una tipografía y un contraste fáciles de leer, una navegación que funcione sin ratón, un contenido que se adapte a cualquier pantalla y una multimedia que no dependa únicamente del sonido o de la imagen.
Corregir todo eso después del lanzamiento suele llevar más tiempo que tenerlo en cuenta desde el principio. Y no hace falta abordarlo como un proyecto técnico: si tu web todavía falla en varios puntos, empieza por el contraste y los textos alternativos, que son los que más impacto tienen con menos trabajo.
Para una pyme sin equipo técnico, conseguir una web accesible depende muchas veces de cómo se plantea el proyecto desde el principio. El SiteGround Website Builder trae resueltas de fábrica las decisiones que más problemas causan después: plantillas optimizadas para móvil que se adaptan solas a cualquier pantalla y nivel de zoom, combinaciones tipográficas legibles, control del contraste al elegir la paleta, campos de texto alternativo integrados en la biblioteca de imágenes y una estructura de encabezados que no se rompe al maquetar.
- Plantillas optimizadas para móvil que se adaptan solas a cualquier pantalla y nivel de zoom
- Combinaciones tipográficas legibles
- Control del contraste al elegir la paleta
- Campos de texto alternativo integrados en la biblioteca de imágenes
- Estructura de encabezados que no se rompe al maquetar
Se encarga de la parte que normalmente te llevaría a contratar a un desarrollador y te permite centrarte en lo que requiere criterio humano, como decidir qué dice cada texto alternativo, revisar los subtítulos o recorrer tu web con el teclado. Con las funciones de IA integradas para textos e imágenes, incluso esa parte avanza más rápido. Y si te atascas, tienes soporte experto 24/7 en español.
Crea tu web accesible con el SiteGround Website Builder y deja de dejar gente fuera.
FAQ sobre el diseño web accesible
El diseño accesible es el que elimina barreras para que cualquier persona pueda percibir, comprender, navegar e interactuar con un producto, con independencia de sus capacidades sensoriales, motoras o cognitivas. Aplicado a la web, se traduce en decisiones concretas sobre estructura, tipografía, color, navegación y contenido.
Los cuatro principios de accesibilidad web son perceptible, operable, comprensible y robusto, conocidos por el acrónimo POUR. Perceptible significa que la información se pueda captar por las vías sensoriales disponibles, Operable que se pueda manejar con distintos métodos de entrada, Comprensible que el contenido y la interfaz sean claros y previsibles, y Robusto que funcione en navegadores, dispositivos y tecnologías asistivas diferentes.
Una web accesible tiene una jerarquía de encabezados correcta, texto alternativo en las imágenes informativas, contraste de al menos 4,5:1 en el texto normal, enlaces que describen su destino, navegación completa por teclado con foco visible, diseño que se adapta al zoom y a cualquier pantalla, y subtítulos en sus contenidos multimedia.
Cinco herramientas útiles para evaluar la accesibilidad de una web son WAVE de WebAIM, la auditoría de accesibilidad de Lighthouse en Chrome, axe DevTools de Deque, un comprobador de contraste de color y un lector de pantalla como NVDA o VoiceOver. Las tres primeras automatizan la detección de errores frecuentes y las dos últimas sirven para verificar manualmente lo que las automáticas no ven.
Para mejorar un sitio ya publicado, empieza por una auditoría automática que te dé el mapa de problemas y prioriza los de mayor impacto y menor esfuerzo: contraste de texto, textos alternativos que faltan y jerarquía de encabezados. Después aborda la navegación por teclado y el foco visible, que suelen requerir cambios en plantillas. Los subtítulos y las descripciones extendidas de gráficos van al final, porque son trabajo de contenido y se pueden hacer de forma progresiva.
Para hacer accesible un sitio en WordPress, elige un tema que declare conformidad con las WCAG, usa el editor de bloques para mantener una jerarquía de encabezados correcta, rellena el campo de texto alternativo en la biblioteca de medios y revisa el contraste de la paleta del tema. Después audita el resultado, porque muchos plugins y constructores visuales introducen problemas de foco y de orden de tabulación que el tema no controla. Nuestra guía de optimización de WordPress cubre cómo revisar lo que añaden los plugins.
WordPress como plataforma sigue unos estándares de accesibilidad propios en su interfaz de administración y en sus temas oficiales, pero la conformidad final con las WCAG depende de tu sitio, no del CMS. El tema que elijas, los plugins que instales y el contenido que publiques determinan si tu web cumple el nivel AA. Instalar WordPress no te hace conforme, igual que crear una página web con cualquier otra herramienta tampoco lo hace por sí solo.