Original link: http://vis.pku.edu.cn/blog/chart-reader/
Data visualization enables people to effectively explore data and communicate insights effectively. But visualization relies on visual ability, and people who are blind or have low vision have visual deficits. People who are blind or have low vision primarily use a screen reader as an aid to reading, which is not compatible with most visualizations. Existing works have tried to make up for the deficiencies of screen readers in many ways, including providing text or tables, interacting through keyboards, etc., but there is a lack of systematic research and no usability.
Researchers from Microsoft and the University of Washington combined existing work to provide an accessibility engine that learns how to balance functionality with available screen reader users for visual design, while exploring the design space.
This work [1] synthesizes the techniques of existing work and the specific design requirements of this tool, and summarizes five core design dimensions.
- structure. The diagram needs to be reorganized for easy navigation, such as turning all elements into a tree structure.
- navigation. The method of traversing the chart, such as switching elements through the left and right keys and up and down keys.
- describe. Text representation of all elements, convertible to audio, including element type and value, and characteristics.
- Non-speech audio stimuli. Pitch or music, such as encoding numerical magnitude by pitch.
- focus. Simplify the diagram by modifying or deleting it. For example, to filter elements.
The authors developed an initial prototype system along these dimensions, and then conducted a series of one-on-one meetings with partners (known as concurrent co-design).
The author recruited 10 BLVI design partners from Microsoft, all of whom were blind and/or vulnerable and frequently browsed the web using screen readers. Some are proficient in data exploration and charts, and some don’t. Some have a background in assistive technology development. Iterative design through three-stage meetings, each meeting allows users to explore with questions, collect user feedback and design insights, and iterate designs and prototypes based on opinions.
The final chart reader (Chart Reader) is realized through js. Underlying files include data tables, insights lists, and chart configurations. The data table is saved in csv format. The list of insights is represented in json format, and each insight contains its title and label text, target object (subset of data) and type (such as trend). Chart configuration is similar to other declarative syntaxes.
Figure 1: Five regions in a diagram rendered using a diagram reader to support an accessible visualization experience. Data Insights, each insight type and sub-area of insights, is further subdivided into each individual insight. The x-axis, the subregion of each bin along the axis. The Y axis, the subregion of each bin along the axis. data point area. filter, each series has subregions.
Each visualization is organized into a tree structure with five branches, Data Insights, X-Axis, Y-Axis, Data Points, and Filters (Figure 1).
- Data insights are grouped by type, forming a three-tier structure. Check Insights to view content and navigate directly to data points.
- X-axis and Y-axis provide axis and bin descriptions. A bin on the x-axis contains the mean or total of all series in that bin. The y-axis contains the percentage of each series’ data that falls within the interval.
- Data points support user navigation.
- filter. Filter series by checkbox.
- other means of navigation. Jump to the beginning and end with Home and End, and five elements with Page Up and Down. And locate the five branches by shortcut keys.
- Acoustic processing. Includes sonification of a data point, series, and comparison of multiple series.
The author also summarizes the lessons learned in concurrent collaborative design of accessible visualization for screen reader users. Some important parts are selected here to introduce, and more details can be found in the original text.
- Structures make navigation and viewing of diagrams easier. This work uses a hierarchical tree structure, which supports the granularity of control navigation and switching between different levels and within the same level.
- A combination of speech and vocalization can aid in comprehension. It is more efficient to convert data to voice than to read it, and it supports reading a continuous piece of data. In addition, when the voice is stopped, the voice of the current data will be broadcast.
- The positioning of the user during navigation is important. This work uses the shortcut keys of the main branch (such as X to jump to the X axis), and quick jumps such as Home and End.
- Controls are as consistent as possible with other common application conventions. For example, the left and right arrows control basic movement.
- Describing insights can help explore diagrams, but it’s best to use a specific template for easy reading.
references:
[1] John Thompson, Jesse Martinez, Alper Sarikaya, Edward Cutrell, and Bongshin Lee. Chart Reader : Accessible Visualization Experiences Designed with Screen Reader Users. In Proceedings of the CHI Conference on Human Factors in Computing Systems, 2023.
This article is transferred from: http://vis.pku.edu.cn/blog/chart-reader/
This site is only for collection, and the copyright belongs to the original author.