Diseño web accesible para personas con discapacidad: guía práctica para cumplir la normativa española

Si tienes una web y nunca has revisado su accesibilidad, hay muchas probabilidades de que estés excluyendo involuntariamente a una parte significativa de tu audiencia. En España, más de 4 millones de personas tienen algún tipo de discapacidad que puede afectar a su forma de navegar por internet. El diseño web accesible para discapacitados no es solo una cuestión de responsabilidad social: desde 2023, la normativa española ha ampliado las obligaciones legales, y las pymes y agencias digitales deben conocer qué les afecta exactamente.

En esta guía encontrarás los criterios más relevantes de las WCAG, los errores de diseño más comunes que bloquean a usuarios con diversidad funcional, y un plan de acción real para adaptar una web existente sin tener que rehacerla desde cero.

---

Qué dice la normativa de accesibilidad web en España

La legislación española en materia de accesibilidad digital se articula principalmente alrededor del Real Decreto 1112/2018, que transpone la Directiva Europea 2016/2102. Este decreto obliga a los organismos del sector público a cumplir los criterios de accesibilidad establecidos en la norma UNE-EN 301 549, que a su vez se basa en las WCAG 2.1 de nivel AA.

Pero la obligación no se limita al sector público. La Ley 11/2023, que adapta el marco europeo de accesibilidad (Directiva 2019/882), amplía progresivamente las exigencias al sector privado. A partir de junio de 2025, empresas que presten servicios digitales al consumidor final —incluyendo tiendas online, apps y webs de servicios— deben garantizar unos mínimos de accesibilidad.

¿Qué significa esto para una pyme o agencia digital? Que si tienes un ecommerce, un portal de servicios o cualquier interfaz digital dirigida al público, la accesibilidad digital es obligatoria en España (o lo será muy pronto) y conviene adelantarse.

Nota importante: Las obligaciones específicas varían según el tamaño de la empresa y el tipo de servicio. Ante la duda, consulta con un especialista legal o revisa la guía oficial del Ministerio de Asuntos Económicos.

---

Qué son las WCAG y por qué son la referencia clave

Las WCAG (Web Content Accessibility Guidelines) son las pautas internacionales de accesibilidad web elaboradas por el W3C. Se estructuran en torno a 4 principios fundamentales, conocidos como POUR:

• Perceptible: la información debe presentarse de forma que cualquier usuario pueda percibirla, independientemente de sus capacidades sensoriales.
• Operable: todos los componentes de la interfaz deben poder manejarse con diferentes dispositivos de entrada (teclado, ratón, pantalla táctil, lector de pantalla).
• Comprensible: el contenido y el funcionamiento deben ser fáciles de entender.
• Robusto: el contenido debe interpretarse correctamente por tecnologías de asistencia actuales y futuras.

Las WCAG se dividen en tres niveles: A (mínimo), AA (estándar recomendado) y AAA (avanzado). La normativa española exige el nivel AA como referencia para cumplir las obligaciones legales.

Para la mayoría de pymes y agencias, alcanzar el nivel AA es perfectamente factible sin necesidad de una inversión desproporcionada. El problema suele ser el desconocimiento, no la complejidad técnica.

---

Los errores de accesibilidad más comunes en webs de pymes

Antes de entrar en soluciones, conviene identificar los fallos más frecuentes que detectamos en auditorías de webs pequeñas y medianas:

1. Imágenes sin texto alternativo (alt)

El atributo alt en las imágenes es imprescindible para que los lectores de pantalla puedan describir el contenido visual a personas con discapacidad visual. Una imagen decorativa puede llevar alt="", pero cualquier imagen que aporte información debe tener una descripción significativa.

Ejemplo incorrecto: <img src="equipo.jpg"> Ejemplo correcto: <img src="equipo.jpg" alt="El equipo de diseño de PeriDigital trabajando en una oficina moderna">

2. Contraste de color insuficiente

Uno de los criterios más infringidos. Las WCAG exigen una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande. Los grises claros sobre blanco o los textos de color pastel sobre fondos claros suelen suspender este criterio.

Herramientas gratuitas como WebAIM Contrast Checker o la extensión Accessibility Insights permiten comprobar el contraste en segundos.

3. Formularios sin etiquetas visibles

Muchos formularios utilizan únicamente el placeholder como guía para el usuario. El problema es que el placeholder desaparece en cuanto se empieza a escribir, y los lectores de pantalla no siempre lo leen correctamente. Cada campo de formulario debe tener una etiqueta <label> asociada.

4. Navegación solo posible con ratón

Algunos elementos interactivos —menús desplegables, modales, sliders— solo funcionan al pasar el cursor por encima o al hacer clic con el ratón. Cualquier funcionalidad de la web debe poder operarse únicamente con el teclado, usando la tecla Tab para moverse y Enter o la barra espaciadora para activar elementos.

5. Estructura de encabezados incorrecta o inexistente

Los encabezados (H1, H2, H3…) no son solo una herramienta de diseño visual: son la estructura que los lectores de pantalla usan para que los usuarios naveguen por el contenido. Saltar de H1 a H4, o usar encabezados solo para cambiar el tamaño del texto, rompe esa estructura lógica.

6. Vídeos sin subtítulos ni transcripción

Si publicas vídeos en tu web sin subtítulos, excluyes a personas con discapacidad auditiva. Las WCAG exigen subtítulos para todo contenido multimedia pregrabado. Herramientas como YouTube o servicios de transcripción automática facilitan enormemente este proceso.

---

Cómo hacer tu web accesible paso a paso

Adaptar una web existente puede parecer abrumador, pero con un enfoque estructurado es perfectamente manejable. Aquí tienes un proceso en cuatro fases:

Fase 1: Auditoría inicial

Antes de tocar nada, evalúa el estado actual. Existen herramientas automáticas que detectan entre el 30% y el 40% de los problemas de accesibilidad:

• WAVE (wave.webaim.org): extensión gratuita que señala errores directamente sobre la página.
• Lighthouse (integrado en Chrome DevTools): genera un informe de accesibilidad junto con métricas de rendimiento.
• axe DevTools: extensión de navegador con análisis más detallado.

Complementa la revisión automática con pruebas manuales: navega tu web solo con el teclado, activa un lector de pantalla (NVDA en Windows o VoiceOver en Mac/iOS son gratuitos) y comprueba cómo se experimenta el contenido.

Fase 2: Prioriza los errores críticos

No todos los problemas tienen el mismo impacto. Empieza por los que bloquean completamente la experiencia:

Prioridad	Tipo de error	Criterio WCAG
Alta	Imágenes sin alt	1.1.1
Alta	Formularios sin etiquetas	1.3.1 / 4.1.2
Alta	Sin navegación por teclado	2.1.1
Media	Contraste insuficiente	1.4.3
Media	Encabezados desordenados	1.3.1
Baja	Ausencia de subtítulos	1.2.2

Fase 3: Implementa las correcciones

Muchas de las correcciones son cambios de código relativamente sencillos:

• Añadir atributos alt a las imágenes desde el gestor de contenidos (en WordPress, desde la librería de medios).
• Revisar y corregir la paleta de colores con el contraste adecuado.
• Añadir <label> a los campos de formulario y asegurarse de que el focus visible está habilitado en el CSS.
• Revisar la jerarquía de encabezados en todas las páginas principales.
• Subir subtítulos a los vídeos integrados.

Si trabajas con WordPress, plugins como WP Accessibility o Equalize Digital Accessibility Checker automatizan algunas de estas comprobaciones dentro del propio gestor.

Fase 4: Incluye una declaración de accesibilidad

La normativa española exige que las entidades obligadas publiquen en su web una declaración de accesibilidad que informe sobre el nivel de conformidad alcanzado, las limitaciones conocidas y los canales de contacto para reportar problemas. Es un paso sencillo pero imprescindible desde el punto de vista legal.

