Last updated: 2026-09-16

U
Undergraduate level

Accessible Navigation

Accessibility & Inclusive Design

Spatial interactive visualisations 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[1] 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. This is not a niche edge case: the whole point of a spatial index of the site is to let a reader jump straight to a conceptually nearby article without walking a folder hierarchy, and a purely visual map achieves that for sighted mouse users only. Without an equivalent non-visual route, the map would quietly become a shortcut available to some readers and a dead end for others. To ensure no user is excluded, the navigation system relies on a dual-mode rendering architecture built against the Web Content Accessibility Guidelines (WCAG) 2.1, Level AA[1] — still the baseline most procurement and legal frameworks reference, even with WCAG 2.2 now published[2]:

  • 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 organises 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 following the Dialog (Modal) pattern in the WAI-ARIA Authoring Practices Guide (APG)[3], the W3C's reference implementation guidance for this kind of focus-trapped overlay:

  • 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.

The two rendering modes are deliberately not a "main view plus an afterthought." A screen-reader user working the tree fallback gets the same underlying graph — the same neighbours, the same shared-concept flags, the same "you are here" marker — as a sighted user scanning the map, just delivered through a hierarchy assistive technology already knows how to announce rather than through coordinate geometry it cannot. There is a trade-off: the tree view discards the map's implicit "how far" signal (physical distance standing in for conceptual similarity), so proximity has to be stated explicitly instead of shown. That is why every tree node carries its relationship to the current page as text (shared concept, current location, hazard warning) rather than relying on list order alone to imply it.

References

  1. World Wide Web Consortium (W3C), Web Content Accessibility Guidelines (WCAG) 2.1, W3C Recommendation, 5 June 2018. https://www.w3.org/TR/WCAG21/
  2. World Wide Web Consortium (W3C), Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, October 2023. https://www.w3.org/TR/WCAG22/
  3. W3C Web Accessibility Initiative (WAI), "Dialog (Modal) Pattern," ARIA Authoring Practices Guide (APG). https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/