Accesibilidad

Cómo construimos para usuarios de teclado, lectores de pantalla, baja visión y baja tecnología. Una instantánea honesta y fechada.

Escribimos esta página como el resto del sitio: qué funciona, qué no, y cómo verificarlo tú mismo. Tiene fecha porque la accesibilidad es un objetivo en movimiento. Volvemos a probar después de cada versión principal.

Declaración formal de accesibilidad

Norma objetivo

WCAG 2.2 AA en toda la experiencia. Tratamiento AAA en la apariencia del foco (anillos gruesos de alto contraste, no ocultos) y en el etiquetado de formularios + recuperación de errores. Seguimiento según la Recomendación W3C, no una paráfrasis.

Última auditoría interna

2026-04-19. Revisión manual de nuestro equipo de la página principal, print-size, el hub /standards/ + 9 páginas de autoridad, y las 45 páginas de aterrizaje de esquemas de pago.

Auditoría externa

Encargada, informe pendiente. Se publicará al llegar en /accessibility/audit/ con notas de remediación, imperfecciones incluidas, sin selección a mano.

Frecuencia de revisión

Verificación mensual + revisión manual completa tras cualquier cambio mayor en la interfaz. Las comprobaciones automatizadas (linting de contraste, escaneo de nuevos criterios WCAG 2.2) se ejecutan en cada despliegue.

Contacto + SLA

hello@abundera.ai, reconocemos los informes de accesibilidad en 2 días hábiles, clasificamos en 5, y tratamos los bloqueadores de teclado / lector de pantalla / cognitivos como problemas prioritarios (se envían antes que el trabajo de funciones).

Conformidad WCAG 2.2 AA por criterio de éxito

Los criterios nuevos en la versión 2.2 que seguimos activamente. El estado refleja lo que hemos verificado internamente; la auditoría externa prevalecerá.

Compatibilidad con movimiento y colores forzados

• prefers-reduced-motion: reduce, las transiciones de flotación y fundido del orbe ambiental se suprimen. Las transiciones funcionales se mantienen cortas. Verificado con macOS Reduce Motion y Windows "Mostrar animaciones" desactivado.
• forced-colors: active (Modo de alto contraste de Windows), los anillos de foco usan el color Highlight del sistema; los bordes heredan el CanvasText del sistema. Verificado en Edge en Windows 11 High Contrast.

Limitaciones conocidas

• JAWS aún no probado. La próxima ronda de AT apunta a JAWS en Edge en Windows 11.
• El Diseñador de tarjetas de visita es principalmente para ratón en el diseño de arrastre para posicionar la vista previa. Cada control tiene una alternativa de teclado, pero el bucle de retroalimentación en vivo sigue siendo visual. Las entradas de color, la cuadrícula de presets y los campos hex ahora tienen enlaces ARIA explícitos (2026-04-19).
• El informe de auditoría externa está pendiente. El estado autoatestado en la tabla anterior se reemplazará con los hallazgos del auditor cuando llegue el informe.
• Algunas tecnologías de asistencia de terceros (Dragon NaturallySpeaking, Speech-to-text en Android) no están en nuestra matriz de regresión; aceptamos informes de la comunidad y corregimos por ticket.

Registro de cambios de accesibilidad

• 2026-04-19 (PM), Doble disparo de región en vivo de TalkBack corregido: aria-live="polite" eliminado del contenedor #qr-preview; los anuncios ahora solo provienen de la insignia de escaneabilidad role="status", una vez por generación. Modal BCD: los selectores de color ganaron enlaces <label for> correctos (Fondo, Texto, Acento, Gradiente); el contenedor de cuadrícula de presets ganó role="group" + aria-label. Las tablas de accesibilidad ganaron <caption> + scope="col"/"row", WCAG 2.2 AA + la matriz AT ahora se anuncia correctamente en VoiceOver, NVDA y TalkBack.
• 2026-04-19 (AM), Indicadores de foco mejorados (3 px + respaldo box-shadow). Soporte para forced-colors + prefers-reduced-motion añadido. Auditoría de tamaño de objetivo: .saved-profile-delete, .type-search-clear, .compat-toggle-btn aumentados a ≥ 28 px. Salto de nivel de encabezado corregido (subencabezados vCard/MECARD h4 → h3). Declaración formal WCAG 2.2 AA + matriz AT publicada.
• 2026-04-18, Paso de referencia manual WCAG 2.2 AA documentado. Franja de confianza de cuatro pilares colapsada para una jerarquía más limpia.
• 2026-03-08, Página inicial /accessibility/ publicada.

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. Las entradas, botones y enlaces enfocados muestran un anillo claro. No dependemos únicamente del color.
• Etiquetas en cada campo. Las entradas de formulario tienen elementos <label> asociados o atributos aria-label. El texto de marcador de posición nunca se usa como única etiqueta.
• Regiones en vivo ARIA para la vista previa de QR y los toasts. Los lectores de pantalla escuchan "QR generado" y los mensajes toast cuando se producen, no solo cuando el foco se mueve hacia ellos.
• Alternativas de texto para botones solo con icono. aria-label en cada botón solo con SVG.
• Significado de estado independiente del color. Las insignias de escaneabilidad y los chips de compatibilidad combinan el 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".
• Objetivos móviles de toque grande. Los elementos interactivos tienen al menos 44 × 44 píxeles CSS en punteros gruesos, según WCAG 2.5.8.
• Respeto al movimiento reducido. Las transiciones se desactivan bajo prefers-reduced-motion: reduce.

