Accesibilidad web para consultas médicas: guía WCAG para profesionales de la salud

Imagina a una paciente de 72 años con degeneración macular que intenta reservar una cita en tu web. Los botones son pequeños, el contraste entre texto y fondo es insuficiente, el formulario de reserva no funciona con el teclado porque depende exclusivamente del ratón. La paciente cierra la web y llama por teléfono. O peor: busca otro profesional cuya web sí pueda usar.

Ahora imagina a un paciente con movilidad reducida que navega con un dispositivo de seguimiento ocular. O a un padre sordo que necesita subtítulos en el vídeo de presentación de tu consulta. O a un paciente con dislexia que no puede leer tu web porque el texto es demasiado pequeño, las líneas son demasiado largas y no hay espaciado suficiente entre párrafos.

La accesibilidad web no es un extra decorativo ni un requisito burocrático. Es la diferencia entre que un paciente pueda acceder a tus servicios o no. Y en el sector salud, donde el acceso es especialmente crítico, la responsabilidad es mayor.

Por qué la accesibilidad web importa en el sector salud

El sector sanitario tiene una particularidad que hace la accesibilidad aún más relevante que en otros sectores: los usuarios con discapacidad son, proporcionalmente, quienes más necesitan servicios de salud. Las personas con discapacidad visual, auditiva, motora o cognitiva tienen más consultas médicas que la población general, y paradójicamente son quienes más barreras encuentran para acceder a la información online.

Los números que importan

• 4,38 millones de personas con discapacidad reconocida en España (INE, 2022). Es el 9,3% de la población.
• El 30% de los mayores de 65 años tiene dificultades para usar interfaces digitales estándar, y España envejece rápidamente.
• El 15-20% de la población tiene alguna discapacidad temporal o situacional en cualquier momento dado (un brazo roto, una migraña, usar el móvil al sol sin ver bien la pantalla).
• El 71% de los usuarios con discapacidad abandona una web que no es accesible (WebAIM, 2024). No llaman: se van a otra web.

Más allá de la discapacidad permanente

La accesibilidad no beneficia solo a personas con discapacidades permanentes. Beneficia a:

• Personas mayores con presbicia, temblores o dificultades cognitivas leves
• Pacientes que navegan tu web bajo los efectos de medicación (visión borrosa, somnolencia)
• Cualquier persona que usa el móvil en condiciones adversas (sol directo, con guantes, con una mano)
• Pacientes con ansiedad que necesitan interfaces claras y predecibles

---

WCAG explicado para profesionales sanitarios

Las Web Content Accessibility Guidelines (WCAG) son el estándar internacional de accesibilidad web, publicado por el W3C (World Wide Web Consortium). La versión actual es WCAG 2.2 (publicada en octubre de 2023), aunque la legislación europea referencia WCAG 2.1.

Los 4 principios POUR

WCAG se organiza en 4 principios. Tu web debe ser:

1. Perceptible: la información debe poder percibirse por al menos un sentido. Si hay una imagen, necesita texto alternativo. Si hay un vídeo, necesita subtítulos. Si hay un audio, necesita transcripción.
2. Operable: la interfaz debe poder usarse con diferentes dispositivos de entrada. Todo lo que se puede hacer con ratón debe poder hacerse con teclado. Los elementos interactivos deben tener un tamaño mínimo de 44x44 píxeles.
3. Comprensible: el contenido y la navegación deben ser predecibles y claros. Los formularios deben indicar qué se espera en cada campo. Los errores deben explicarse con claridad.
4. Robusto: el contenido debe funcionar con diferentes tecnologías, incluidas las tecnologías de asistencia (lectores de pantalla, magnificadores, dispositivos de entrada alternativos).

Los 3 niveles de conformidad

• Nivel A: requisitos mínimos. Eliminan las barreras más graves. Ejemplo: todas las imágenes tienen texto alternativo.
• Nivel AA: el nivel recomendado y el que exige la legislación europea. Ejemplo: ratio de contraste mínimo de 4.5:1 entre texto y fondo.
• Nivel AAA: el nivel óptimo. Incluye requisitos avanzados como contraste 7:1, lenguaje de signos para todo contenido audiovisual, etc. Deseable pero no siempre práctico.

---

Marco legal en España y Europa

El marco legal de la accesibilidad web está evolucionando rápidamente y afecta cada vez más al sector privado:

Legislación vigente

• Real Decreto 1112/2018: obliga a las webs del sector público a cumplir WCAG 2.1 AA. No aplica directamente a consultas privadas, pero sí a consultas que prestan servicios para la sanidad pública.
• Real Decreto Legislativo 1/2013: Ley General de derechos de las personas con discapacidad. Prohíbe la discriminación por razón de discapacidad en el acceso a bienes y servicios, lo que incluye servicios digitales.
• European Accessibility Act (EAA): Directiva (UE) 2019/882, transpuesta en España. Desde junio de 2025, amplía los requisitos de accesibilidad a servicios digitales del sector privado, incluyendo comercio electrónico y servicios profesionales online.

Qué significa para tu consulta

