Automating Accessibility: A Development Strategy for AI-Enhanced Data Tables

FYI: This post is high-level technical accessibility stuff for devs and product managers. If that annoys or bores you, feel free to read my less technical articles.

Image: Futuristic digital landscape with AI-enhanced data tables and a digital wheelchair.

Start Article

Data tables are indispensable tools for presenting information in digital formats. However, making data tables accessible to everyone, including people who rely on assistive technologies, is not always done and, depending upon complexity, can present significant challenges. The expanse of generative AI allows for another option for developers to ensure an automated solution to some of those issues. This article explores practical AI-driven solutions which leverage technology to create more accessible data tables, ensuring that all users can navigate, understand, and interact with them efficiently.

About Data Tables

Data tables organize information in a grid format, showing relationships between different pieces of data. Tables require markup that differentiates between header cells (<th>) and data cells (<td>), along with attributes that define their relationship. This semantic structuring of tabular data also allows assistive technologies to convey the content, in particular, the relationship of the information contained therein to users.

A number of problems arise when tables are not constructed using semantic structure, are used for layout purposes, headings or captions are omitted, and the like. No technology solution is a replacement for bad coding, ui, and the like.? The solution to bad coding is writing semantic code.? So, first and foremost, do that. But what if your goal is to guarantee that information needed for ensuring a table meets or exceeds accessibility standards (for example, adding a caption or a summary of the data, or providing alternative formats for tables too complex for a simple caption)? ? In that case, an AI solution may help you in the process of achieving that goal.? Let’s take a look at a few real world examples:

Example 1: Automating creation and updating of Table Captions using AI?

Table captions are essential for assistive technologies, offering a brief yet comprehensive summary of the table, including the data it holds and how it's sorted. When tables have functionalities allowing them to be re-sorted, reorganized, or modified in any way, updating the caption to reflect these changes is crucial for maintaining accessibility.

Problem: For straightforward tables, adding a static caption is simple, and incorporating event listeners to adjust this caption based on sorting changes is quite feasible. However, this important detail can be missed or forgotten during the development phase. This is where AI can bridge the gap.

Solution: The proposed solution involves processing the table data through API of the AI provider? in order to generate a concise summary and a detailed description suitable for the caption. The caption format, designed as "[data] + sorted by [column of sort] + [direction of sort]," ensures that users are always informed of the table's current organization. Though this process could technically be achieved with a mix of placeholders, HTML, and JavaScript, the AI component automates this task, ensuring that no table on a page lacks this vital information.

How to do it:

1. Send the table data to the AI using an API (ex: OpenAI API).? Use a prompt like the following: “You are a data expert.? I will provide you with a data table.? Provide a summary of the data in the following format? - [data] + sorted by [column of sort] + [direction of sort] (Ex: Cars sorted by manufacturer, ascending)”??
2. Return a summary of the data in the requested format and Embed that summary into the caption tag Result: This approach not only guarantees consistency across all tables but also adheres to a standard format, minimizing the risk of deviation and allowing for an automated way to guarantee the content is delivered for each table utilizing this strategy. NOTE:? Your prompt may vary.? Always test each prompt for accuracy with any given LMM.

Example 2: Simplifying Understanding of Complex Tables using AI

Problem: Complex tables - tables with multiple headers, multi-level headers, irregular headers, and unique data associations present complexities which can make it difficult to establish clear horizontal or vertical relationships between headers and data cells. To address this, in a semantically coded table, each table header is assigned a unique identifier, with data cells referring to these IDs in their headers attribute, delineated by spaces. There are other associations as well such as <span> tags to identify the number of rows or cells associated, and other techniques for complex labeling.? That said, the data can still be tremendously complex - so complex that the only meaningful ways to get total understanding of the complexity can seem to be through visual means.

Solution 1: Content Summarization - AI can be leveraged to provide both a succinct and an extended description of the table's content. This includes a brief overview for quick understanding and a more detailed explanation available upon user request, covering all headings and their associated data relationships. This dual-level approach caters to different user needs, making complex tables more navigable.

How to do it:

1. Send the table data to the AI using an API (ex: OpenAI API).? Use a prompt like the following: “You are a data expert.? I will provide you with a data table.? Provide two summaries of the data.? Summary 1 is in the following format? - [data] + sorted by [column of sort] + [direction of sort] (Ex: Cars sorted by manufacturer, ascending)”? ? Summary 2 should be a succinct one-paragraph? explanation of the data (ex: The table titled "Supplier contacts" is structured to present the contact information of representatives from four distinct companies. The data is organized into a grid with column and row headings, where each company occupies a vertical column, and the rows are dedicated to specific types of information: Contact (the name of the representative), Position (their role within the company), and Email (their email address)”
2. Return both summaries of data in the requested formats.. Place the short version in the <caption> tag.? Place the longer description in a link labeled to another piece of content (like a modal overlay)? and let users connect to that on-demand .? NOTE:? There are alternatives like attaching long descriptions to the content , but you can explore that independently ?? Also, your prompts may vary.? Always test each prompt for accuracy with any given LMM.

Solution 2: Data Reorganization: For tables that are exceptionally intricate, AI can restructure the data into an alternative format, for example, a series of lists. This transformation simplifies the information which can then be hosted on a separate HTML page, such as a modal overlay, ensuring that users have availability to a linear and straightforward presentation of data in an alternative format.

How to do it:

1. Send the table data to the AI using an API (ex: OpenAI API).? Use a prompt like the following: “You are a data expert.? I will provide you with a data table.? Return the data as an unordered list.Example 1 LtdContact: James PhillipsPosition: Sales DirectorEmail: [email protected]NOTE: You can format this as needed for your dislay UI (<ul>, <ol>, other )
2. Return the data in the requested formats.? Place the list in a link labeled “view this table as an unordered list”? to another piece of content (like a modal overlay)? and let users connect to that on-demand .??

Conclusion

Practical AI-driven solutions that leverage the power of technology to improve content accessibility provide great promise for creation of inclusive digital experiences. The strategic automation of things like table captions and the simplification of complex table structures can help to addresses the intricate challenges of making digital information is universally navigable.

Now go make it happen!