Dónde todavía fallamos

• JAWS aún no probado. Licencia de JAWS adquirida, espacio de prueba reservado para la próxima ronda de AT. Todos los demás principales (VoiceOver macOS + iOS, NVDA, Narrator, TalkBack) han superado la regresión más reciente.
• El Diseñador de tarjetas de visita es principalmente para ratón por diseño (arrastre para posicionar, vista previa en lienzo). Existen alternativas de teclado para cada control, pero el bucle de retroalimentación de vista previa en vivo sigue siendo visual. Los controles de color ahora usan enlaces <label for> correctos + role="group" en el selector de presets (2026-04-19).
• Los flujos de generador complejos (CSV por lotes, asistente de varios pasos) podrían usar una mejor estructura de enlace de salto. Planificado.
• Resúmenes descriptivos de tablas. Las tablas de accesibilidad y compatibilidad ahora tienen atributos <caption> + scope (2026-04-19). Los resúmenes narrativos más largos a nivel de fila para cada fila aún están planificados.

Matriz de compatibilidad de tecnología de asistencia

Artefacto de ingeniería, no una declaración de relaciones públicas. Cada fila es una combinación real de navegador + AT + plataforma en la que hemos puesto las manos físicamente. El estado refleja el último paso manual; las advertencias registran cualquier cosa que aún bloquee un pase completo.

Cadencia de versiones: la matriz se vuelve a ejecutar contra cada cambio mayor en la interfaz. "Aprobado" = sin bloqueadores; las advertencias son regresiones cosméticas o de alcance estrecho en cola para la próxima versión. "No probado" = aún no hemos ejecutado físicamente la combinación, lo decimos en lugar de omitirlo.

Mapa de teclado

• Tab / Shift+Tab: avanzar / retroceder por los elementos enfocables.
• Enter / Space: 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, control previo, servicios de impresión, recorte de imagen).
• Inicio / Fin dentro de un menú de desbordamiento salta al primer / último elemento.

Auditoría interna, 2026-04-19

Pase manual WCAG 2.2 AA contra la página principal, /print-size/, el nuevo hub /standards/ + 9 páginas de autoridad, y las 45 páginas de aterrizaje de esquemas de pago (que heredan de la plantilla compartida). Lo que verificamos, lo que corregimos y lo que está abierto:

Verificado como aprobado

• El objetivo del enlace de salto existe, el enlace de salto (href="#generator") se resuelve en un elemento visible en cada variante de página.
• Estilos de foco visibles, :focus-visible se declara globalmente con un contorno de 2px, más anulaciones por entrada con un borde de color + sombra. Confirmado mediante auditoría CSS en las líneas 34 y 88 de site/css/style.c17bfd85.css.
• Todas las entradas de formulario tienen etiquetas, cada <input> / <select> / <textarea> en el generador tiene un <label for="..."> explícito o un <label> envolvente. El marcador de posición como etiqueta no se usa en ningún lugar.
• Los botones tienen nombres accesibles, cada <button> tiene contenido de texto o un aria-label. Los botones solo con SVG (hamburguesa, compartir, instalar) llevan aria-label.
• SVGs decorativos marcados como ocultos, aria-hidden="true" en cada icono decorativo para que los lectores de pantalla los omitan en lugar de anunciar su geometría.
• Roles ARIA correctos, role="radiogroup" en el selector de tipo con role="radio" + aria-checked en cada opción; role="tablist" / role="tab" + aria-selected en las pestañas del panel.
• Contraste de texto, el texto principal es #f5f5f5 sobre #08090a (≈ 17:1, WCAG AAA). El texto atenuado #a3a3a3 sobre el mismo fondo es ≈ 8:1 (por encima de AAA 7:1).
• El selector de idioma tiene aria-label="Language" aunque la etiqueta visible sea implícita.

Corregido en este pase

• Salto de nivel de encabezado, tres subencabezados dentro de las secciones de campos adicionales vCard / MECARD eran <h4> bajo un <h2> sin un <h3> intermedio. Las herramientas de esquema del lector de pantalla lo marcaron como "nivel omitido." Cambiado a <h3> para que el esquema lea h1 → h2 → h3 → h3 limpiamente.

Limitaciones conocidas

• El barrido completo de Axe / NVDA / VoiceOver requiere un navegador + AT que no podemos ejecutar desde el pipeline de construcción. El pase manual basado en navegador está programado mensualmente.
• La auditoría independiente de terceros está encargada (ver marcador de posición /accessibility/audit/). El informe se publicará al llegar aunque contenga hallazgos.
• El atajo de teclado "/" para la paleta de comandos es un ligero riesgo de colisión en páginas con campos de búsqueda. Usamos preventDefault() solo cuando el foco está fuera de una entrada; documentado pero aún no auditado con AT.

Informar un problema

Si algo es inaccesible por teclado, mal etiquetado o de otro modo inutilizable con tu configuración, envía un correo a hello@abundera.ai. Incluye tu navegador, sistema operativo, AT y el flujo específico. Tratamos los errores de accesibilidad como problemas prioritarios.

Última revisión: 2026-04-19. Próxima revisión: tras el próximo cambio mayor en la interfaz.