A Visual Studio Code-Integrated Grid-Based Code Editor for Low-Vision Students

Overview

Low-vision (LV) students face significant challenges when learning indentation-based programming languages like Python due to difficulty perceiving and navigating structured code.
This Visual Studio Code extension introduces a dual-view layout that displays both standard text and a structured grid to enhance clarity, reduce errors, and promote better understanding of code structure.

The grid view visually represents indentation levels with real-time updates and high-contrast color-coded indicators, providing an accessible, supportive learning environment.

Features

• Dual-View: Standard text editor alongside a structured, grid-based view.
• High-Contrast Visualization: Color-coded indentation levels for improved visibility.
• Real-Time Synchronization: Instant updates between code and grid views.
• Configurable Settings: Customize colors and feedback options.
• Modular Architecture: Built for future expansion and updates.

Installation

Once released to the Visual Studio Code Marketplace:

1. Open Visual Studio Code.
2. Go to the Extensions panel (Ctrl+Shift+X).
3. Search for "Grid-Based Code Editor for Low-Vision Students".
4. Click Install.

Usage

• Open a Python file or create a new one.
• The grid-based view will automatically open in a side panel.
• As you write or edit your code, the grid view will update in real-time, visualizing the code's structure and indentation hierarchy.
• Customize your settings via the extension options to suit your visual preferences.

Contact

Nathan Fimbres
University of Mary Washington
Fredericksburg, Virginia, USA
nfimbres@mail.umw.edu

Making code more accessible for everyone, one block at a time.