Accesibilidad

GraphoJS añade accesibilidad al canvas sin configuración adicional — este playground hace visible lo que normalmente es invisible a propósito (los anuncios aria-live están ocultos para usuarios que ven, pero aquí los espejamos en un log para poder verlos).

Edita el código y pulsa Run▶ Run↺ Reset

Navegación por teclado

1. Haz clic en el diagrama o pulsa Tab para enfocarlo.
2. Con nada seleccionado, las flechas mueven un cursor de foco (recuadro discontinuo) entre nodos y enlaces.
3. Intro o Espacio seleccionan el elemento con el foco.
4. Con algo seleccionado, las flechas vuelven a mover los nodos seleccionados — Esc limpia la selección y el foco.

prefers-reduced-motion

diagram.animationManager.isEnabled = false;

Si el sistema operativo tiene activado “reducir movimiento”, esto ya es el valor por defecto — cualquier animación salta directamente a su valor final en vez de interpolar frame a frame. El botón del playground lo alterna a mano para comparar.

Alto contraste

diagram.selectionStyle = go.highContrastSelectionStyle;

Igual que con el movimiento: si el SO pide prefers-contrast: more o forced-colors: active, GraphoJS ya usa esta paleta (negro/rojo/amarillo, pensada para que selección y foco sigan siendo distinguibles entre sí) sin que tengas que hacer nada.

Anuncios personalizados

diagram.accessibilityMessages = {
  ...diagram.accessibilityMessages,
  selectionCleared: () => 'Selección vacía',
};

Cualquier tool o integración propia puede anunciar algo con diagram.announce('mensaje') — es el mismo mecanismo que usa GraphoJS internamente para selección, deshacer/rehacer, borrado y colapsar/expandir árboles.