---

Accesibilidad web y SEO: dos objetivos que van de la mano

Una de las razones por las que la optimización web para móviles y la accesibilidad se suelen tratar juntas es que comparten muchos principios fundamentales: estructura semántica clara, velocidad de carga, navegación coherente y contenido comprensible.

De hecho, mejorar la accesibilidad de tu web tiene un impacto positivo directo en el SEO:

• Textos alternativos en imágenes → mejor comprensión del contenido por parte de Googlebot.
• Estructura de encabezados correcta → facilita el rastreo y el entendimiento de la jerarquía de contenidos.
• Subtítulos en vídeos → contenido indexable que aumenta la relevancia semántica.
• Rendimiento y código limpio → webs más accesibles tienden a estar mejor estructuradas, lo que favorece el tiempo de carga.

Si estás trabajando en el diseño UX UI de tu web o aplicación, incorporar la accesibilidad desde el inicio del proceso es siempre mucho más eficiente que añadirla como capa final.

---

Web accesible para pymes: ¿cuánto cuesta adaptarse?

Una pregunta muy frecuente entre nuestros clientes es cuánto supone económicamente adaptar una web existente. La respuesta depende del estado de partida, pero podemos darte referencias orientativas:

• Web sencilla (5-10 páginas, sin ecommerce): entre 300 € y 800 € si el trabajo lo hace un profesional externo, o pocas horas de trabajo interno si tienes conocimientos técnicos.
• Web mediana con formularios y vídeos: entre 800 € y 2.000 €, dependiendo de la cantidad de contenido que deba revisarse.
• Ecommerce o portal complejo: puede superar los 2.000 € si hay muchas páginas de producto, flujos de compra y elementos interactivos.

En cualquier caso, el coste de adaptar una web existente es significativamente menor que el de construir una desde cero con accesibilidad integrada. Y siempre menor que el de enfrentarse a una reclamación o sanción administrativa.

Si estás valorando cuánto te costaría una web nueva que ya incluya estos estándares desde el principio, puedes consultar nuestra guía sobre presupuesto para una página web a medida para tener referencias de precios reales.

---

Checklist rápido de accesibilidad web para pymes

Antes de cerrar, aquí tienes una lista de verificación básica que puedes empezar a aplicar hoy mismo:

• Todas las imágenes informativas tienen atributo alt descriptivo.
• El contraste de color entre texto y fondo supera 4.5:1.
• Todos los campos de formulario tienen etiqueta <label> asociada.
• La web es completamente navegable usando solo el teclado.
• Los encabezados siguen una jerarquía lógica (H1 → H2 → H3).
• Los vídeos incluyen subtítulos o transcripción.
• Los enlaces tienen textos descriptivos (no "haz clic aquí").
• El tamaño mínimo de fuente es legible (mínimo 14-16px para cuerpo).
• Existe una declaración de accesibilidad publicada en la web.
• La web ha sido revisada con al menos una herramienta automática (WAVE, Lighthouse…).

---

Conclusión: la accesibilidad no es opcional, es una ventaja competitiva

Hacer tu web accesible no es simplemente cumplir con la normativa española —aunque eso ya de por sí debería ser suficiente motivación—. Es también mejorar la experiencia de todos tus usuarios, reforzar tu posicionamiento en Google y demostrar que tu marca se preocupa por la inclusión.

El punto de partida es una auditoría honesta de tu web actual. Si identificas los errores más graves, priorizas las correcciones y documentas el proceso, puedes alcanzar el nivel AA de las WCAG de forma progresiva y sin un presupuesto desorbitado.

Si además estás pensando en crear o rediseñar tu web desde cero, es el momento perfecto para integrar la accesibilidad desde el primer boceto. En PeriDigital podemos ayudarte a construir una presencia digital que sea útil, visible y accesible para todas las personas.