Social Media Accessibility: Tables Edition

It is frustrating that social media sites allow for large pictures of text, but rarely have a way to present that same information in an accessible and machine readable form using native HTML.

For example: I just saw a great programmer joke that's a screenshot of a table. There's no reason that couldn't have been presented as an HTML table except that the platform just won't do it.

As an image, the joke is completely unreadable (by default) to screenreaders. The poster could transcribe the table to alt text. That's a lot of work, since there's no good system for preserving alt text when downloading/uploading images like this. Each person who wants to share the joke image has to recreate the alt text each time they post it.

Images of text suck. They are not accessible. They exist to get around length limits (on platforms that limit post size) and to preserve formatting. Both of these problems are solvable, but most social media platforms don't seem to care to do much about it.

With CSS we could put a table like that in a constrained-size viewport and make it scrollable (and have a "click to expand table" button). A screen-reader wouldn't even notice that. It's just a table in that case, complete with a caption and comfortable navigation tools. For non-screenreader users plain text is also more accessible since it would follow the page styles for fonts, dark/light-mode, allows for smooth zooming in, etc.

Anyway, I ran the image through an OCR tool, because a lot of screenreaders are incorporating that type of thing, but the OCR tool put all the text from column 1 before the text for column 2. The rows were completely disconnected, which ruined the joke.

From that I created a basic HTML <table> version and it was less than 2KB in size, whereas the image was 70KB. For federated social media, multiply that by the number of servers that get their own copy. Each viewer also has to download their own copy. In this specific case, we are using 35x as much storage and bandwith to transmit information in a form that makes it harder for many people to read it.

Here is the joke as an HTML table on my web site — which is approx 270KB due to 265KB of not-HTML stuff like images, web fonts, and javascript files. The HTML for the page itself is under 5KB.

Obviously there is one downside to sharing jokes like this as HTML instead of images... it's not easy to copy/paste the table out of a web page. But again, that could be solved by having a "Copy Table" button that would either copy the HTML or convert it to Markdown, which could then be pasted into the post, provided the platform supported tables in either format.

While the example in this case was "just" a joke, I see lots of images of tables that contain Serious Information. And even if it is "just" a joke, doesn't everyone deserve to be in on the fun?