Accessibility on Data Navigation

Accessibility on Data Navigation ABSTRACT The project investigates how to make websites and data, particularly geospatial data, more accessible to the visually impaired. After reviewing mainstream data-related websites and interviewing the low-vision communities, methods that could help to improve accessibility were discovered, including headline navigation, text descriptions, search functions, high contrast color, and sound feedback. As a result of the research, an accessible map viewer was developed that features sonification, a simple voice control, and high contrast colors.

KEYWORDS Accessibility, Data Visualization 1. INTRODUCTION Technological advancement in the digital age has dramatically transformed the way we live, and the lockdown due to the pandemic has accelerated our dependence on technology. As more and more data becomes available, internet users spend a lot of time navigating websites that contain data, including financial services, e-commerce, and geographical information services.

In the United States, there are 12 million people 40 years and older who have vision impairment, including 1 million who are blind1, and about 8% of all men and 3% of all women suffer from color blindness2 (color vision deficiency). Despite this, one study found that 70% of surveyed websites contain accessibility blocks, or quirks in design that make them unreadable with assistive technology3, not to mention websites with large amounts of data. The UN's Convention on the Rights of Persons with Disabilities4 dictates that appropriate measures should be taken to ensure people with disabilities "on an equal basis with others," and "promote accessibility" encompassing "new information and communication technologies and systems, including the Internet."

Thus, this project investigates accessibility on data visualization and aims to find a way for all the users to navigate data intuitively.

2. CURRENT PROBLEMS IN DATA NAVIGATION INTERFACE Low-vision communities most often access the internet via their mobile phones, sound control devices such as Echo and Alexa, and desktop computers, where they use a screen reader and keyboard to navigate.

Financial data is always presented in tabular format, highlighting the details of the records, and in line charts showing the trends. However, the screen reader cannot access the detail and number in each record for tabular data (Figure a). Likewise, the line chart (Figure b), which is always available as an embedded image on the website, cannot be clearly seen by visually impaired people, only a brief description is provided.

Figure a: Tabular data on Stock

Figure b: Line chart in the webpage In addition, only the text information is accessible by screen readers for mainstreet map services.

It may be difficult to communicate spatial information to visually impaired groups, such as the color of the map, the density, the location of a specific spot, the direction of the route, etc.

Figure c: Zola Map 3. HOW TO IMPROVE ACCESSIBILITY 3.1 Interview with the low-vision community Interviews with blind and low-vision communities were conducted in order to better understand how they navigate the internet with large amounts of data. In the interviews, we gather their suggestions for improving accessibility on the web: 1. Heading navigation and navigation menus makes the website that has a lot of information more efficient and accessible to screen readers; 2. Keyboard shortcuts could make finding specific information easier; 3. The search function may assist users in finding the information they need more quickly.

3.2 Enhance accessibility for people with color blindness People with the most common types of color blindness, such as protanopia and deuteranopia, have difficulty distinguishing red and green colors. Additionally, there are forms of color blindness, such as tritanopia, which affects the perception of blue and yellow colors. Below are examples of what the color wheel might look like to people with different color deficiencies.

Figure d: Different types of color blindness

Accordingly, in order to improve the accessibility of colors, we should use the colors that provide maximum contrast so that the content is visible to the user with low vision or color deficiencies.

Additionally, according to the Web Accessibility Guidelines5, there are several strategies that could help to improve the accessibility: 1) Interactive elements and text should have a color contrast ratio of at least 4.5:1; 2) Color cannot be the only indicator for interactive elements, underline or mark could also be used; 3) Since red/green color blindness is the most common, avoid green on red or red on green.

3.3 Enhance the accessibility of data visualization Furthermore, there are a few principles that could help in making an accessible data visualization: 1) Interactive charts made with scalable vector graphics (SVG) can support features like keyboard navigability and labels for screen readers.

2) Use HTML alt-text to provide a one-sentence summary of the chart since there’s enormous cognitive load in consuming large amounts of data, so the reader can decide if they want to learn more. Do not make the readers walk through each cell of a table.

Additionally, it seems that there is no efficient way for screen readers to access geo-spatial data elaborated on maps, such as ESRI maps and StoryMaps. However, web developers could add accompanying tabular data, the title, a detailed description of the map, or even an audio description to help screen readers understand the map.