Aunque la web de una consulta privada no tiene hoy una obligación legal explícita de cumplir WCAG (salvo que trabajes con el sector público), la tendencia regulatoria es inequívoca: la accesibilidad será obligatoria para todo servicio digital profesional. Anticiparse no es solo buena práctica —es protegerte ante sanciones futuras y posibles demandas por discriminación. Consulta también nuestra guía de RGPD para consultas médicas, que cubre otro aspecto legal crítico de tu presencia digital.

---

Cómo auditar la accesibilidad de tu web

Antes de mejorar nada, necesitas saber dónde estás. Una auditoría de accesibilidad combina herramientas automáticas y pruebas manuales:

Auditoría automática (30 minutos)

1. Google Lighthouse: abre Chrome DevTools (F12), ve a la pestaña Lighthouse, ejecuta una auditoría de accesibilidad. Te da una puntuación sobre 100 y lista los problemas detectados con instrucciones para resolverlos.
2. WAVE (wave.webaim.org): introduce la URL de tu web y obtienes un informe visual que marca cada error y advertencia directamente sobre tu página.
3. axe DevTools: extensión de navegador que analiza la página actual y clasifica los problemas por impacto (crítico, serio, moderado, menor).

Pruebas manuales (1-2 horas)

1. Navegación solo con teclado: cierra el ratón y navega tu web usando solo Tab, Enter, Escape y las flechas. ¿Puedes llegar a todos los elementos interactivos? ¿Ves dónde está el foco en cada momento? ¿Puedes completar una reserva de cita?
2. Lector de pantalla: activa VoiceOver (Cmd+F5 en Mac) o NVDA (Windows, gratuito) y navega tu web sin mirar la pantalla. ¿Tienen sentido las imágenes cuando se leen? ¿Los formularios se entienden? ¿Los botones dicen qué hacen?
3. Zoom al 200%: aumenta el zoom del navegador al 200%. ¿Se sigue viendo todo el contenido? ¿Hay textos que se superponen? ¿Los botones siguen siendo clicables?
4. Contraste: usa la herramienta de contraste de Chrome DevTools para verificar que todo el texto cumple el ratio mínimo de 4.5:1 (3:1 para texto grande).

---

10 mejoras rápidas que puedes hacer hoy

Estas mejoras resuelven los problemas de accesibilidad más comunes y no requieren conocimientos técnicos avanzados:

1. Añadir texto alternativo a todas las imágenes

Cada imagen de tu web debe tener un atributo alt que describa lo que muestra. No "imagen1.jpg" sino "Doctora revisando una radiografía en su consulta". Las imágenes decorativas pueden tener alt="" vacío.

2. Asegurar un contraste mínimo de 4.5:1

