Same picture, { new ( words ) }

A Tableau SVG export of Océanos de Plástico, embedded directly in this page. Switch between the original export and the version after step 3, pick Spanish or English, and see (or hear) what a screen reader gets.

Infografía Sankey: el 80% del plástico que llega al océano viene de ríos. Filipinas aporta el 29,1% y su río Pasig, el 12,1%. Diagrama de Sankey sobre la contaminación marina por plásticos: 460 millones de toneladas anuales, de las cuales el 80% (368 millones) llega al océano a través de ríos y el 20% proviene de la pesca. Por país, Filipinas encabeza con el 29,1%, seguida por India (10,3%), Malasia (6%) y China (5,8%). Los ríos que más contaminan son el Pasig en Filipinas (12,1%), el Ulhas en India (3,5%), el Klang en Malasia (3,3%) y el Chenzhen (3,1%) y el Zhujiang (2,7%) en China. Fuente: Our World in Data. Infografía de Pablo Gomez, Data Monster, Earth Day 2023.

What a screen reader announces

Role
Name (from <title>)
Description (from <desc>)
Language

The top of the SVG right now



Everything below these lines (about 970 lines of drawing) is identical in both versions.







How we got here




1. EXPORTThe same view saved as PNG and SVG.


2. DESCRIBEAn AI read the PNG and wrote the alt text and summary.


3. SHIPship.py replaced Tableau's placeholder title and description.









Good to know


This works because the SVG sits inside the page. If you embed it with <img src="infographic.svg">, browsers ignore the title inside the file, so put the alt text on the tag too: alt="…".


The language switch swaps the title, description and lang together, so the screen reader picks the right voice. Inside a standalone SVG file you can add one <title> per language, but most browsers and screen readers only read the first, so a page like this is the reliable way to offer a choice.


Want to test it for real? Turn on VoiceOver (Mac: Cmd + F5) or NVDA (Windows) and move to the infographic.