98%

de las webs de ONGs que he auditado tienen al menos 5 de estos 10 errores

Introducción

Llevo años auditando webs de asociaciones, fundaciones y ONGs. Y aunque cada organización es única, los errores de accesibilidad se repiten constantemente. La mayoría son fáciles de arreglar una vez que sabes qué buscar.

Este artículo te muestra los 10 errores más comunes, por qué son problemáticos, y cómo solucionarlos. Todo con ejemplos reales y código que puedes copiar.

1

Imágenes sin texto alternativo

Gravedad: Alta

El problema: Imágenes sin atributo alt o con alt genérico ("imagen", "foto", "icono"). Los lectores de pantalla no pueden describir las imágenes, dejando fuera información crucial.

Dónde lo veo más:

  • Fotos de proyectos o eventos
  • Infografías con estadísticas
  • Logotipos de partners
  • Imágenes en calls-to-action
❌ MAL - Sin alt <img src="proyecto-agua-senegal.jpg">
❌ MAL - Alt genérico <img src="proyecto-agua-senegal.jpg" alt="imagen">
✅ BIEN - Alt descriptivo <img src="proyecto-agua-senegal.jpg" alt="Niñas senegalesas recogiendo agua limpia del nuevo pozo instalado en su aldea">

✅ Solución

  • Imágenes informativas: Describe qué se ve y por qué es relevante
  • Imágenes decorativas: Usa alt="" vacío (no omitas el atributo)
  • Imágenes con texto: El alt debe incluir ese texto
  • Gráficos/datos: Describe la conclusión principal
2

Contraste de color insuficiente

Gravedad: Alta

El problema: Texto gris claro sobre fondo blanco, o colores que no contrastan suficiente. Afecta a personas con baja visión y daltonismo, pero también a todos en pantallas con mucho sol.

Dónde lo veo más:

  • Texto secundario o "hints" en formularios
  • Enlaces en el footer
  • Botones con colores corporativos sin pensar en contraste
  • Texto sobre imágenes de fondo
❌ MAL - Contraste 2.8:1 (necesita mínimo 4.5:1) color: #999999; /* gris claro */
background: #ffffff; /* blanco */
✅ BIEN - Contraste 7.1:1 color: #595959; /* gris oscuro */
background: #ffffff; /* blanco */

✅ Solución

Ratios mínimos requeridos:

  • Texto normal: 4.5:1 (AA) o 7:1 (AAA)
  • Texto grande (>24px): 3:1 (AA) o 4.5:1 (AAA)
  • Componentes UI: 3:1

Herramientas: WebAIM Contrast Checker, my A11y Checker Pro

3

Enlaces "Haz click aquí"

Gravedad: Media

El problema: Enlaces genéricos que no tienen sentido fuera de contexto. Los usuarios de lectores de pantalla suelen navegar saltando de enlace en enlace. Si todos dicen "click aquí" o "leer más", no saben a dónde van.

❌ MAL - Enlaces genéricos Para conocer nuestro proyecto de reforestación, <a href="/proyectos/reforestacion">haz click aquí</a>.

Descarga el informe anual <a href="/informe-2024.pdf">aquí</a>.
✅ BIEN - Enlaces descriptivos Conoce nuestro <a href="/proyectos/reforestacion">proyecto de reforestación en la Amazonía</a>.

Descarga el <a href="/informe-2024.pdf">informe anual 2024 (PDF, 2MB)</a>.

✅ Solución

  • El texto del enlace debe tener sentido por sí solo
  • Evita: "click aquí", "leer más", "más información", "aquí"
  • Incluye el destino o acción: "Descargar informe", "Ver galería de fotos"
  • Para PDFs, indica formato y tamaño
4

Formularios sin labels

Gravedad: Alta

El problema: Campos de formulario con placeholder pero sin label, o labels no asociados correctamente. Los lectores de pantalla no pueden identificar qué debe ir en cada campo.

❌ MAL - Solo placeholder <input type="text" placeholder="Tu nombre">
<input type="email" placeholder="Email">
✅ BIEN - Label asociado <label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre">

<label for="email">Email</label>
<input type="email" id="email" name="email">

✅ Solución

  • Todo input necesita un label con for/id coincidente
  • Puedes usar placeholder además, pero no en lugar de label
  • Si visualmente no quieres el label, ocúltalo con CSS pero mantenlo en el HTML
  • Agrupa campos relacionados con <fieldset> y <legend>
5

Múltiples H1 o jerarquía incorrecta

Gravedad: Media

El problema: Más de un H1 por página, o saltos en la jerarquía (H1 → H3, saltando H2). Los encabezados son el índice de tu página. Una jerarquía incorrecta confunde tanto a usuarios como a buscadores.

❌ MAL - Múltiples H1 y saltos <h1>Bienvenido a nuestra ONG</h1>
<h1>Nuestros proyectos</h1> <!-- segundo H1 -->
<h4>Proyecto de agua</h4> <!-- salta desde H1 a H4 -->
✅ BIEN - Un H1, orden lógico <h1>Bienvenido a nuestra ONG</h1>
<h2>Nuestros proyectos</h2>
<h3>Proyecto de agua</h3>

✅ Solución

  • Un solo H1 por página (normalmente el título principal)
  • H2 para secciones principales
  • H3 para subsecciones de H2, y así sucesivamente
  • No saltes niveles (H2 → H4)
  • No uses headings solo por el estilo visual, usa CSS
6

Videos sin subtítulos

Gravedad: Alta

El problema: Videos de testimonios, campañas o eventos sin subtítulos. Excluyes a personas sordas o con dificultades auditivas, y también a quienes ven el video sin sonido (muy común en móvil).

