Accesibilidad

El widget de Neuroon está diseñado para cumplir con las pautas WCAG 2.2 nivel AA, garantizando una experiencia accesible para todos los usuarios.

Resumen de cumplimiento

Criterio	Estado	Notas
WCAG 2.2 AA	Completo	Todos los criterios
Navegación por teclado	Completo	Tab, Enter, Escape, flechas
Lectores de pantalla	Completo	NVDA, VoiceOver, JAWS
Contraste de colores	4.5:1+	Texto normal
Reducción de movimiento	Respetado	`prefers-reduced-motion`
Zoom hasta 200%	Funcional	Sin pérdida de funcionalidad

Navegación por teclado

Atajos globales

Tecla	Acción
`Cmd/Ctrl + K`	Abrir/cerrar widget
`Escape`	Cerrar widget
`Tab`	Navegar hacia adelante
`Shift + Tab`	Navegar hacia atrás

Tecla	Contexto	Acción
`Enter`	Input de búsqueda	Ejecutar búsqueda
`↓`	Input de búsqueda	Ir a sugerencias
`↑/↓`	Lista de resultados	Navegar productos
`Enter`	Producto	Ir al producto
`Space`	Checkbox/botón	Activar
`←/→`	Filtros	Navegar opciones
`Home/End`	Listas	Ir al inicio/final

Focus trap

El widget implementa focus trap cuando está abierto:

// El foco queda contenido dentro del modal
// Tab al final → vuelve al inicio
// Shift+Tab al inicio → va al final

Esto evita que el usuario pierda el contexto al navegar con teclado.

Lectores de pantalla

Regiones ARIA

<div role="dialog" aria-label="Buscar productos" aria-modal="true">
  <div role="search" aria-label="Campo de búsqueda">
    <input
      type="search"
      aria-label="Buscar productos"
      aria-describedby="search-hint"
      aria-expanded="false"
      aria-controls="suggestions-list"
    />
  </div>

  <div role="listbox" id="suggestions-list" aria-label="Sugerencias">
    <!-- ... -->
  </div>

  <div role="region" aria-label="Resultados de búsqueda" aria-live="polite">
    <!-- ... -->
  </div>
</div>

Live regions

El widget usa aria-live para anunciar cambios:

<!-- Número de resultados -->
<div aria-live="polite" aria-atomic="true">
  20 productos encontrados
</div>

<!-- Estados de carga -->
<div aria-live="assertive">
  Cargando resultados...
</div>

<!-- Notificaciones -->
<div role="alert">
  Producto añadido a comparación
</div>

Labels y descripciones

Todos los elementos interactivos tienen labels descriptivos:

<button aria-label="Buscar por voz">
  <svg><!-- icono micrófono --></svg>
</button>

<button aria-label="Buscar por imagen">
  <svg><!-- icono cámara --></svg>
</button>

<button
  aria-label="Añadir Nike Air Max a comparación"
  aria-pressed="false"
>
  Comparar
</button>

<button aria-label="Cerrar búsqueda">
  <svg><!-- icono X --></svg>
</button>

Contraste de colores

Ratios mínimos

Elemento	Ratio mínimo	Widget
Texto normal	4.5:1	4.5:1+
Texto grande (>18px)	3:1	3:1+
Iconos, bordes	3:1	3:1+
Estados de foco	3:1	3:1+

Verificación

Los colores por defecto cumplen WCAG AA:

Combinación	Ratio
Texto primario / Fondo	15.3:1 (dark) / 16.1:1 (light)
Texto secundario / Fondo	7.2:1 (dark) / 4.6:1 (light)
Primary / Fondo	4.5:1+

Personalización segura

Al personalizar colores, verifica el contraste:

// Usa herramientas como WebAIM Contrast Checker
// https://webaim.org/resources/contrastchecker/

NeuroonWidget.init({
  styles: {
    // Asegúrate de mantener contraste 4.5:1+
    textPrimary: '#1f2937', // vs fondo blanco = 13.5:1 ✓
    textSecondary: '#6b7280', // vs fondo blanco = 5.0:1 ✓
  },
});

Preferencias del usuario

prefers-reduced-motion

El widget respeta la preferencia de movimiento reducido:

