Rest API TSC Intermediate

#DDQ2026-10 Accessible SVG Exports with AI (Intermediate)

Turn Tableau’s SVG export into an image a screen reader can describe, for every Region, in one script.

P

Pablo Gomez

Author

2026-10-28T19:04:40
5 min read
preview.png
What a screen reader hears before and after: Tableau export placeholder title versus AI-written alt text and description, shown in English for a Spanish infographic

Welcome to the DataDev Quest Challenge for October 2026! A picture is worth a thousand words. We only need 150. This challenge is designed to teach you how to turn Tableau’s SVG export into an image a screen reader can describe, for every value of a filter, in one script.

Challenge Overview

Objective:

Export a view as PNG and SVG, ask an AI to describe the PNG, and write the description into the SVG so screen readers can read it aloud. Then repeat it for each value of a filter: one accessible SVG per Region.

Why this challenge?

Since Tableau Server 2026.2, the REST API can export a view as SVG as well as PNG. A PNG is pixels, great for an AI to read. An SVG is code, great for people to see, because you can edit it. A dashboard shared as an image is silent to a screen reader, and Tableau’s own SVG export ships with a placeholder title. This challenge uses each format for what it is good at: the PNG goes to the AI, the SVG goes to the people.

Learning Goals

  • Export views as PNG and SVG with the REST API or TSC
  • Filter an image export with view filters
  • Prompt an AI model that can read images and get JSON back
  • Edit an SVG safely with code, without touching the drawing
  • Make an image accessible with <title>, <desc>, role, aria-labelledby and lang

Submission Guidelines

  • Source Code: Publish your project publicly in your GitHub profile
  • Add README: Include any setup instructions and describe how to run the program.
  • Video of Solution: Include a video of your solution in the README file. You can publish it on YouTube and embed the iframe, or save the video file in the repository’s root directory
  • Comments: Ensure your code is well-commented
  • Submission: Submit your challenge in the following forms

Additional Resources

Getting Started

The first step is to get and set up your Tableau Developer Sandbox. Cristian Saavedra Desmoineaux has a Medium Post that provides a step-by-step guide to configuring it.

1. Check your version

SVG export through the REST API needs Tableau Server 2026.2 or later (REST API 3.29 or later). PNG works on every version. On an older Server, or with no site at all, use the sample infographic exported from Tableau as PNG and SVG and start at step 2.

2. Create a Personal Access Token

In your site, go to My Account Settings and create a Personal Access Token. You will use it to sign in from code.

3. Install Python and TSC

Install Python 3.13 or newer, then Tableau Server Client. TSC is adding SVG through ImageRequestOptions; if your version does not have it yet, a plain requests call works.

uv add tableauserverclient requests

4. Pick a view and an AI

Any dashboard works; Superstore is fine. For the AI, use any model that can read images: Claude, Gemini, ChatGPT or a local model.


Challenge

Step 1: Export

Download the same view twice: once as PNG (the default) and once as SVG.

GET /api/3.29/sites/{site-id}/views/{view-id}/image
GET /api/3.29/sites/{site-id}/views/{view-id}/image?format=SVG

Open both files in a text editor. The PNG is pixels; the SVG is code. Look at the first lines of the SVG: what did Tableau write in <title> and <desc>?

Step 2: Describe

Send the PNG to your AI and ask for alt text (150 characters max) and a short summary. Asking for JSON makes the answer easy to use in code. For example:

Write alt text under 150 characters and a three-sentence summary of this dashboard.
Return JSON with the keys "alt" and "summary".

Then check the numbers in the answer against the dashboard. The AI drafts; a person checks.

Step 3: Ship

Put the AI’s text inside the SVG: the alt text goes in <title>, the summary in <desc>, and the <svg> tag gets role="img", aria-labelledby and lang. Do it by hand for one file, or with code for many. Use AI for the words and code for the edit: Tableau SVGs are large, and an AI rewriting the whole file may change or cut parts of the drawing.

<svg ... role="img" aria-labelledby="alt summary" lang="en">
<title id="alt">ALT TEXT</title>
<desc id="summary">SUMMARY</desc>
The top three lines of the SVG before and after: Tableau placeholder title and description replaced with AI-written text and accessibility attributes
Only the top three lines of the SVG change. The rest of the drawing stays exactly as Tableau wrote it. Click the image to open it full size.

Step 4: Repeat for every Region

Filter the image request with a view filter, for example ?vf_Region=West, then ?vf_Region=East and so on. Each export shows different numbers, so each one gets its own description and its own accessible SVG.

GET /api/3.29/sites/{site-id}/views/{view-id}/image?format=SVG&vf_Region=West

Good to know: the text works when the SVG is placed inside the page (inline) or opened on its own. If you embed it with <img src="chart.svg">, browsers ignore the title inside the file, so also add alt="..." to the tag.

Extra Challenge

Make it reusable: package the whole process so anyone can run it. Build a Claude Skill, a Gemini Gem, a Custom GPT or your own app. A Skill can hold the script and the prompt and, with Tableau MCP, fetch the images itself. A Custom GPT can call the REST API through Actions. A Gem cannot call APIs, so it can work from an uploaded PNG. Whatever you build, a person should still check the AI’s text before it ships.

Going further: ask the AI for the description in two languages and let the reader choose, like the live demo does.

What a finished result looks like

What a screen reader hears before and after: Tableau export placeholder title versus AI-written alt text and description, shown in English for a Spanish infographic
What a screen reader announces before and after, read from Chrome’s accessibility tree. The infographic is in Spanish; with a language switch, someone who doesn’t read Spanish can understand it in English. Try the live demo. Click the image to open it full size.

Solutions

A solution walkthrough will be presented at the November 2026 DataDev Tableau User Group and added here and to the GitHub repo. Star or watch the repo so you don’t miss it.

Who am I?

I am Pablo Gomez, a Tableau Visionary, Tableau DataDev Ambassador and co-lead of the DataDev Tableau User Group. I believe data can change the way we see the world, and I blend Tableau, design, storytelling and AI to turn data into something people can understand, feel and act on. I also co-lead ComuniDatos, the Spanish-speaking Tableau community. You can contact me on LinkedIn.