Definition
A situation arises from difficulty getting details of graphs due to a lack of support for providing a description of graph content, context, type, and other attributes.
Factors Leading to the Situation
- Lack of features/functions/items/information: lack of descriptive information
- Lack of features/functions/items/information: insufficient instructions for mobile screen readers (text with tooltip) A software program that reads textual information through synthesized speech and offers specialized keyboard commands to operate a computer interface. ’ image description options
Guidelines
- Provide a meaningful label and description of each graph.
- Ensure each interactive graph is accessible and its function is understandable.
- Ensure each interactive graph has a meaningful explanation of its dynamics.
Rationale for Suggesting the above Guidelines
Graphs, especially interactive graphs, are inherently more complex than static images or icons. It often requires more detailed descriptions and explanations for graphs to ensure BVI (text with tooltip) The acronym for Blind and Visually Impaired. It refers to BVI users who rely on screen readers to interact with digital libraries (DLs). users can fully understand the the labels, functions, and dynamics of graphs. Difficulty concerning graphs usually arises from a lack of descriptive and explanatory information of graphs and a lack of instructions available for BVI users to use mobile screen readers (text with tooltip) A software program that reads textual information through synthesized speech and offers specialized keyboard commands to operate a computer interface. ’ image description options. To improve BVI users’ access and use of graphs, it is important to provide sufficient and meaningful descriptions of graphs to help users better comprehend the purposes and content of graphs. For interactive graphs, the proposed guidelines emphasize that it is critical to ensure that they are accessible with easy-to-understand functions and meaningful descriptions explaining their dynamics. To sum up, the proposed guidelines help ensure BVI users’ access to and interaction with graph items in DLs.
Techniques and Methods to Comply with a Specific Design Guideline
1.1. Include item descriptions and labels that clearly represent the graph content, type, and context.
2.1. Use
Highcharts
(text with tooltip)
A JavaScript charting library that utilizes Scalable Vector Graphics (SVG) and canvas/Web Graphics Library (WebGL) to create accessible charts for both web and mobile platforms.
in JavaScript for interactive graphs that are accessible via screen readers and voice input software.
2.2. Offer help information on using graph recognition function of
screen readers
(text with tooltip)
A software program that reads textual information through synthesized speech and offers specialized keyboard commands to operate a computer interface.
.
3.1. Incorporate AI functions and sonification technology in DLs to analyze graphs.
Features Suggested for Users
1.1.1./2.1.1. “Accessible charts” (See example 1.1.1.a./2.1.1.a.)
2.2.1. “
Context-sensitive help
(text with tooltip)
A help function that delivers immediate assistance to the user without the user having to leave the current context they are working in.
”
3.1.1. “
AI graph description
(text with tooltip)
A comprehensive description of a graph created by artificial intelligence (AI) assistive technologies that provides clarifications for its visual elements.
” (See example 3.1.1.a1.)
3.1.2. “Audio graph” (See example 3.1.1.a2.)
Examples of Best Practice
1.1.1.a./2.1.1.a. Accessible interactive charts using Highcharts
In ACC3/COM5 Figure a1, charts created using the Highcharts (text with tooltip) A JavaScript charting library that utilizes Scalable Vector Graphics (SVG) and canvas/Web Graphics Library (WebGL) to create accessible charts for both web and mobile platforms. Accessibility module allows users to navigate, explore, and interact with them with a screen reader (text with tooltip) A software program that reads textual information through synthesized speech and offers specialized keyboard commands to operate a computer interface. and voice input software.
ACC3/COM4 Figure a1. An example of Highcharts (Source: Highcharts, n.d.)
3.1.1.a1. Assistive AI technologies (iOS, Android)
Employing AI utilizing applications such as Seeing AI and Google Lookout can provide detailed descriptive information on graphs (ACC3/COM4 Figure a2). Since graphs contain various visual cues such as color, shape, and position, a more detailed explanation of these applications could help BVI users understand information.
ACC3/COM4 Figure a2. An example of assistive AI technologies
3.1.1.a2. Audio graphs for VoiceOver
Use the audio graphs API to provide VoiceOver with the necessary information to generate an audible representation of data in charts and graphs, enhancing accessibility for BVI users. In ACC3/COM4 Figure a3, an audio graph converts chart data into sound by encoding values from each axis. Usually, the x-axis represents time while the y-axis signifies pitch.
ACC3/COM4 Figure a3. Screenshot of audio graphs (Source: Apple, 2021; 2024)
Examples of Poor Practice
1.1.1.b1. Difficulty accessing/comprehending graphs
As depicted in ACC3/COM4 Figure b1, there is a lack of descriptive information related to the presented graph. The graph’s description is too brief, making it difficult for users to understand the visual cues effectively.
“So, the first item that I think of will be a graph. However, this graph lacks a description. I can’t fully interpret because they’re just saying that these are graphs.” (AT18-OL)
ACC3/COM4 Figure b1. Screenshot of difficulty accessing/comprehending graphs
1.1.1.b2/2.1.1.b1. Difficulty accessing/comprehending graphs
In ACC3/COM4 Figure b2, the interactive graph is difficult to access and understand. Additionally, the lack of thorough labeling for each graph feature hinders users’ comprehension.
ACC3/COM4 Figure b2. Screenshot of difficulty accessing/comprehending graphs
Resources
- Apple. (2024). Audio graphs.
- Apple. (2021). Bring accessibility to charts in your app.
- Alcaraz Martínez, R., Turró, M. R., & Granollers Saltiveri, T. (2022). Methodology for heuristic evaluation of the accessibility of statistical charts for people with low vision and color vision deficiency. Universal Access in the Information Society, 21(4), 863–894.
- Android Accessibility Help. (n.d.). Use Lookout to explore your environment
- Arooj, S., Zulfiqar, S., Qasim Hunain, M., Shahid, S., & Karim, A. (2020). Web-ALAP: A web-based LaTeX editor for blind individuals. In Proceedings of the 22nd International ACM SIGACCESS Conference on Computers and Accessibility. 1-6.
- Balik, S. P., Mealin, S. P., Stallmann, M. F., Rodman, R. D., Glatz, M. L., & Sigler, V. J. (2014). Including blind people in computing through access to graphs. In Proceedings of the 16th International ACM SIGACCESS Conference on Computers & Accessibility – ASSETS ’14, 91–98.
- Bartal, O., Suliman, M., & Benish, E. (n.d.). Accessible Graphs basic guide.
- Bernareggi, C., Ahmetovic, D., & Mascetti, S. (2019). μGraph: Haptic exploration and editing of 3D chemical diagrams. The 21st International ACM SIGACCESS Conference on Computers and Accessibility, 312–317.
- Havard University Information Technology. (2022). Creating accessible charts and graphs.
- Highcharts. (n.d.) Explore Highcharts Accessibility Features.
- Microsoft Garage. (n.d.). Seeing AI.
- Perkins School for the Blind. (n.d.). Highcharts: Accessible, Interactive Charts and Graphs.
- Sharif, A., Chintalapati, S. S., Wobbrock, J. O., & Reinecke, K. (2021). Understanding screen-reader users’ experiences with online data visualizations. In Proceedings of the 23rd International ACM SIGACCESS Conference on Computers and Accessibility. 1-16.