Accessible Navigation

Accessibility & Inclusive Design

Spatial interactive visualizations can easily become inaccessible "black boxes" if designed solely for visual mouse users. This article details how the Parslow Concept Atlas and Visual Summary achieve compliance with WCAG 2.1 AA guidelines through keyboard hotkeys, high-contrast focus rings, ARIA screen-reader semantics, and structured tree view fallbacks.

WCAG 2.1 AA Compliance Strategy

Creating an interactive cartographic map presents unique accessibility challenges. Screen readers cannot natively interpret 2D Canvas or SVG coordinate locations without explicit semantic structure. To ensure no user is excluded, the navigation system relies on a dual-mode rendering architecture:

  • Interactive Cartographic Map View: Designed for visual spatial exploration, featuring high-contrast node indicators, vector terrain paths, and hover inspection banners.
  • Structured Accessible Tree View: A WCAG-compliant, screen-reader accessible fallback that organizes the entire site graph into hierarchical <details> and <summary> elements with explicit ARIA roles.

Global Keyboard Shortcuts

Power users and keyboard-only navigators can trigger site tools from anywhere on the platform using global keyboard shortcuts:

  • M — Toggle the Site Concept Atlas Modal (Topological Map).
  • V — Toggle the Visual Summary & Concept Graph Modal.
  • Esc — Instantly dismiss any active modal and return focus to the triggering element.
  • Tab / Shift+Tab — Cycle through focusable map nodes, road connections, and modal close buttons within a trapped focus loop.

Structured Tree View Fallback

Within the Concept Atlas modal, users can seamlessly switch between Map View and Accessible Index mode. The Accessible Index presents the full graph of topics as an interactive tree structure:

├── Artificial Intelligence & Ethics (3 topics)
│   ├── Chatbots in Healthcare [You Are Here]
│   ├── Legal Framework in Computing [Shared Concept]
│   └── Project Marking as BDD [Here Be Dragons]
├── Spatial Cartography & Navigation (5 topics)
│   ├── Accessible Navigation
│   └── Triangulating in Complex Concept Spaces

Each node in the tree view announces its current state to assistive technologies, including whether it represents the user's current location (aria-current="page"), shares concepts with the active article, or contains safety hazard warnings.

ARIA Semantics and Focus Management

All modal dialogs are constructed using standard WAI-ARIA modal patterns:

  • role="dialog" and aria-modal="true" ensure screen readers confine virtual cursor navigation to the active panel.
  • aria-labelledby="atlas-modal-title" provides an immediate header announcement when opened.
  • Focus is automatically transferred to the close button upon opening, and restored to the origin element upon closing.
  • SVG nodes feature explicit tabindex="0", role="button", and aria-label attributes describing article titles and connecting concepts.