por The Black | May 23, 2026 | HTML |
Pequeños cambios que ayudan a pasar tests de accesibilidad y mejoran la experiencia de usuario
Cuando haces una auditoría con herramientas como Lighthouse, WAVE o axe DevTools, hay dos errores que aparecen constantemente en muchas webs: botones vacíos y enlaces con iconos sin texto accesible.
Es algo muy habitual, sobre todo cuando trabajamos con menús móviles, iconos sociales o botones hechos únicamente con Bootstrap Icons, Font Awesome o SVG.
La buena noticia es que, en muchos casos, la solución es muy sencilla: añadir correctamente aria-label.
Comparto dos ejemplos reales que he aplicado recientemente y que ayudan a eliminar este tipo de avisos rápidamente.
Error “Empty Button” en botones con iconos
Este error suele aparecer mucho en botones de menú hamburguesa o elementos que visualmente muestran un icono, pero no tienen texto legible para lectores de pantalla.
Por ejemplo, este botón funciona perfectamente a nivel visual:
<button class="btn p-0 border-0 d-xl-none"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasMenu">
<i class="bi bi-list fs-1"></i>
</button>
El problema es que un lector de pantalla no sabe qué hace ese botón. Para la herramienta de accesibilidad, está “vacío”.
La solución es añadir un aria-label describiendo la acción:
<button class="btn p-0 border-0 d-xl-none"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasMenu"
aria-controls="offcanvasMenu"
aria-label="Abrir menú">
<i class="bi bi-list fs-1"></i>
</button>
Con algo tan simple como esto:
- Desaparece el error “Empty Button”.
- El botón pasa a ser accesible.
- Los lectores de pantalla entienden su función.
- No afecta al diseño visual.
Enlaces con iconos sociales sin texto accesible
Otro caso muy típico aparece con los botones de compartir en redes sociales.
Muchas veces dejamos únicamente el icono:
<a href="https://x.com/intent/tweet?text=<?php echo urlencode($titlecompartir); ?>&url=<?php echo urlencode($urlcompartir); ?>" target="_blank">
<i class="bi bi-twitter-x"></i>
</a>
Visualmente se entiende perfectamente que sirve para compartir en X, pero a nivel de accesibilidad el enlace no tiene descripción.
La solución vuelve a ser añadir un aria-label:
<a href="https://x.com/intent/tweet?text=<?php echo urlencode($titlecompartir); ?>&url=<?php echo urlencode($urlcompartir); ?>"
target="_blank"
rel="noopener noreferrer"
class="fs-3 mx-3 text-primary"
aria-label="Compartir en X"
title="Compartir en X">
<i class="bi bi-twitter-x"></i>
</a>
En este caso, el lector de pantalla ya puede interpretar correctamente la acción del enlace.
¿title y aria-label hacen lo mismo?
Es una duda bastante habitual.
El atributo title puede mostrar un tooltip visual al pasar el ratón, pero no siempre es suficiente para accesibilidad.
En cambio, aria-label está pensado específicamente para tecnologías asistivas y lectores de pantalla.
Por eso, cuando usamos iconos sin texto visible, es recomendable utilizar ambos:
title="Compartir en X"
aria-label="Compartir en X"
Cuándo merece la pena usar aria-label
Yo suelo utilizarlo sobre todo en estos casos:
- Botones que solo tienen iconos.
- Menús hamburguesa.
- Botones flotantes.
- Iconos de compartir en redes sociales.
- SVG sin texto visible.
- Elementos interactivos donde la función no queda clara para lectores de pantalla.
Importante: no hay que abusar de aria-label
Si un botón ya tiene texto visible, normalmente no hace falta añadirlo.
Por ejemplo:
<button>Enviar formulario</button>
En ese caso el contenido ya es accesible y entendible.
Conclusión
Muchas veces pensamos que mejorar la accesibilidad implica hacer grandes cambios, pero no siempre es así.
Detalles tan pequeños como añadir correctamente un aria-label pueden ayudarte a:
- Pasar auditorías de accesibilidad.
- Mejorar la experiencia de usuarios con lectores de pantalla.
- Optimizar la calidad técnica de la web.
- Evitar errores frecuentes en Lighthouse o WAVE.
Son cambios rápidos de aplicar y que aportan mucho más valor del que parece.
Ponte Manos a la Web y aplica ya estos cambios!
por The Black | Jun 20, 2025 | SEO |
A partir del 28 de junio de 2025, entra en vigor una normativa clave para la accesibilidad digital en toda la Unión Europea: el European Accessibility Act (EAA), implementado en España a través de la Ley 11/2023 y el Real Decreto 193/2023. Esto supondrá un cambio importante para empresas, comercios electrónicos, entidades privadas y desarrolladores.
Aquí intentaremos explicar cómo adaptarte paso a paso
1. ¿A quién afecta esta ley?
La Normativa de la Unión Europea: Directiva 2016/2102 es una Directiva del Parlamento Europeo y del Consejo, adoptada el 26 de octubre de 2016, que establece requisitos de accesibilidad para los sitios web y aplicaciones móviles de los organismos del sector público.
La nueva Ley ya no se limita al sector público. Ahora deben cumplir con los requisitos de accesibilidad:
- Empresas que prestan servicios digitales (tiendas online, apps móviles, plataformas audiovisuales, bancos…).
- Fabricantes y distribuidores de productos con interfaz digital (cajeros automáticos, terminales de autoservicio, e-books…).
- Proveedores de servicios de transporte, telecomunicaciones, servicios bancarios o libros electrónicos.
¿Y si mi web es solo informativa o corporativa?
La nueva ley no obliga automáticamente a todas las webs corporativas a cumplir los requisitos de accesibilidad, a menos que:
- Presten servicios digitales al público (como reservas, contratación online, venta de productos o atención al cliente).
- Estén financiadas en más del 50% con fondos públicos.
- Sean consideradas servicios esenciales (banca, telecomunicaciones, transporte, sanidad, etc.).
- Sean proveedores de servicios a la Administración pública.
Por ejemplo: Una web corporativa que solo muestra información básica de la empresa no está obligada a cumplir, pero sí es recomendable por razones de SEO, imagen y responsabilidad social.
Recomendación: Aunque tu web no esté incluida formalmente, aplicar los principios básicos de accesibilidad mejora la experiencia del usuario y puede ahorrarte trabajo futuro si expandes tus servicios online.
2. ¿Qué se entiende por «accesibilidad»?
La ley exige que los productos y servicios sean utilizables por personas con discapacidad o limitaciones funcionales, siguiendo los siguientes principios:
- Perceptible: la información debe ser visible o audible.
- Operable: navegable con teclado, voz u otras tecnologías.
- Comprensible: clara y sencilla.
- Robusta: compatible con tecnologías de asistencia (lectores de pantalla, etc.).
3. Normativa técnica de referencia
- WCAG 2.1 nivel AA: Estándar internacional de accesibilidad web.
- EN 301 549: Norma europea obligatoria para evaluar productos y servicios digitales.
4. Plazos clave que debes conocer
| 28 junio 2025 |
Todos los nuevos servicios y productos digitales deben cumplir. |
| Hasta junio 2030 |
Productos/servicios ya existentes pueden adaptarse. |
5. Pasos para adaptar tu sitio web o app
✅ Paso 1: Auditoría de accesibilidad
Haz una revisión técnica de tu sitio web o app siguiendo las WCAG 2.1 AA. Herramientas útiles:
✅ Paso 2: Identifica barreras de acceso
Analiza si existen problemas como:
- Texto con bajo contraste.
- Elementos no navegables con teclado.
- Imágenes sin texto alternativo.
- Formularios sin etiquetas.
✅ Paso 3: Plan de mejoras técnicas
Prioriza las correcciones más graves e involucra a tu equipo de desarrollo. Céntrate en:
- Navegación por teclado
- Etiquetado de formularios y botones
- Contenidos multimedia con subtítulos o transcripciones
- Responsive accesible (no solo «adaptativo»)
✅ Paso 4: Publica tu declaración de accesibilidad
Incluye una página accesible en tu sitio con:
- Nivel de cumplimiento (total, parcial, no conforme)
- Fecha de última revisión
- Medio de contacto para sugerencias o quejas
✅ Paso 5: Mantenimiento continuo
Realiza revisiones periódicas, especialmente tras rediseños, nuevas secciones o cambios de plantilla.
6. ¿Qué ocurre si no cumples?
Las empresas que no adapten sus sitios web, apps o productos digitales se enfrentan a:
- Multas económicas de hasta 1 millón de euros (en casos graves).
- Denuncias ante organismos de control.
- Pérdida de reputación y oportunidades comerciales, especialmente en licitaciones públicas.
7. Recursos útiles
Conclusión
La accesibilidad no es solo una obligación legal: es una ventaja competitiva. Un sitio accesible llega a más personas, mejora el SEO, ofrece mejor experiencia de usuario y refuerza tu imagen de marca.
por The Black | Sep 5, 2023 | Utilidades Web |
Enlaces de interés para accesibilidad web
Este enlace te lleva a una guía completa y detallada sobre las Pautas de Accesibilidad para el Contenido Web (WCAG) en su versión 2.1, explicadas por la Universidad de Alicante. Es un recurso excelente para estudiantes y profesionales que busquen una comprensión profunda de las normas de accesibilidad.
Este es el enlace oficial del W3C, la organización que establece los estándares web. Es ideal si eres nuevo en el tema, ya que proporciona una visión general clara y concisa de los principios y directrices de las WCAG.
Con esta referencia rápida, el W3C te ayuda a encontrar las técnicas y los criterios de éxito específicos para cumplir con las WCAG. Es una herramienta muy práctica y útil para desarrolladores y diseñadores que necesitan aplicar las directrices en su trabajo diario.
Más información actualizada a junio 2025 en Guía práctica para adaptar tu web a la nueva ley de accesibilidad digital (2025)
Imagen: Foto de Sigmund en Unsplash