3.4 Case Study - Sonify and Stockgrok: Sonify the Interface In 2016, a team from Carnegie Mellon University created Sonify, an iPhone application that enables individuals with visual impairments to quickly understand line graphs9.

Figure f: Sonify

By moving the hand on the chart, the user could touch and drag to hear sonic feedback, and tap anywhere on the graph to hear the X and Y values at the point.

On top of Sonify, the team created Stockgrok in 2017, an accessible web-based chart analysis tool for making buy or sell decisions through sound and helping non-sighted users understand stock prices in context. The app compares the stock price with its rolling average, and sonifies the difference between the price and average price using a variety of timbres and frequencies.

Figure g: Comparing price and average price in Stockgrok 4.Noise Data Visualization As a result of previous research, the project aims to implement multi-sensory interaction for the main page and noise data visualization using three methods: sonifying the interface, visualizing the map with accessible colors, and voice control. Therefore, those with visual impairments can experience the website without seeing it.

1. Main page: Voice control Interface

Figure h: Main page (Link: https://jljuli.github.io/IXD-Studio/Main.html) The main page includes a map where 3D buildings in NYC dynamically change height according to the ambient environment, giving the appearance of dancing. Additionally, the user can talk to

the webpage and navigate to different pages, such as the NYC 311 data page, or the Noise visualization map of Manhattan and Brooklyn.

2. Geospatial data visualization The map was divided into two parts: classification and noise level visualization.

Different data types resulted in different color schemes: data for the classification was categorical, so was visualized with different hues, and data for the noise level was ordinal, so was visualized with different values of color (lightness).

5. IN THE FUTURE 1.Sonify the Map The sonification of the map is in progress. In the future, the map will be sonified with a variety of timbres and frequencies, which will show the noise density and machine learning clusters.

Voice control will also be added to realize simple controls, such as zooming in to check data at specific points.

2. Usability Testing In order to evaluate how the interface performs, both qualitative and quantitative usability testing needs to be applied, including: 1).Qualitatively usability testing: a) Ask the user to perform certain tasks with the web; b) Observe how the users with different visual abilities use navigate the geo-spatial data; c) Interviews the users how they think about the web.

2). Usability testing data could be collected more frequently once a certain number of users is reached so that the user experience can be quantitatively assessed: develop metrics that describe the user experience for different types of visual abilities, such as task success rate and time spent on a certain task.

With qualitative and quantitative usability testing, we could: a) Learning about the behavior and preferences for the users with different visual abilities; b) Through comparing the evaluation metrics (such as success rate and time) between different user groups, identifying problems in the user interface for different users group; c) uncovering opportunities to improve.

FIGURES Figure a: Yahoo Finance https://finance.yahoo.com/news/3-strong-buy-stocks-under-160446617.html Figure b: Investopedia https://www.investopedia.com/ Figure c: New York City’s Zoning & Land Use Map https://zola.planning.nyc.gov/about/ Figure d: Color Blindness https://www.medicalnewstoday.com/articles/319115#The-many-shades-of-color-blindnessFigure f: Sonify App https://hcii.cmu.edu/mhci/capstone/2016/bloomberg/product.html Figure g: Stockgrok https://stockgrok.github.io/

REFERENCES 1.Centers for Disease Control and Prevention: Fast Facts of Common Eye Disorders, “Fast Facts of Common Eye Disorders”. https://www.cdc.gov/visionhealth/basics/ced/fastfacts.htm 2.IRIS, “Statistics and How many people are color blind”. https://iristech.co/statistics/ 3.Wried, “The Internet Is for Everyone, Right? Not With a Screen Reader”. https://www.wired.com/story/web-accessibility-blind-users-dominos/ 4.Convention on the Rights of Persons with Disabilities (CRPD), “Article 9 –Accessibility”. https://www.un.org/development/desa/disabilities/convention-on-the-rights-of-persons-with-disa bilities/article-9-accessibility.html 5. Web Accessibility Guideline v1.0 “Color and Contrast”. http://web-accessibility.carnegiemuseums.org/design/color/