@media (prefers-reduced-motion: reduce) {
  .neuroon-widget * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

// El widget detecta automáticamente esta preferencia
// y desactiva animaciones

prefers-color-scheme

Con theme: 'auto', el widget sigue la preferencia del sistema:

NeuroonWidget.init({
  theme: 'auto', // Sigue prefers-color-scheme
});

prefers-contrast

El widget aumenta el contraste cuando está activado:

@media (prefers-contrast: more) {
  .neuroon-widget {
    --nrn-border-default: 0 0 0;
    --nrn-text-secondary: var(--nrn-text-primary);
  }
}

Focus visible

Indicador de foco

Todos los elementos interactivos tienen un indicador de foco visible:

.neuroon-widget :focus-visible {
  outline: 2px solid rgb(var(--nrn-primary));
  outline-offset: 2px;
}

Skip links

El widget incluye un skip link para saltar al contenido principal:

<a href="#neuroon-results" class="skip-link">
  Saltar a resultados
</a>

Textos e idioma

Atributo lang

El widget incluye el atributo de idioma:

<div class="neuroon-widget" lang="es">
  <!-- Contenido en español -->
</div>

Textos accesibles

Todos los textos son configurables para adaptarlos a tu audiencia:

NeuroonWidget.init({
  locale: 'es',
  translations: {
    search: {
      placeholder: 'Escribe para buscar productos',
    },
    results: {
      showing: '{count} de {total} productos',
    },
  },
});

Formularios

Labels asociados

<label for="price-min">Precio mínimo</label>
<input id="price-min" type="number" />

<label for="price-max">Precio máximo</label>
<input id="price-max" type="number" />

Mensajes de error

<input
  aria-invalid="true"
  aria-describedby="error-message"
/>
<div id="error-message" role="alert">
  El precio mínimo debe ser menor al máximo
</div>

Grupos de campos

<fieldset>
  <legend>Filtrar por marca</legend>
  <label><input type="checkbox" /> Nike</label>
  <label><input type="checkbox" /> Adidas</label>
</fieldset>

Imágenes

Texto alternativo

Todas las imágenes de producto incluyen alt text:

<img
  src="product.jpg"
  alt="Nike Air Max 90 - Zapatillas running blancas"
/>

Para imágenes decorativas:

<img src="decoration.svg" alt="" role="presentation" />

Tablas

Tablas de comparación

<table role="grid" aria-label="Comparación de productos">
  <thead>
    <tr>
      <th scope="col">Característica</th>
      <th scope="col">Nike Air Max</th>
      <th scope="col">Adidas Ultraboost</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Precio</th>
      <td>120€</td>
      <td>180€</td>
    </tr>
  </tbody>
</table>

Testing de accesibilidad

Herramientas recomendadas

Herramienta	Uso
axe DevTools	Extensión de navegador
WAVE	Evaluador web
Lighthouse	Auditoría Chrome
VoiceOver	Lector de pantalla macOS
NVDA	Lector de pantalla Windows

Checklist de verificación

Navegable solo con teclado
Focus visible en todos los elementos
Sin contenido que parpadee
Contraste de texto ≥ 4.5:1
Todas las imágenes tienen alt
Formularios con labels
Errores anunciados a lectores de pantalla
Funcional con zoom 200%
Respeta prefers-reduced-motion

Reportar problemas

Si encuentras algún problema de accesibilidad:

Describe el problema y el contexto
Indica el navegador y tecnología asistiva usada
Contacta con soporte@neuroon.ai

Nos comprometemos a resolver problemas de accesibilidad con alta prioridad.

Recursos

Próximos pasos

Theming - Personalizar manteniendo accesibilidad
Configuración - Opciones del widget

Resumen de cumplimiento​

Navegación por teclado​

Atajos globales​

Dentro del widget​

Focus trap​

Lectores de pantalla​

Regiones ARIA​

Live regions​

Labels y descripciones​

Contraste de colores​

Ratios mínimos​

Verificación​

Personalización segura​

Preferencias del usuario​

prefers-reduced-motion​

prefers-color-scheme​

prefers-contrast​

Focus visible​

Indicador de foco​

Skip links​

Textos e idioma​

Atributo lang​

Textos accesibles​

Formularios​

Labels asociados​

Mensajes de error​

Grupos de campos​

Imágenes​

Texto alternativo​

Tablas​

Tablas de comparación​

Testing de accesibilidad​

Herramientas recomendadas​

Checklist de verificación​

Reportar problemas​

Recursos​

Próximos pasos​