Accessibility in Diagram Editors with Eclipse GLSP

In an exciting collaboration with Dr. Dominik Bork and master student Aylin Sarioglu at the Business Informatics Group at Vienna University, we’ve achieved a new pivotal capability in GLSP 2.0: an innovative take on accessibility in diagram editors. These advancements make diagram editors more accessible and user-friendly for all users, a focus we are particularly excited about in this blog post.

Not familiar yet with GLSP?

Eclipse GLSP, or Graphical Language Server Platform, is an open-source framework for building custom diagram editors using modern web technologies. It offers a wide range of features typical to advanced diagram editors, including node and edge creation and modification, inline label editing, validation, and common functionalities like copy/paste and undo/redo. GLSP adopts the Language Server Protocol architecture, separating a web-based frontend from a diagram server that handles operations like model management, manipulation, and validation. With the help of dedicated platform integration layers, GLSP editors seamlessly integrate with Eclipse Theia, VS Code, Eclipse desktop and plain web applications, offering versatile application possibilities.

Accessibility of Diagrams

Accessibility is a fundamental aspect in modern tools, not just an additional feature. It is crucial that everyone can efficiently use IDEs and tools efficiently, and the same is true for diagram editors. GLSP has always integrated certain accessibility features, such as adjustable zoom levels and high-contrast color schemes. The new experimental keyboard-only features in GLSP 2.0, however, significantly boost the accessibility of diagram editors.

Tackling the challenges of adapting a graphical tool like a diagram editor for keyboard-only use required innovative approaches, especially for tasks like specifying graphical locations and navigating the canvas.

Let’s delve into these solutions for key use cases.

Enhancing Diagram Editor and Viewport Interaction

Users can pan the viewport using cursor keys and zoom with + and - keys when no elements are selected. A focus tracker widget indicates the active area within the editor, whether it’s the diagram or the palette. Custom keyboard shortcuts enable users to switch focus effortlessly between different parts of the editor.

Streamlined Node Selection

The quickest way to select a node is via the quick search bar, activated by Ctrl-F. This feature launches a widget offering suggestions and performs a fuzzy search through all labels as users type. The cursor keys allow users to navigate through matches, highlighting the corresponding elements in the diagram. Confirming a match with Enter centers the viewport on the selected element.

Intuitive Semantic and Graphical Navigation

Users can switch between semantic navigation (following diagram edges) and spatial navigation (moving to adjacent elements) depending on their needs and diagram type. These navigation modes, activated by N and Alt-N, respectively, allow for easy cursor key navigation through the diagram.

Creating and Editing Diagram Elements Efficiently

Every aspect of diagram interaction, from node creation to label editing and edge formation, is keyboard-accessible. Notably, the process of creating nodes involves an innovative positioning mechanism. After focusing the palette (Alt-P), users can either search for a node type or use the hinted keys for quick selection. The canvas then divides into nine sectors for initial node placement, selected by pressing keys 1 to 9. A moveable circle appears in the chosen sector for precise placement using cursor keys.

Forging New Paths in Accessible Diagram Editing

GLSP 2, with its user-focused design and enhanced features, exemplifies the extraordinary results of collaboration between academia, tech experts, and the industry. All these groundbreaking features are universally applicable across any diagram editor built with GLSP. Currently, as an experimental module for standalone deployments, we are actively working on integrating these accessibility features with the GLSP-supported platforms, such as VS Code and Eclipse Theia. These integrations will utilize the native keybinding mechanism of these platforms to prevent keybinding conflicts and allow users to personalize their keyboard shortcuts.

If you have any questions about Eclipse GLSP or need specific features, please get in touch with us! EclipseSource provides support for building custom diagram editors using Eclipse GLSP, for adding custom features to GLSP and for building custom IDEs or tools based on VS Code or Eclipse Theia.