MAIDR Logo

MAIDR: Multimodal Access and Interactive Data Representation

maidr (pronounced as 'mader') is a system for non-visual access and control of statistical plots. It aims to provide an inclusive experience for users with visual impairments by offering multiple modes of interaction: braille, text, and sonification (BTS). This comprehensive approach enhances the accessibility of data visualization and encourages a multi-modal exploration on visualization.

Table of Contents

  1. Usage
  2. Data Schema
  3. React Integration
  4. Controls
  5. Braille Generation
  6. Examples
  7. Binders
  8. Papers
  9. License
  10. Contact
  11. Acknowledgments

Usage

To use maidr, follow these steps:

  1. Import your plot or plot: maidr is designed to work seamlessly with scalable vector graphics (SVG) objects for visual highlighting. However, maidr is inherently visual-agnostic, and it also supports other raster image formats such as PNG and JPG without the visual highlight feature. Regardless of the image format, maidr provides support for all non-visual modalities, including Braille, text, and sonification (BTS). Additionally, it offers interactive and artificial intelligence (AI) plot descriptions powered by OpenAI GPT-4 Vision and Google Gemini Pro-Vision. The supported plot types include bar plot, boxplot, heatmap, scatter plot, line plot, histogram, segmented bar plots (e.g., stacked bar plot, side-by-side dodged plot, and normalized stacked bar plot).

  2. Create an HTML file: Include the main script file maidr.js or maidr.min.js as well as the stylesheet styles.css or styles.min.css. Add the SVG of your plot to the main HTML body, and add an ID attribute of your choice to the SVG. Note that this can be automated with R. Your HTML file should now have the following structure:

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>maidr Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maidr@latest/dist/maidr_style.css" />
    <script src="https://cdn.jsdelivr.net/npm/maidr@latest/dist/maidr.js"></script>
  </head>
  <body>
    <div>
      <!-- Your SVG plot is here -->
    </div>
  </body>
</html>

  3. Add your data: Define the maidr JSON schema for your plot. See the Data Schema documentation for the full schema structure, object properties, and data formats for each plot type.

Data Schema

The maidr JSON schema defines how plot data is structured for each supported plot type, including bar plots, boxplots, heatmaps, scatter plots, line plots, histograms, and segmented bar plots. For the full schema structure, object properties, and data formats, see the Data Schema documentation.

React Integration

MAIDR provides a React component for use in React applications. Install via npm:

npm install maidr

Then import and use the <Maidr> component:

import { Maidr } from 'maidr/react';
import type { MaidrData } from 'maidr/react';

const chartData: MaidrData = {
  id: 'my-chart',
  title: 'Sales by Quarter',
  subplots: [[{
    layers: [{
      id: '0',
      type: 'bar',
      axes: { x: 'Quarter', y: 'Revenue' },
      data: [
        { x: 'Q1', y: 120 },
        { x: 'Q2', y: 200 },
        { x: 'Q3', y: 150 },
        { x: 'Q4', y: 280 },
      ],
    }],
  }]],
};

function App() {
  return (
    <Maidr data={chartData}>
      <svg>{/* Your chart SVG */}</svg>
    </Maidr>
  );
}

Each <Maidr> instance is fully isolated — you can render multiple accessible charts on the same page. Requires React 18 or 19.

For the full React guide with TypeScript types reference, data examples for all plot types, and advanced usage, see the React documentation.

Controls

maidr provides keyboard-based interaction for navigating and exploring plots. Users can move through data points with arrow keys and toggle between braille, text, and sonification modes. For the complete list of keyboard shortcuts and interaction controls, see the Controls documentation.

Braille Generation

MAIDR incorporates a Braille mode that represents plots using Braille symbols, allowing users to explore data using a refreshable Braille display. Different plot types use unique encoding strategies tailored to convey data distribution, patterns, and trends. For detailed encoding schemes for each plot type, see the Braille Generation documentation.

Examples

Example plots are demonstrated here.

For more information, refer to the example HTML files provided in the directory examples/

Binders

We currently provide the following binders, all of which can be found at each repo:

Papers

To learn more about the theoretical background and user study results, we recommend you read and cite the following papers.

  1. MAIDR: Making Statistical Visualizations Accessible with Multimodal Data Representation:
@inproceedings{seoMAIDRMakingStatistical2024,
  title      = {{{MAIDR}}: {{Making Statistical Visualizations Accessible}} with {{Multimodal Data Representation}}},
  shorttitle = {{{MAIDR}}},
  booktitle  = {Proceedings of the {{CHI Conference}} on {{Human Factors}} in {{Computing Systems}}},
  author     = {Seo, JooYoung and Xia, Yilin and Lee, Bongshin and Mccurry, Sean and Yam, Yu Jun},
  year       = {2024},
  month      = may,
  series     = {{{CHI}} '24},
  pages      = {1--22},
  publisher  = {Association for Computing Machinery},
  address    = {New York, NY, USA},
  doi        = {10.1145/3613904.3642730},
  urldate    = {2024-05-14},
  abstract   = {This paper investigates new data exploration experiences that enable blind users to interact with statistical data visualizations---bar plots, heat maps, box plots, and scatter plots---leveraging multimodal data representations. In addition to sonification and textual descriptions that are commonly employed by existing accessible visualizations, our MAIDR (multimodal access and interactive data representation) system incorporates two additional modalities (braille and review) that offer complementary benefits. It also provides blind users with the autonomy and control to interactively access and understand data visualizations. In a user study involving 11 blind participants, we found the MAIDR system facilitated the accurate interpretation of statistical visualizations. Participants exhibited a range of strategies in combining multiple modalities, influenced by their past interactions and experiences with data visualizations. This work accentuates the overlooked potential of combining refreshable tactile representation with other modalities and elevates the discussion on the importance of user autonomy when designing accessible data visualizations.},
  isbn       = {9798400703300},
  keywords   = {Accessibility,Blind,Braille Display,Multimodality,Screen Readers,Statistical Visualization}
}
  1. Designing Born-Accessible Courses in Data Science and Visualization: Challenges and Opportunities of a Remote Curriculum Taught by Blind Instructors to Blind Students:
@inproceedings{10.2312:eved.20241053,
  booktitle = {EuroVis 2024 - Education Papers},
  editor    = {Firat, Elif E. and Laramee, Robert S. and Andersen, Nicklas Sindelv},
  title     = {{Designing Born-Accessible Courses in Data Science and Visualization: Challenges and Opportunities of a Remote Curriculum Taught by Blind Instructors
               to Blind Students}},
  author    = {JooYoung Seo and Sile O'Modhrain and Yilin Xia and Sanchita Kamath and Bongshin Lee and James M. Coughlan},
  year      = {2024},
  publisher = {The Eurographics Association},
  isbn      = {978-3-03868-257-8},
  doi       = {10.2312/eved.20241053}
}

License

This project is licensed under the GPL 3 License.

Contact

For any inquiries or suggestions, please contact the principal investigator:

JooYoung Seo - jseo1005@illinois.edu

Acknowledgments

This project is conducted through the (x)Ability Design Lab at the University of Illinois at Urbana-Champaign, and funded by multiple grants, including: