Accesibilidad
Cómo desarrollamos para usuarios de teclado, lectores de pantalla, baja visión y tecnología limitada. Una instantánea honesta y fechada.
A qué nos comprometemos
- Navegación completa por teclado. Cada control del generador, cada modal y cada flujo de exportación es accesible sin ratón.
- Estados de foco visibles. Los campos, botones y enlaces enfocados muestran un contorno claro. No dependemos solo del color.
- Etiquetas en cada campo. Los campos de formulario tienen elementos
<label>asociados o atributosaria-label. El texto de placeholder nunca se usa como única etiqueta. - Regiones ARIA en vivo para la vista previa QR y los mensajes de notificación. Los lectores de pantalla anuncian "QR generado" y los mensajes toast cuando se producen, no solo cuando el foco llega a ellos.
- Alternativas de texto para botones solo con icono.
aria-labelen cada botón que solo muestra SVG. - Significado de estado independiente del color. Las insignias de escaneabilidad y los chips de compatibilidad combinan color con un glifo y una etiqueta de texto.
- Nombres de formato de exportación explícitos. Los botones de descarga dicen "Descargar PNG", "Descargar SVG", etc., no solo "Descargar".
- Zonas táctiles amplias en móvil. Los elementos interactivos tienen al menos 44 × 44 píxeles CSS en punteros de baja precisión, según WCAG 2.5.8.
- Respeto por la preferencia de movimiento reducido. Las transiciones se desactivan con
prefers-reduced-motion: reduce.
Dónde aún nos quedamos cortos
- La cobertura de pruebas con lectores de pantalla es desigual. El Generador se ha probado con VoiceOver (macOS/iOS) y NVDA. JAWS y TalkBack necesitan más tiempo.
- El Diseñador de Tarjetas de Visita es intensivo en uso del ratón por diseño (arrastrar para posicionar, vista previa en lienzo). Existen alternativas de teclado para cada control, pero el ciclo de retroalimentación de la vista previa en vivo sigue siendo visual primero.
- Los flujos complejos del generador (CSV por lotes, asistente de varios pasos) podrían beneficiarse de una mejor estructura de enlaces de salto. Está planificado.
- Nuestra matriz de compatibilidad se presenta actualmente como tablas HTML. Los encabezados de columna funcionan para lectores de pantalla, pero nos gustaría añadir resúmenes descriptivos más completos para cada fila.
Navegadores y tecnologías de apoyo probados
Última revisión completa: abril de 2026. Entre revisiones hacemos comprobaciones puntuales tras cambios importantes en la interfaz.
| Navegador | TA | Plataforma | Estado |
|---|---|---|---|
| Safari | VoiceOver | macOS 15, iOS 18 | Probado, funciona |
| Firefox | NVDA | Windows 11 | Probado, funciona |
| Chrome | NVDA | Windows 11 | Probado, funciona |
| Chrome | ChromeVox | ChromeOS | Comprobación puntual |
| Chrome | TalkBack | Android 14, 15 | Comprobación puntual |
| Edge | Narrator | Windows 11 | Comprobación puntual |
| Safari | JAWS | Windows 11 | Aún no probado |
Mapa de teclado
- Tab / Shift+Tab: avanzar / retroceder entre elementos enfocables.
- Enter / Espacio: activar botones y controles de alternancia.
- Teclas de flecha: moverse entre opciones dentro de un grupo de radio (selector de tipo, selector de plantilla, barra de pestañas).
- Escape: cerrar modales (Diseñador de Tarjetas de Visita, verificación previa, servicios de impresión, recorte de imagen).
- Inicio / Fin dentro de un menú desbordado, salta al primer / último elemento.
Reportar un problema
Si algo no es accesible por teclado, tiene una etiqueta incorrecta o no funciona con tu configuración, escribe a hello@abundera.ai. Incluye tu navegador, sistema operativo, tecnología de apoyo y el flujo específico. Tratamos los errores de accesibilidad como problemas prioritarios.