Inclusio: charts and diagrams blind and low-vision learners can use on their own

Inclusio turns educational material into formats that blind and low-vision learners can use without someone describing it to them: tactile graphics, audio, accessible SVG. Charts and diagrams are the hard part. It is funded by the National Science Foundation.

My son, Marcello Paiva, and I rebuilt its prototype over twelve weeks in the fall of 2025, as we had built WTFocus together. The brief covered an accessibility review against WCAG 2.2 AA, fourteen user flows, research with the people the platform is for, the information architecture down to its landmarks, and a design system.

We built it in Lovable, on Supabase, so what we tested was a working application and not a set of pictures of one. That mattered later. When a session turned something up, we changed the prototype and the next participant used the change, without waiting on a redesign.

A sidebar you cannot see

When I first looked at the tool, in August, the problems were plain. Cards ignored the switch between dark and light themes. An infinite scroll piled up more than anyone could hold in mind. The accessibility settings were hard to find. And the navigation lived in a left sidebar, beside the content instead of above it.

The sidebar was the one that mattered most. A sighted person takes in a page's layout in a glance, before reading a word: menu on the left, content in the middle, search across the top. A screen reader gives you the same page one element at a time, in source order, and leaves you to build the map yourself. A layout that breaks the usual top-to-bottom pattern makes that map harder to build, for exactly the people the platform serves.

So the question for the first weeks was how to hand someone the map.

The first answer was a key

The plan in September was a keyboard shortcut. Press K, to know the layout, from anywhere, and hear a description of the page. A skip link would point to it, and a first visit would announce that the key existed.

It never shipped that way. A single-key shortcut collides with the keys screen readers already use to move around a page, and the people this is for are the people that collision hurts. A shortcut also only helps someone who already knows it is there. The description needed to sit somewhere everyone passes, on every page, without having to be learned.

A skip link that describes the page

Everyone who uses a keyboard meets the skip links first. Press Tab on any page of the prototype and they appear across the top. Four of them do what skip links do: jump to the main content, the navigation, the search field or the login.

The second one does not skip anywhere. It is a button, and it says Describe page layout.

The Inclusio home page in its light theme, with the skip links revealed across the top after a first press of Tab. Skip to main content wears a thick magenta focus ring; beside it sit Describe page layout, Skip to login, Skip to navigation and Skip to search, each as a bordered button. Behind them is the page itself: a sidebar with Home, Library and Create Content, a welcome message about making digital content accessible to learners with blindness and low vision, Browse library and Login buttons, a video, and three statistics cards. — The first press of Tab. The second skip link is not a link: it describes the page you are on.

On the home page, it says:

Think of this as a welcome center. At top: menu with logo and links. Below that: welcome message with Inclusio title, platform description, and two buttons to browse library or login.

It goes on through the video, the statistics, the feature cards and the call to action, and it ends with what you can do here, primary tasks first.

Every page has its own, written by hand in the same order: what this is like, how it is laid out, what you came to do, what else is here. The library is a digital catalog. The chart wizard is a guided wizard. The SVG editor is a digital art studio. One familiar comparison does more orientation than any list of regions.

A screen reader hears the description through a live region. A sighted keyboard user gets it on screen, in a dialog that holds focus, closes on Escape and hands focus back to the button. On a phone the same dialog closes with a tap or a swipe down.

Eight people, and what they changed

We interviewed eight people: educators of blind students, accessibility researchers and assistive-technology specialists. Five of them use a screen reader, and navigated the prototype with one while we watched. One came back for three sessions, so we could test a change on the person who had asked for it.

The feature they met first was not the one described above. Its label read Page layout structure, and its descriptions talked like a developer: nav, hero banner, metric cards. Screen reader users asked for plain words. The button became Describe page layout, and the descriptions were rewritten the way you would explain a room to someone standing in it.

The participant who came back three times reviews products for a living, with a screen reader. They called the feature very helpful and rare, and asked that it be kept as the thing that sets Inclusio apart. Another asked for the description to open inline, under the button, instead of in a dialog. That one is still open.

The sessions reached past the skip links. Skip to login now goes straight to the login page, as one participant asked. The content creation flow had started as the multi-step wizard everyone builds, one screen after another. Participants asked for the opposite: every step on one page, each expanding in place, so nobody is marched through screens they cannot see the end of. That is how it works now. And the charts the platform generated came out as static images to a screen reader, which is the kind of gap you only find by watching someone try.

Not only for blind users

A platform built for blind learners still has to work for the sighted teacher making the worksheet, the student with low vision, and the parent who is color blind. Most of what made it work for them came out of the same decisions.

Charts are the clearest case. The two series in a comparison differ by pattern as well as color, diagonal stripes against horizontal ones. So the chart still reads in grayscale, to someone who cannot tell the blue from the orange, and once it is embossed as a tactile graphic. Every bar carries its value, so nobody has to read numbers off an axis. The labels are real text, not pixels, which keeps them sharp under a screen magnifier.

A bar chart titled Weekly Temperature Comparison: 2000 vs 2015, as the chart wizard previews it. For each day from Sunday to Saturday, a blue bar with diagonal stripes for 2000 stands beside an orange bar with horizontal stripes for 2015, each outlined in black, with its value printed above it: 53 degrees is the lowest, on the Monday of 2000, and 71 degrees the highest, on the Monday of 2015. The vertical axis runs from 0 to 80 degrees Fahrenheit. The legend reads 2000 Temperature (Blue with diagonal stripes) and 2015 Temperature (Orange with horizontal stripes). — A chart the wizard made from a one-week CSV of temperatures. Pattern and color together, a number on every bar, and a legend that names the pattern in words.

The chart's description is never hidden, either. On every resource page the short and long alt text sit under the image, where a sighted teacher can read what a student's screen reader will say. That is also how you catch a weak one.

A resource page for a triangle diagram, in two parts. Above, the diagram: triangle ABC with dashed lines from each corner to the midpoint of the opposite side, marked M1, M2 and M3, and arcs at each angle. Below it, a File Information panel lists the title, a description, a short alt text reading Annotated triangle with labeled vertices, and a long alt text that talks about metadata along each edge without ever naming the three medians. — The alt text, on the page with the image. Anyone can see that this long description never mentions the three medians the diagram is drawn to show.

Making a chart is built the same way. The wizard opens full-screen, as one focused task with nothing else competing for attention. Its steps sit on one page and say where you are in words, Current and Locked, not by color alone. And the drop zone that asks you to drag a file in also lets you click to browse or paste the data, for anyone who cannot drag: a tremor, a switch, a keyboard.

The Create Accessible Chart screen, open full-screen over the app, with a close button at each end of its title bar. A progress bar runs across the top. Below it, step 1, Upload Data, is open and marked Current: a note on file requirements, a link to download a sample temperature dataset, and a dashed drop zone reading Drag and drop your file here, with Click to browse files or paste your content beneath it. Steps 2 to 4, Choose Chart Type, Generate Chart and Preview Chart, sit closed below, each marked Locked. — Every step on one page, its state in words, and a way in that does not require dragging.

What I would want copied

The prototype carries sixty or so accessibility components: page-change announcements, focus management after navigation, settings for contrast, text size, spacing and motion. Most of them are the work any accessible product needs.

The skip link is the one I would want other teams to take. It costs one button and a paragraph per page. It needs no new key to learn and no setting to find. And it answers the question every screen reader user has on a new page, before they have to work it out for themselves.