¿Qué significa nivel AA?

• Corresponde al segundo nivel de conformidad de las pautas WCAG (Web Content Accessibility Guidelines)
• Requiere cumplir criterios como:
• Subtítulos en contenido multimedia en vivo
• Navegación por teclado
• Contraste adecuado entre texto y fondo
• Redimensionamiento del texto sin pérdida de contenido
• Etiquetas claras y encabezados estructurados

¿Quién debe certificar su web?

• Administraciones públicas (obligatorio por ley)
• Empresas que ofrecen servicios digitales al público
• Plataformas de comercio electrónico, banca, transporte, educación, etc.

¿Cómo obtener la certificación?

1. Auditoría de accesibilidad

• Evaluación técnica del sitio web según WCAG 2.1 o 2.2
• Identificación de barreras y errores

2. Corrección de problemas

• Implementación de mejoras en diseño, código y contenido

3. Verificación y emisión del certificado

• Entidades como AENOR o inSuit ofrecen certificaciones oficiales
• Se entrega un documento acreditativo y un sello visible para la web

4. Mantenimiento

• Revisiones periódicas (semestrales o anuales) para asegurar el cumplimiento continuo

Beneficios de la certificación AA

• Cumplimiento legal (evita sanciones)
• Mejora del posicionamiento SEO
• Mayor usabilidad y experiencia de usuario
• Inclusión digital y reputación positiva
• Alineación con los Objetivos de Desarrollo Sostenible (ODS)

Recomendaciones

• Involucra a expertos en accesibilidad desde el inicio del proyecto web
• Usa herramientas automáticas como WAVE, Axe o Lighthouse para evaluaciones preliminares
• Complementa con pruebas de usuario reales (personas con discapacidad)

La certificación AA no solo es una exigencia legal, sino una oportunidad para construir una web más inclusiva, eficiente y respetuosa con la diversidad. Invertir en accesibilidad es invertir en calidad, reputación y futuro digital.

1. Implementa diseño responsive

El diseño responsive adapta automáticamente el contenido al tamaño de pantalla del dispositivo.

• Usa media queries en CSS para ajustar estilos.
• Emplea unidades relativas como % o em en lugar de píxeles.
• Verifica que los elementos no se desborden ni se superpongan.

“Un diseño responsive garantiza que el sitio se vea bien en cualquier dispositivo, sin necesidad de versiones separadas.”

2. Optimiza la velocidad de carga

La velocidad es clave para retener usuarios móviles.

• Comprime imágenes con formatos como WebP.
• Minifica archivos CSS, JS y HTML.
• Usa lazy loading para cargar imágenes solo cuando se necesiten.
• Implementa caché del navegador y CDN para distribuir contenido más rápido.

“Una carga rápida reduce la tasa de rebote y mejora el posicionamiento en móviles.”

3. Simplifica la navegación

En pantallas pequeñas, menos es más.

• Usa menús tipo hamburguesa o desplegables.
• Asegúrate de que los botones sean grandes y fáciles de tocar.
• Incluye una barra de búsqueda visible en la parte superior.
• Evita enlaces demasiado juntos o elementos superpuestos.

4. Adapta el contenido al formato móvil

Los usuarios móviles buscan rapidez y claridad.

• Usa párrafos cortos, subtítulos y listas.
• Evita bloques densos de texto.
• Asegúrate de que el tamaño de fuente sea legible (mínimo 16px).
• Prioriza el contenido más relevante en la parte superior.

5. Optimiza formularios y botones

Los formularios deben ser fáciles de completar desde el móvil.

• Usa campos grandes y bien espaciados.
• Habilita autocompletado y autocorrección.
• Evita formularios largos: divide en pasos si es necesario.
• Asegúrate de que los botones CTA sean visibles y accesibles.

6. Mejora la accesibilidad

Una buena experiencia móvil también es inclusiva.

• Usa contrastes adecuados entre texto y fondo.
• Añade etiquetas ALT en imágenes.
• Evita contenido oculto o intersticial que bloquee la navegación.
• Permite que el texto se escale sin romper el diseño.

7. Usa AMP si aplica

Las Accelerated Mobile Pages (AMP) cargan casi instantáneamente en móviles.

• Úsalas en blogs, noticias o páginas de contenido estático.
• Mejora el rendimiento en búsquedas móviles.
• Aumenta el CTR y reduce el rebote.

8. Realiza pruebas en dispositivos reales

No confíes solo en simuladores.

• Prueba tu sitio en diferentes móviles y navegadores.
• Usa herramientas como Google Mobile-Friendly Test, Hotjar o Google Analytics para detectar problemas.
• Analiza métricas como tasa de rebote, duración de sesión y conversiones móviles.

9. Evita ventanas emergentes intrusivas

Los pop-ups agresivos frustran al usuario móvil.

• Usa banners discretos o notificaciones suaves.
• Asegúrate de que se puedan cerrar fácilmente.
• No bloquees el contenido principal.

10. Optimiza para búsquedas por voz

Cada vez más usuarios usan asistentes móviles para buscar.

• Usa lenguaje natural en tu contenido.
• Responde preguntas frecuentes directamente.
• Estructura el contenido con encabezados claros y listas.

La experiencia móvil no es solo una cuestión de diseño: es una estrategia integral que combina velocidad, usabilidad, accesibilidad y contenido adaptado. Si tu sitio no funciona bien en móviles, estás perdiendo oportunidades cada día.

Aplica estas técnicas y verás cómo mejora tu posicionamiento, tu tasa de conversión y la satisfacción de tus usuarios.

¿Qué es una etiqueta ALT?

Es un atributo HTML que describe el contenido de una imagen. Se muestra cuando la imagen no carga y es leído por tecnologías de asistencia como lectores de pantalla.

Ejemplo básico:

html

<img src="bicicleta.jpg" alt="Bicicleta roja aparcada junto a un árbol">

“Las etiquetas ALT ayudan a los motores de búsqueda a entender el contenido visual y mejoran la accesibilidad web.” —Aspiration Marketing

Buenas prácticas para escribir etiquetas ALT

• Sé descriptivo y específico: Describe lo que realmente muestra la imagen.
• Incluye palabras clave relevantes, pero de forma natural.
• Evita el relleno de keywords (keyword stuffing).
• Sé conciso: entre 80 y 125 caracteres suele ser suficiente.
• No uses frases genéricas como “imagen” o “foto”.
• Si la imagen es decorativa, usa alt="" para que los lectores de pantalla la ignoren.

Ejemplo optimizado:

html

<img src="seo-auditoria.jpg" alt="Consultor SEO revisando auditoría técnica en portátil">

Errores comunes que debes evitar

• Usar ALT vacíos en imágenes informativas.
• Repetir la misma etiqueta ALT en varias imágenes.
• Incluir demasiadas palabras clave sin sentido.
• Descripciones vagas como “imagen1” o “foto bonita”.

“El error más común es usar etiquetas ALT genéricas o sobrecargadas de keywords, lo que afecta negativamente al SEO.” —SeoXan

¿Cómo revisar y editar etiquetas ALT?

• En WordPress: al subir una imagen, rellena el campo “Texto alternativo”.
• En HTML: edita directamente el atributo alt="" dentro de la etiqueta <img>.
• Usa herramientas como Screaming Frog, Web Developer (Chrome) o SEO Meta in 1 Click para auditar tus imágenes.

Beneficios de usar etiquetas ALT correctamente

Ejemplos de etiquetas ALT bien y mal optimizadas

“Las imágenes con ALT bien optimizado tienen hasta un 10% más de clics orgánicos.” —Aspiration Marketing