Accesibilidad Divi: mejora tu score en PageSpeed Insight
Corrige el error user-scalable=»no» en Divi y mejora tu puntuación PageSpeed
Error: user-scalable=»no» en meta viewport en Divi
El tema Divi, desarrollado por Elegant Themes, probablemente el mejor tema para WordPress incluye por defecto una etiqueta <meta name="viewport"> en el <head> de todas las páginas. Esta etiqueta controla cómo se adapta el diseño de tu página a dispositivos móviles.
El problema es que Divi añade el atributo user-scalable="no", para que el diseño sea fiel, sin embargo esta característica que impide que los usuarios puedan hacer zoom táctil en los teléfonos móviles es un problema para personas con dificultades visuales.
Google PageSpeed Insights lo detecta como un error porque viola la norma WCAG 1.4.4, que exige que los usuarios puedan escalar el contenido hasta un 200 % sin pérdida de funcionalidad.
Aunque muchos navegadores modernos ignoran user-scalable="no", el atributo sigue siendo técnicamente restrictivo y por eso se penaliza en la auditoría de accesibilidad y por supuesto si afecta al SEO.
Divi prioriza la coherencia visual del diseño. Su objetivo es que la web se vea exactamente como fue diseñada, sin que el usuario altere el zoom.
Esta filosofía es común en otros constructores visuales, pero entra en conflicto con las mejores prácticas de accesibilidad web.
Activar zoom táctil en móviles con Divi
Para corregir el error user-scalable="no" en Divi y permitir el zoom táctil en móviles, es necesario modificar el archivo functions.php del tema hijo. Esto elimina la etiqueta viewport que genera Divi por defecto y la reemplaza por una versión accesible.
Ruta completa para acceder al archivo functions.php
Desde el panel de administración de WordPress, sigue esta ruta:
- Escritorio > Apariencia > Editor de archivos de tema
- Verás dos columnas en la de la derecha «Archivos del tema» están los archivos: style.css y functions.php
- Haz clic en functions.php en la columna lateral
Activar zoom táctil en móviles con Divi
Para corregir el error user-scalable="no" en Divi y permitir el zoom táctil en móviles, es necesario modificar el archivo functions.php del tema hijo. Esto elimina la etiqueta viewport que genera Divi por defecto y la reemplaza por una versión accesible.
Ruta completa para acceder al archivo functions.php
Desde el panel de administración de WordPress, sigue esta ruta:
- Escritorio > Apariencia > Editor de archivos de tema
- Verás dos columnas en la de la derecha «Archivos del tema» están los archivos: style.css y functions.php
- Haz clic en functions.php en la columna lateral
Fragmento de código para activar el zoom táctil
Copia y pega este código al final del archivo functions.php de tu tema hijo Divi. Puedes usar el botón para copiarlo fácilmente:
// Activar capacidad de hacer zoom en dispositivos móviles function disable_et_add_viewport_meta() { remove_action( 'wp_head', 'et_add_viewport_meta' ); } add_action( 'after_setup_theme', 'disable_et_add_viewport_meta' ); function add_pinch_zoom_viewport_meta() { echo '<meta name="viewport" content="width=device-width, initial-scale=1">'; } add_action( 'wp_head', 'add_pinch_zoom_viewport_meta' ); // Fin de activar capacidad de hacer zoom
Mensaje de alerta en castellano
Guarda el archivo functions.php, pulsando el botón azul «Actualizar Archivo» WordPress mostrará el mensaje: “Archivo Editado correctamente.”
Si hay un error de sintaxis, verás: “No se ha podido guardar el archivo.”
En ese caso, vuelve a copiar todo el código, pégalo y pulsa de nuevo el botón azul «Actualizar Archivo».
Comprobar que el error ha sido corregido
Una vez que has editado el archivo functions.php y guardado los cambios, es importante verificar que el nuevo meta viewport se ha insertado correctamente en el código fuente de tu página.
Cómo comprobar el meta viewport
Abre tu página en el navegador (por ejemplo, https://servioil.es/vaciar-deposito-gasoil) y haz clic derecho sobre cualquier parte de la pantalla. Selecciona “Ver código fuente” o “Inspeccionar”.
Busca la línea que contiene la etiqueta <meta name="viewport">. Debería verse así:
<meta name="viewport" content="width=device-width, initial-scale=1">Si ya no aparece user-scalable="no" ni maximum-scale, el error ha sido corregido correctamente.
Verificar en Google PageSpeed Insights
Accede a Google PageSpeed Insights 🡽 e introduce la URL de tu página.
Haz clic en “Analizar” y espera el resultado.
En la sección “Accesibilidad”, el error “El atributo user-scalable=’no’ se usa en el elemento meta viewport” ya no debería aparecer.
Si todo está correcto, verás una mejora en la puntuación de accesibilidad.
En el caso de https://servioil.es/vaciar-deposito-gasoil, la puntuación de Accesibilidad subió de 83 a 92 tras aplicar esta corrección.
Configurar Divi para accesibilidad básica
Una vez corregido el error del meta viewport, el siguiente paso es revisar otros elementos clave que afectan la accesibilidad en cualquier página creada con Divi.
Aunque el constructor visual facilita el diseño, es necesario aplicar buenas prácticas manuales para cumplir con los estándares WCAG.
Activar zoom táctil en móviles
Ya lo hemos corregido en la sección anterior. Este ajuste permite que los usuarios amplíen el contenido en dispositivos móviles, mejorando la experiencia para personas con baja visión.
Evitar errores en el meta viewport
El atributo user-scalable="no" debe eliminarse, como ya hemos hecho al añadir el código al archivo functions.php. Esto evita penalizaciones en PageSpeed Insights y mejora la puntuación de accesibilidad.
Usa etiquetas alt en imágenes
Divi permite añadir texto alternativo (atributo alt) a cada imagen desde el módulo correspondiente.
Este texto debe describir brevemente el contenido visual para que los lectores de pantalla puedan interpretarlo.
- Haz clic en el módulo de imagen
- Ve a Contenido > Imagen > Texto alternativo
- Escribe una descripción clara y concisa
Orden correcto de los encabezados
Evita usar múltiples <h1> en una misma página. Divi permite elegir el tipo de encabezado en cada módulo de texto. Asegúrate de seguir una jerarquía lógica:
- <h1>: título principal de la página
- <h2>: secciones principales
- <h3>: subsecciones dentro de cada bloque
Una jerarquía mal estructurada puede confundir a los lectores de pantalla y afectar negativamente el SEO.
Funciones principales del plugin WP Acessibility
- Elimina
user-scalable="no"del meta viewport - Añade enlaces de salto al contenido
- Corrige etiquetas
alten imágenes - Aplica roles ARIA y etiquetas a formularios
- Activa foco visible en elementos interactivos
- Elimina atributos
titleytargetinnecesarios
Instalación del Plugin en WordPress
- Accede a Plugins > Añadir nuevo en tu panel de WordPress
- Busca “WP Accessibility”
- Haz clic en Instalar y luego en Activar
Enlace oficial de WP Accessibility
Descárgalo desde el repositorio de WordPress: WP Accessibility – WordPress.org 🡽
Diseño accesible en Divi paso a paso
El diseño visual también influye directamente en la accesibilidad. Aunque Divi ofrece gran libertad creativa, es importante aplicar criterios técnicos que garanticen una experiencia inclusiva para todos los usuarios, especialmente aquellos con dificultades visuales o cognitivas.
Contraste y tipografía legible
Evita combinaciones de colores con bajo contraste, como gris claro sobre blanco. Usa herramientas como WebAIM Contrast Checker para validar que el texto cumple con el ratio mínimo de 4.5:1.
- Usa fuentes sans-serif como Open Sans o Roboto
- Evita tamaños inferiores a 16px en cuerpo de texto
- Aplica interlineado mínimo de 1.5 para mejorar la lectura
Botones accesibles y foco visible
Los botones deben tener suficiente tamaño, contraste y texto descriptivo. Evita usar solo iconos sin etiquetas.
Además, asegúrate de que el foco del teclado sea visible al navegar:
- Usa el módulo Botón de Divi con texto claro
- Evita usar
<div>o<span>como botones sin rol ARIA - Activa el foco visible con plugins como Divi Accessibility
Evitar módulos no compatibles
Algunos módulos de Divi, como sliders automáticos o efectos parallax, pueden dificultar la navegación para usuarios con discapacidad visual o cognitiva.
Recomendaciones:
- Evita animaciones que no puedan pausarse
- No uses texto incrustado en imágenes sin etiqueta «alt»
- Desactiva el autoplay en carruseles de diapositivas y vídeos
Un diseño accesible no significa sacrificar estética, sino garantizar que todos los usuarios puedan interactuar con tu contenido sin barreras.
Validar Accesibilidad antes de publicar
Antes de lanzar cualquier página creada con Divi, es fundamental verificar que cumple con los estándares de accesibilidad. Esto garantiza que todos los usuarios puedan navegar, leer e interactuar con tu contenido sin barreras.
Checklist técnica final del sitio
Revisa los siguientes puntos antes de publicar:
- Solo un
<h1>por página - Contraste mínimo 4.5:1 entre texto y fondo
- Texto alternativo en todas las imágenes
- Botones con texto descriptivo y foco visible
- Zoom táctil activado en móviles (user-scalable=»no»)
- Evitar autoplay en sliders y vídeos
Pruebas con lector de pantalla
Usa lectores de pantalla como NVDA (Windows), VoiceOver (macOS/iOS) o JAWS para simular la navegación de un usuario con discapacidad visual. Verifica que:
- Los encabezados se leen en orden lógico
- Los botones y enlaces tienen etiquetas claras
- Los formularios tienen campos etiquetados
Simulación en móviles y tablets
Accede a tu página desde un dispositivo móvil y realiza estas pruebas:
- Haz zoom con los dedos para comprobar que funciona
- Navega con teclado externo o lector de pantalla
- Activa el modo alto contraste si el sistema lo permite
También puedes usar herramientas como WAVE Accessibility Tool o Accessibility Insights para obtener un informe detallado.
Conclusión: accesibilidad y resultados
Mejorar la accesibilidad en Divi no solo cumple con normativas, también mejora la experiencia de usuario, el posicionamiento SEO y la reputación de tu sitio.
Con ajustes simples como activar el zoom, estructurar encabezados y usar plugins adecuados, puedes lograr páginas más inclusivas y efectivas.
Preguntas frecuentes sobre Accesibilidad
¿Los temas como Elementor o Divi cumplen con WCAG por defecto?
No completamente. Aunque Divi y Elementor son visualmente responsive, requieren ajustes manuales y plugins para cumplir con las pautas WCAG 2.1.
¿Cómo activo el zoom en móviles?
Edita el archivo functions.php del tema hijo y reemplaza la etiqueta meta viewport como se indica en este tutorial. Así se elimina user-scalable="no" y se permite el zoom táctil.
¿Qué errores detecta Lighthouse?
Lighthouse, el complemento de Chrome, detecta problemas como encabezados mal estructurados, falta de texto alternativo, bajo contraste, botones sin foco visible y meta viewport restrictivo.
¿Qué plugin mejora la accesibilidad en Divi?
WP Accessibility es el más recomendado. Añade navegación por teclado, foco visible, soporte ARIA y corrección de encabezados.
¿La accesibilidad mejora el SEO?
Sí. Google valora la accesibilidad como parte de la experiencia de usuario. Mejora el posicionamiento, reduce la tasa de rebote y aumenta la conversión.