Esta guía tiene como objetivo ayudar a identificar y resolver errores comunes de accesibilidad que pueden surgir durante el desarrollo de proyectos digitales. Recoge una serie de problemas frecuentes detectados por el equipo en diferentes etapas del proceso, junto con sus respectivas soluciones y buenas prácticas. Su propósito es servir como un recurso práctico, amplio y accesible para mejorar la experiencia de todos los usuarios, especialmente aquellos con discapacidades. La accesibilidad no solo es una responsabilidad ética, sino también un requisito clave para cumplir con estándares web internacionales como WCAG (Web Content Accessibility Guidelines).
Ajustes iniciales
Al iniciar cada proyecto es bueno realizar estos ajustes ya que están presentes en la mayoría de los proyectos y son ajustes recurrentes:
Desactivar la opción de Enlace para saltar al contenido en ajustes de Accesibilidad:
Siempre hay que quitar esta opción ya que genera de 2 a 3 errores y también errores de contraste
- Algunos elementos tienen un valor de [tabindex] superior a 0
Agregar este código a Personalizar > CSS Adicional en WordPress para evitar error de item oculto de “Leer más” o “Ir al contenido”
.elementor-screen-only, .screen-reader-text, .screen-reader-text span, .ui-helper-hidden-accessible{
display: none !Important;
}
.pojo-sr-only{
display: none !Important;
}Si aparecen más errores similares, complementar el css con la clase .pojo-sr-only.
Al agregar este código podemos arreglar el error de contraste de un item invisible que aparece en Wave
Agregar ALT y descripción al logo del sitio web
Es fundamental que todas las imágenes incluyan un atributo alt descriptivo, ya que este elemento es clave para garantizar la accesibilidad web. Permite que las personas con discapacidad visual comprendan el contenido visual mediante lectores de pantalla. Uno de los casos más críticos es el del logotipo y favicon del sitio web: debe contar con un alt que lo identifique claramente, ya que su ausencia suele marcar errores en herramientas de validación como WAVE y otras auditorías de accesibilidad.
En Ajustes del sitio dentro de elementor > Identidad del sitio podemos ver rápidamente el logotipo y favicon del sitio web, editamos el primero en este caso (logo) y hacemos los ajustes como se ven en la imagen a continuación:
Subtítulos en el Footer con etiquetas equivocadas:
Por lo general en la mayoría de proyectos podemos encontrar que en los títulos de apartados informativos que están en el footer por defecto se configura la etiqueta html de H4 o H6, en estos casos para solucionarlo y evitar errores de jerarquía tenemos que asignarle una etiqueta <span> o una etiqueta acorde a la jerarquía tratada en la página web
El ajuste lo podemos hacer en el maquetador de temas yendo al footer y editando los encabezados de cada título de información de contacto
Atributos Title|Nombre del icono en cada icono con un enlace asignado
Es importante que cada vez que tengamos un icono ya sea de redes sociales o vinculado a un enlace asignarle un atributo alt para que pase el test de accesibilidad, y también para que las personas con discapacidades de algún tipo puedan identificar fácilmente de que se trata ese icono y visitar dichas páginas
Menú de responsive con Off Canvas asignado
Si el proyecto tiene un menú adicional en responsive asignado es necesario agregarle un nombre al icono de Menú Hamburguesa activador y al icono de Cierre para que no marque error de enlace vacío como el que se ve a continuación.
Acá editamos primero el icono activador del menú y le aplicamos la siguiente configuración en el atributo title| Menú de navegación
Lo mismo en el icono de X de cierre que aparece en el off canvas:
title| Cerrar menú de navegación
Quitar apartado de Redes sociales del OffCanvas si no se va a utilizar
A veces también la herramienta de Wave marca errores de enlaces vacíos y estos no aparecen al inspeccionar la página web, entonces es recomendable si este apartado no se va a utilizar eliminarlo del menú de Off Canvas para evitar problemas adicionales.
Jerarquía de contenido para evitar errores
En Elementor, al igual que en HTML tradicional, la jerarquía de encabezados (<h1> a <h6>) es crucial para la estructura y accesibilidad del contenido. Esta jerarquía permite a los lectores de pantalla y a los motores de búsqueda comprender la organización de la página.
- <h1> debe usarse solo una vez por página, generalmente para el título principal o nombre del sitio.
- <h2> a <h6> se utilizan para estructurar subsecciones, siguiendo un orden lógico y secuencial (por ejemplo, no usar un <h4> antes de un <h3>).
- En Elementor, puedes definir la etiqueta HTML de cualquier widget de texto o encabezado desde la pestaña «Contenido», eligiendo la opción adecuada en el campo «Etiqueta HTML». Esto es independiente del tamaño visual del texto, que se controla por separado desde la pestaña «Estilo».
- Mantener una jerarquía coherente mejora la experiencia de navegación, especialmente para usuarios que utilizan tecnologías de asistencia.
Error de tabindex=”1” en elementos que tienen que ser enfocables
Hay veces que al crear elementos que se supone tienen interactividad como botones, cajas de flipbox, acordeones etc, se configura el tabindex en 1, esto hace que ese elemento no sea enfocable y puede que marque un error de accesibilidad relacionado a que tenemos que poner en 0 todos los elementos enfocables de la página web.
Para eso debemos ir al elemento que esté generando el error de tabindex=”1” y modificar el atributo en Avanzado >> Atributos y poner el siguiente texto
tabindex|0
Acá hay un ejemplo de cómo se debe ver:
Y para validar podemos revisar el código fuente o con la tecla TAB ver si el botón se está enfocando.
Errores de contraste
Errores de contraste en los banners/heros principales cómo solucionarlo:
Para solucionar este error común de contraste que se presenta en la mayoría de páginas webs que tenga un banner principal con algún tipo de degradado oscuro encima podemos agregar un contenedor interno con elementor y poner los textos dentro de, luego de eso tenemos que aplicar un contraste mínimo casi que imperceptible para que el check de accesibilidad y contraste lo pueda pasar
Ejemplo:
El color que se utilizó en la prueba fue #00000005, ajustar e ir probando según se requiera en base al fondo principal y esto eliminará los errores en los banners, cajas de contenido con degradados de fondo y casos similares.
Errores de contraste, como encontrar los colores adecuados
Esta herramienta permite comprobar si las combinaciones de colores cumplen con los estándares de accesibilidad WCAG (Web Content Accessibility Guidelines), asegurando que el texto sea legible para todos los usuarios, incluidas personas con discapacidades visuales.
Elementos principales de la interfaz
Selectores de color:
- Foreground color picker: Para seleccionar el color del texto
- Background color picker: Para seleccionar el color de fondo
La herramienta muestra marcas de verificación verdes cuando la combinación de colores cumple con:
- WCAG AA: Nivel mínimo recomendado de accesibilidad
- WCAG AAA: Nivel más estricto de accesibilidad
En nuestro caso, con la validación de WCAG AA es suficiente.
Prueben diferentes combinaciones hasta encontrar una que sea tanto atractiva como accesible
Recuerden que los botones y elementos interactivos también deben cumplir con estos estándares
En ocasiones, es posible presentar errores de contraste en el menú de la web (Ubicado en la cabecera y el pie de página) probablemente el error se muestra en el hover o puntero del menú, debido a que el color no cumple con los estándares, en este caso es factible utilizar la herramienta propuesta para encontrar el color más adecuado.
Problemas de contraste con Widget de reseñas de Google
A veces en algunos proyectos Wave marca como error de contraste el texto que dice el tiempo en el que se escribió la reseña y el texto que dice leer más, para poder modificar esto podemos hacerlo por css con los siguientes códigos
.ti-widget.ti-goog .ti-widget-container .ti-date {
color: #000000 !important;
opacity: inherit !important;
font-size: 12.2px !important;
font-weight: 700 !important;
}.ti-widget.ti-goog .ti-read-more span {
font-weight: 700 !important;
font-size: 13.5px !important;
color: #000000 !important;
opacity: inherit !important;
}
Accesibilidad en contenido dinámico
Errores de alts vacíos en imágenes de items que vienen de un listing
Cuando se hacen listing de productos, blogs u otros casos donde se necesite usar listing grids o loops de JetEngine por lo general siempre vamos a tener este error ya que en muchos proyectos están configuradas las imágenes con un enlace vacío
Tenemos que editar el listing en cuestión y le quitamos el enlace asignado a la imagen y configuramos el enlace apartado de enlace en Ninguno
Luego de haber quitado el enlace de la imagen nos vamos a la configuración del listing global y en listing settings
Galerías con imágenes sin atributo
Utilizaremos este script, es viable usar algún plugin para insertar código ya sea en la cabecera o en el pie de página, no obstante es posible usar un widget de elementor para insertar HTML.
Script
document.addEventListener('DOMContentLoaded', function() {
const galeriaDeImagenes = document.querySelectorAll('.e-gallery-image[aria-label=""], .e-gallery-image[role="img"]');
// Capturamos las imágenes con el atributo vacio
const textoAlternativo = "Fotografía de evento profesional";
// Pueden modificar el texto alternativo
galeriaDeImagenes.forEach(function(imagen, index) {
//Recorremos las imágenes
imagen.setAttribute('aria-label', textoAlternativo + ' ' + (index + 1));
});
});Scripts para quitar atributos de ARIA-LABELS en Acordeones
Para quitar los errores de accesibilidad relacionados a acordeones en elementor donde se les asigna un atributo de ARIA-LABEL podemos agregar el siguiente script en una etiqueta de HTML dentro del acordeón, y si es necesario ajustarlo para que funcione en base a la clase css que tenga de dicho acordeón.
<script>
document.querySelectorAll('.e-n-accordion').forEach(el => el.removeAttribute('aria-label'));
</script>
Errores tabindex en el widget de Wishlist en un slider
Para solucionar este problema se debe de activar la función de Lazy load, esto permite que cargue adecuadamente el tabindex = -1, a tener en cuenta, En primera instancia se debe de haber desactivado el enlace para saltar al contenido en el plugin de accesibilidad.
Widget de reseñas en elementor para testimonios
Si estamos haciendo uso del widget de reseñas de elementor para agregar carruseles de testimonios es probable que se nos generen errores de ARIA por cada ítem que tengamos en el carrusel y que por lo tanto no pasen accesibilidad. Para eso se creó este script que identifica el nombre de cada clase de cada testimonio y lo remueve.
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('.elementor-testimonial__icon').forEach(function(el) {
el.removeAttribute('aria-label');
});
});
</script>
Configuraciones y revisiones adicionales
Es importante al finalizar cada proyecto validar que en cada página este indexada en Google, tenga configurado Site Kit con Analytics, Search Console y Tag Manager.
También tener en cuenta que las herramientas que estamos utilizando ahora para revisar las configuraciones de accesibilidad son las siguientes:
Wave Web Accessibility
Accesibility Checker (esta limitada por temas de pago, pero sirve para validar el porcentaje de accesibilidad )
Y lo que tenemos que tratar es de subir el porcentaje lo más que se pueda en Accesibility Checker a 95% y en Wave no tener errores de contraste