✅ Solución

Para videos en YouTube:

  • YouTube genera subtítulos automáticos, pero revísalos (suelen tener errores)
  • Sube un archivo .srt corregido manualmente
  • Activa subtítulos por defecto en la configuración del video

Para videos propios (HTML5):

  • Usa el elemento <track> con archivo WebVTT o SRT
  • Proporciona transcripción completa debajo del video
7

PDFs inaccesibles

Gravedad: Media

El problema: PDFs escaneados o creados sin estructura accesible. Son completamente ilegibles para lectores de pantalla, básicamente imágenes.

PDFs que las ONGs publican:

  • Memorias anuales
  • Informes de proyectos
  • Formularios de inscripción
  • Estatutos y documentación legal

✅ Solución

Para nuevos PDFs:

  • Crea desde Word/InDesign con estructura (headings, lists)
  • Exporta con "PDF etiquetado" activado
  • Añade texto alternativo a imágenes
  • Verifica con Adobe Acrobat Pro o PAC3

Para PDFs existentes:

  • Si son escaneados, usa OCR para extraer texto
  • Considera publicar también en HTML
  • Para documentos críticos, rehazlos accesibles
8

Navegación solo con ratón

Gravedad: Alta

El problema: Menús desplegables, modals o funcionalidades que solo funcionan con hover o click, pero no con teclado. Personas que usan solo teclado (por discapacidad motriz o preferencia) quedan bloqueadas.

Casos típicos:

  • Menús que se abren solo con hover, no con Enter
  • Modals que no se pueden cerrar con Esc
  • Carruseles sin controles por teclado
  • Accordions que requieren click

✅ Solución

Prueba básica:

  • Desconecta el ratón (o no lo uses)
  • Navega tu web solo con Tab, Enter y flechas
  • ¿Puedes acceder a todo? ¿El foco es visible?

Requisitos:

  • Todo elemento interactivo accesible con Tab
  • Enter/Espacio activan botones y enlaces
  • Esc cierra modals y menús desplegables
  • Flechas para navegar en carruseles/tabs
  • Focus visible en todo momento
9

Contenido que desaparece automáticamente

Gravedad: Media

El problema: Alertas, notificaciones o mensajes que desaparecen después de unos segundos sin opción de pausar. Personas con discapacidades cognitivas o de lectura necesitan más tiempo.

Ejemplos comunes:

  • Banner de cookies que se cierra solo
  • Notificación "Formulario enviado" que desaparece en 3 segundos
  • Carruseles que rotan automáticamente sin pausa
  • Sliders de testimonios con auto-play

✅ Solución

  • No cierres automáticamente contenido importante
  • Si algo se mueve/rota automáticamente, añade botón de pausa
  • Para notificaciones temporales: mínimo 5 segundos, mejor con botón cerrar
  • Nunca auto-play en videos (salvo muted)
10

Usar plugins de "accesibilidad instantánea"

Gravedad: Baja (pero problemática)

El problema: Esos widgets que prometen "hacer tu web accesible en 1 click". UserWay, AccessiBe, AudioEye... Suenan geniales, pero no funcionan. Peor aún: pueden crear nuevos problemas.

Por qué no funcionan:

  • No pueden arreglar HTML mal estructurado
  • Añaden ARIA incorrectamente, confundiendo lectores de pantalla
  • No sustituyen a la accesibilidad real del código
  • Usuarios expertos los desactivan porque molestan
  • Dan falsa sensación de cumplimiento legal

✅ Solución

No hay atajos. La accesibilidad real requiere:

  • HTML semántico bien estructurado
  • CSS con contraste adecuado
  • JavaScript que funcione con teclado
  • Contenido (imágenes, videos) con alternativas
  • Pruebas con usuarios reales

Si alguien te ofrece un widget de accesibilidad, di no. Invierte ese presupuesto en arreglar tu web correctamente.

Cómo priorizar las correcciones

Si has identificado varios de estos errores en tu web, no intentes arreglarlos todos a la vez. Prioriza así:

  1. Bloqueos críticos: Navegación por teclado, formularios sin labels (#8, #4)
  2. Contenido inaccesible: Imágenes sin alt, videos sin subtítulos (#1, #6)
  3. Problemas visuales: Contraste, enlaces genéricos (#2, #3)
  4. Estructura: Encabezados, PDFs (#5, #7)
  5. UX mejorable: Auto-play, widgets falsos (#9, #10)

Herramientas para detectarlos

  • A11y Checker Pro: Mi extensión gratuita, detecta la mayoría de estos errores
  • WAVE: Extensión de navegador, muy visual
  • axe DevTools: Integrada en DevTools del navegador
  • Lighthouse: En Chrome DevTools, pestaña Lighthouse

Importante: Las herramientas automáticas detectan ~40% de problemas. Necesitas también revisión manual y pruebas con teclado.

¿Cuántos de estos errores tiene tu web?

Ofrezco auditorías gratuitas de 30 minutos para ONGs. Te muestro los errores principales y cómo priorizarlos.

Solicitar auditoría gratuita

Conclusión

Estos 10 errores aparecen en el 98% de las webs de ONGs que audito. La buena noticia: todos tienen solución y la mayoría son más fáciles de arreglar de lo que piensas.

No busques la perfección inmediata. Prioriza los errores críticos, arregla lo más importante primero, y ve mejorando gradualmente. Cada corrección hace tu web más inclusiva y profesional.

Recuerda: la accesibilidad no es un proyecto con fecha de fin. Es un compromiso continuo de mejora. Pero empieza por estos 10 puntos y ya estarás muy por delante de la mayoría.