El texto debe ser legible sobre el fondo. Texto gris claro (#999) sobre fondo blanco (#fff) tiene un contraste de 2.85:1 —insuficiente. Cambia a gris más oscuro (#595959) para cumplir el mínimo de 4.5:1. Usa WebAIM Contrast Checker para verificar.

3. Usar encabezados jerárquicos correctos

La estructura de encabezados debe ser lógica: un solo H1 (título de la página), seguido de H2 para secciones principales, H3 para subsecciones. Nunca saltes niveles (de H2 a H4). Los lectores de pantalla usan los encabezados para navegar la página. Esto también mejora tu SEO local.

4. Etiquetar todos los campos de formulario

Cada campo de formulario necesita una etiqueta <label> asociada. El placeholder no es suficiente: desaparece cuando el usuario empieza a escribir y no es leído correctamente por todos los lectores de pantalla.

5. Hacer los botones y enlaces descriptivos

"Haz clic aquí" o "Leer más" no dicen nada fuera de contexto. Usa "Reservar cita de revisión dental" o "Leer la guía completa de RGPD". Un usuario de lector de pantalla puede navegar por la lista de enlaces de la página: cada enlace debe tener sentido por sí solo.

6. Asegurar la navegación por teclado

Todos los elementos interactivos (enlaces, botones, campos de formulario, menús) deben ser alcanzables y operables con el teclado. El indicador de foco (el borde que aparece al navegar con Tab) debe ser visible. Nunca uses outline: none sin proporcionar un indicador alternativo.

7. Añadir subtítulos a los vídeos

Si tienes vídeos en tu web (presentación de la consulta, explicación de tratamientos), deben tener subtítulos. YouTube genera subtítulos automáticos que puedes revisar y corregir. Es imprescindible para pacientes sordos y útil para todos los que ven vídeos sin sonido.

8. Usar tamaños de texto legibles

El cuerpo de texto debe ser mínimo 16px (1rem). El interlineado mínimo 1.5. El ancho máximo de línea 80 caracteres. Estas medidas no solo mejoran la accesibilidad sino la legibilidad para todos los usuarios, especialmente en la web profesional de tu consulta.

9. Proporcionar mensajes de error claros

Cuando un formulario tiene un error, el mensaje debe indicar qué campo tiene el error y cómo corregirlo. "Error en el formulario" no es accesible. "El campo teléfono debe tener 9 dígitos" sí lo es.

10. Verificar en dispositivos móviles

Los elementos interactivos en móvil deben tener un tamaño mínimo de 44x44 píxeles. Los textos deben ser legibles sin zoom. Los menús deben ser operables con el pulgar. El 70% del tráfico web en salud viene de móvil.

---

Formularios y agenda online accesibles

Los formularios son el punto crítico de accesibilidad en la web de una consulta. Tu agenda online y el formulario de contacto deben cumplir estos requisitos:

• Etiquetas visibles en todo momento (no solo placeholder que desaparece)
• Instrucciones claras antes del formulario: qué datos necesitas y por qué
• Agrupación lógica con <fieldset> y <legend> para campos relacionados (datos personales, datos de contacto, motivo de consulta)
• Validación accesible: errores anunciados por lectores de pantalla, campo con error marcado visualmente y descrito textualmente
• Autocompletado: atributos autocomplete correctos para que el navegador pueda rellenar datos automáticamente (name, email, tel)
• Sin límite de tiempo: si el formulario tiene sesión, advertir antes de que expire y permitir extenderla

---

Contenido accesible: textos, imágenes y vídeos

Crear contenido accesible no significa simplificar al extremo. Significa estructurar la información para que sea consumible de múltiples formas:

Textos

• Usa lenguaje claro y directo. Evita jerga médica innecesaria en las páginas de servicio (puedes usar terminología técnica en los artículos de blog si la explicas).
• Párrafos cortos (3-4 líneas máximo). Usa listas para enumerar.
• Indica el idioma de la página con el atributo lang="es" para que los lectores de pantalla pronuncien correctamente.

Imágenes

• Texto alternativo descriptivo para imágenes informativas.
• alt="" para imágenes puramente decorativas.
• Si una imagen contiene texto (un gráfico, una infografía), ese texto debe estar disponible en HTML como alternativa.

Vídeos

• Subtítulos sincronizados para todos los vídeos.
• Audiodescripción si el vídeo tiene contenido visual relevante no descrito en el audio.
• Controles de reproducción accesibles por teclado.
• No reproducción automática (autoplay distrae y confunde a usuarios de lectores de pantalla).

---

Accesibilidad y SEO: la conexión directa

La accesibilidad y el SEO comparten más de lo que parece. Google no puede "ver" tu web como un humano con visión perfecta —la rastrea como un lector de pantalla. Por eso, muchas mejoras de accesibilidad son también mejoras de SEO:

• Textos alternativos: Google los usa para indexar y posicionar imágenes en Google Images.
• Estructura de encabezados: Google usa la jerarquía H1-H6 para entender la estructura del contenido y extraer featured snippets.
• HTML semántico: las etiquetas <nav>, <main>, <article>, <aside> ayudan a Google a entender qué parte de la página es contenido principal y qué es navegación o complemento.
• Velocidad de carga: las webs accesibles suelen ser más ligeras (menos dependencia de JavaScript, imágenes optimizadas con alt, código limpio).
• Compatibilidad móvil: los requisitos de accesibilidad en móvil (tamaño de toque, legibilidad) coinciden con los criterios de Google para mobile-first indexing.
• Experiencia de usuario: Google mide señales de UX (Core Web Vitals, tasa de rebote). Una web accesible tiene menor tasa de rebote porque más usuarios pueden usarla correctamente.

---

Herramientas y recursos

Herramientas de auditoría

• Google Lighthouse: integrado en Chrome DevTools, gratuito, auditoría automática con puntuación y recomendaciones.
• WAVE (wave.webaim.org): informe visual online, gratuito, muestra errores directamente sobre la página.
• axe DevTools: extensión de navegador, versión gratuita y de pago, muy detallada en la clasificación de problemas.
• Pa11y: herramienta de línea de comandos, ideal para integrar en flujos de desarrollo y monitorizar accesibilidad de forma automática.

Herramientas de verificación específica

• WebAIM Contrast Checker: verificación de contraste de colores.
• Heading Map (extensión de navegador): visualiza la estructura de encabezados de la página.
• Screen Reader simulators: si no tienes un lector de pantalla, usa ChromeVox (extensión de Chrome) para una aproximación.

Recursos de aprendizaje

• W3C WCAG Quick Reference: referencia rápida de todos los criterios WCAG con filtros por nivel y tema.
• WebAIM: artículos, tutoriales y herramientas sobre accesibilidad web, en inglés pero muy claros.
• Observatorio de Accesibilidad Web (OAW): recurso español del Ministerio, con guías y normativa aplicable.

---

Preguntas frecuentes

Hacer tu web accesible es una inversión que beneficia a tus pacientes, mejora tu SEO y te prepara para la regulación que viene. Si estás creando o renovando tu web, aplica estos criterios desde el inicio consultando nuestra guía para crear una web profesional médica. Si ya tienes web y quieres mejorar tu visibilidad, la accesibilidad es una palanca poco explotada —revisa también nuestra guía de presencia online para médicos autónomos. Y para asegurar que tu web cumple con toda la normativa, consulta la guía de RGPD para consultas médicas.