VoxLens: Making Online Data Visualizations Accessible with an Interactive JavaScript Plug-In
Authors
Title of the Paper
VoxLens: Making Online Data Visualizations Accessible with an Interactive JavaScript Plug-In
Paper Information
- Subject Area: Accessibility and assistive technologies for data visualization
- Keywords: Visualization, Accessibility, Screen Readers, Voice Interaction, Blindness, Low Vision
Research Background and Problem
- Problem or Challenge: Many online data visualization tools generate charts using JavaScript libraries, but these charts often lack effective accessibility support for screen reader users. This creates significant barriers to information access. For instance, studies show that screen reader users spend 211% more time interacting with visualizations and experience a 61% decrease in accuracy compared to non-screen reader users. Additionally, creators of visual charts often lack understanding and implementation of accessibility features.
- Importance: Online data visualizations are widely used to aid data interpretation. Without effective accessibility support for screen reader users, the inequality in information access is exacerbated, hindering their learning, work, and daily life.
- Research Motivation: Existing methods, such as alternative text and data tables, are not efficient enough in reducing user workload. The authors aim to achieve this goal through an interactive, multimodal solution that enhances the efficiency and accuracy of information extraction for screen reader users.
Solution
-
Method and Approach: The authors designed and developed an open-source JavaScript plug-in called VoxLens, which provides three modes to enhance the accessibility of data visualization charts:
- Question-and-Answer Mode: Users can query chart data via voice commands, such as "What is the maximum value?"
- Summary Mode: VoxLens automatically generates a summary of the chart, including the title, axis ranges, maximum and minimum values, etc.
- Sonification Mode: Chart data is mapped to musical scales, allowing users to perceive data trends through sound.
-
Innovations:
- Developed a plug-in compatible with any JavaScript visualization library.
- Supports screen reader users in interacting with visualizations using voice commands, marking the first multimodal accessibility solution in the field of data visualization.
- The plug-in is easy to install and integrate, requiring only a single line of code.
- The audio in the sonification mode is customizable to suit individual user preferences.
-
Implementation Steps:
- Plug-in Integration: Users only need to add a single line of code to integrate VoxLens into their visualization charts.
- User Interaction: Users activate the three modes via keyboard shortcuts, relying on screen reader output for interaction.
- Technical Details: Utilizes the Web Speech API for voice recognition; the Tone.js library for sound generation; and ARIA attributes to ensure screen reader accessibility to charts.
Research Outcomes
-
Specific Results:
- Performance Improvement: Compared to the control group without VoxLens, screen reader users achieved a 122% increase in information extraction accuracy and a 36% reduction in interaction time.
- Consistency: VoxLens provides a unified interaction experience across various visualization libraries (e.g., ChartJS, D3, Google Charts), regardless of their underlying implementations or built-in accessibility features.
- User Feedback: According to subjective evaluations, VoxLens is regarded as a "revolutionary" tool, widely recognized for significantly reducing the time and effort required for information processing.
-
Experimental or Evaluation Results:
- Quantitative Evaluation: Participants completed tasks involving data visualization-related questions, showing significant improvements in accuracy and interaction time.
- Qualitative Analysis: Participants generally reported a smoother and more intuitive experience with VoxLens. The question-and-answer mode was considered one of the most useful features, while the sonification mode helped in understanding overall data trends.
- Workload Survey: Based on NASA-TLX subjective workload assessments, VoxLens scored low in time and physical demand, demonstrating high efficiency.
-
Limitations and Future Directions:
- The current version only supports two-dimensional single-series data. Future research should address multi-dimensional and multi-series data.
- The voice mode relies on the Web Speech API, which is currently only available in the Chrome browser. Future work should explore more universal solutions.
- Further exploration of personalized needs is required, such as allowing users to customize the frequency and waveform in the sonification mode.
Conclusion
VoxLens is a promising open-source tool that achieves significant innovation in enhancing the accessibility of data visualizations. By transforming static content in traditional visualization tools into multimodal dynamic interactions suitable for screen reader users, VoxLens holds broad application prospects in both academia and industry. Additionally, the paper provides guidance for future research on accessible data visualization, contributing to the advancement of information equity.
Research Questions / Practical Problems
Question signals indexed for this paper.
Research Questions
3- How can a plugin be designed to improve blind users' interaction with online data visualization tools?Category: Data Visualization, Sonification, and Data PhysicalizationSimilar questionsarrow_forward
- How can multimodal (voice, summary, auditory) interaction improve information extraction efficiency and accuracy for blind users?Category: Data Visualization, Sonification, and Data PhysicalizationSimilar questionsarrow_forward
- What usage and technical requirements must a general assistive plugin for data visualization meet?Category: Data Visualization, Sonification, and Data PhysicalizationSimilar questionsarrow_forward
Practical Problems
1- Blind users struggle to use online data visualization tools efficiently and accurately.Category: Data Visualization, Sonification, and Data PhysicalizationSimilar questionsarrow_forward
- 67%
Accessibility of High-Fidelity Prototyping Tools
CHI '21· Visual Impairment Technologies (Screen Readers, Tactile Graphics, Braille) +1
- 67%
ToPSen: Task-Oriented Priming and Sensory Alignment for Comparing Coding Strategies Between Sighted and Blind Programmers
DIS '25· Visual Impairment Technologies (Screen Readers, Tactile Graphics, Braille) +1
- 67%
FigurA11y: AI Assistance for Writing Scientific Alt Text
IUI '24· Explainable AI (XAI) +1
- 60%
Twitter A11y: A Browser Extension to Make Twitter Images Accessible
CHI '20· Visual Impairment Technologies (Screen Readers, Tactile Graphics, Braille)
- 60%
Accessibility of Command Line Interfaces
CHI '21· Visual Impairment Technologies (Screen Readers, Tactile Graphics, Braille)
Based on Jaccard similarity of research subtopics & professions (≥60%)