2022-11-28: Summary of "What makes web data tables accessible? Insights and a tool for rendering accessible tables for people with visual impairments"

Figure 1: Based on the guidelines and the study, the authors built a browser plug-in to make the table more accessible.

Tables are an excellent medium for sighted people to understand the data's structure and contents. They are popular in many online documents, including news articles, government reports, and online applications like bank statements. It uses many visual metaphors that sighted people can quickly notice. Those metaphors facilitate an understanding structure without explicitly explaining the complex system. But you can imagine how hard it would be for people with visual impairments who need to use a screen reader, which linearizes all this information. Imagine how confusing it would be when the user's cursor is on top of an empty cell. For example, the screen reader doesn't say anything. The user might think they didn't press the key or need instruction of guidelines to access the multilevel merge cell.

Yanan Wang et al. recently published a paper on “What makes web data tables accessible? Insights and a tool for rendering accessible tables for people with visual impairments,” in CHI 2022, where she set out to improve the accessibility of web data tables. The authors tried to understand how the current existing guidelines prescribe designing accessible tables and wished to understand further what makes a data table inaccessible by interviewing people with visual impairments. Based on the interview and the guidelines, the authors built a chrome extension that can automatically detect the inaccessible components in a table and resolve the issues by processing the original HTML code (figure 2) and injecting information from the cell to allow screen readers to read out. Finally, the authors evaluate their system by analyzing how many inaccessibility issues a sampled set of tables can detect.

Figure 2: An example of the HTML code and the rendered table.

Consolidating Guideline and Interview Study

The authors gathered the guidelines for creating web tables by searching for keywords. They combined the suggestions from many sources and identified three key emphases. The majority of the recommendations stress the significance of HTML markup, such as "th" for the header and "row group" or "col group" for the table's orientation. The second recommendation is to include a summary or caption to provide further context. The third is to avoid complicated structures.

The guidelines were instructive, but many complex and improperly formatted tables in the real world need to follow the guidelines, making it impossible for those who use screen readers to comprehend them. With several objectives, the authors perform an interview study. To determine what causes a table to be inaccessible and what kind of assistance users require to grasp the structure and contents of tables better, the authors would first like to identify these variables further. They placed four complex real-world tables in front of 13 people who are legally blind and often use a screen reader. The authors instructed them to look over the information in each table and speak out on how they comprehended the layout and substance of the tables.

A Pre-recorded Presentations video for the CHI 2022 is available:

The authors analyzed the participants’ responses with a thematic analysis method and refined them to derive system-level goals and features. The first goal is to support constructing the mental model of the table structure, and the second is to provide additional contexts to facilitate in-depth understanding. Lastly, the system should facilitate easy navigation that allows the system to achieve its goals.

Making a browser extension to make the table accessible

All the accessibility issues identified are based on the formative study. First, their advanced tool automatically detects the table's orientation and marks the headers if the header information is missing (figure 1). This is crucial since screen readers provide header information when users move across the header. The authors further markup whether it's a horizontal table or vertical table /as conveying this information is vital for users to construct the table's structure. The tool also detects the empty cell and injects the word "blank" to indicate the blank cells. Their Chrome extension also can unmerge the merged cell by seeing the overall structure of the table. In addition, this tool generates the summary by calculating the summary statistics of each column or each row based on its orientation. It offers filter and sort functions, enabling users to quickly search for what they want. Lastly, if multiple tables are joined, this tool separates them to make them simple tables (figure 3). 

Before

After

Figure 3: An example of how the tool adds the markup in the header, fills out blank cells, and splits the merged cell.

Evaluation 

The authors conducted a performance evaluation by collecting data tables in the wild. The authors first analyzed how many inaccessible components they have. A total of 62 accessibility issues were found, and the authors rendered these tables with their tool. The authors also did a user evaluation to understand their tool's usefulness further. They used the same stimuli as the formative study. But this time, the authors presented both the original and rendered tables by their tool so that participants could experience the improvements and give them feedback. Many participants like the summary feature because they can mentally prepare for the upcoming content they will navigate. Also, the splitting of complex tables was well-received by participants. The participants were aware of the shortcut to jump around the tables, which is the "T" key, and they liked that each table was just a simple table. The indication of the empty cells solved many participants' misunderstandings. In addition, the filter and sorting function allowed participants to search for the specific information they wanted. In addition, as one of the interviewees mentioned, this function will enable participants to discover the trend since you can filter the data by an attribute. 

Summary and future work

In this work, the authors improve the accessibility of online data tables by spotting accessibility concerns discovered by their study and addressing them instantly for people interacting with the table. According to the authors, this will also increase the usability of other data representations that supplement the tables, including data visualization. Although this method allows the authors to improve accessibility for legacy tables, the authors do not support its use as a secondary implementation. As a future project, the authors hope to create an authoring tool that assists authors in creating accessible tables by optimizing the table structure for screen readers and sighted users. Additionally, future research can do a controlled experiment using the knowledge gathered from their work to further understand and predict table accessibility depending on its contexts and structures.

Acknowledgment

I want to express my gratitude to Dr. Michael Nelson for his assistance in reviewing this blog article.

-- Md Javedul Ferdous (@jaf_ferdous)

Wang, Y., Wang, R., Jung, C. and Kim, Y.S., 2022, April. What makes web data tables accessible? Insights and a tool for rendering accessible tables for people with visual impairments. In ACM CHI Conference on Human Factors in Computing Systems (pp. 1-20).