How I design accessible tables for a wandering eye
My eyes don’t work properly. As I read they drift away from where they should be, which means I can skip words, sentences, even entire paragraphs. I’ll get to the end of a block of text, realize it doesn’t make sense, then have to go back and find what I missed. It’s not an uncommon problem, about 1 in 20 people suffer the same issue to varying degrees. And no, it isn’t dyslexia.
Numbers is where it causes me problems, particularly tables. There’s no inherent meaning in a series of numbers: the number 21 can easily follow 3 as 81. As my eye moves along the row it happily skips to the next one, or jumps a couple of columns without me realising. Or at least I do if the data isn’t presented in the right way.
A number salad from the IMF
What follows is a table from a report by the International Monetary Fund. Released in July 2022, it sets out how economies behaved, and are expected to behave from 2020 to 2023. It’s heady stuff, and I use it to illustrate a point.
Look at the figures for the United Kingdom. Chances are you can read them reasonably comfortably. You can move systematically from left to right and read -9.3, 7.4, 3.2, 0.5 etc.
My eye drifts the further along the row I get. The first time I read it my eye drifted upwards and I was reading Japan’s numbers, then France’s.
There’s no intuitive meaning in these numbers. They’re not like words where this that and I know I skipped ‘follows’. 0.4 could as easily follow 1.0 as any other number, and there’s no anchor for my mind to latch onto and scream, “You missed a bit”.
Creating meaning from nothing
As there’s no obvious meaning between the numbers, I have to create it. I have to connect the values on the row together to make it easier to track along them, and spot when I’ve drifted.
The table below is the default for Apple Numbers, but it could be Microsoft’s Excel or Google’s Sheets. The borders do help, but there’s nothing to draw the eye along. Every cell is linked to every other and looks the same. Although better, it’s still possible to drop down a cell or up a row.
Alternating background colors on rows gives the eye a firm anchor to track along. You’ll find some default styles in your spreadsheet app, which makes setting this up as easy as clicking a checkbox. One word of caution: the alternative color needs to stand out, which isn’t always the case. If in doubt, err on the side of a darker shade background.
The colors help, but there’s more to the table. The data has been categorized into economic size and geographies. Simple additions of bold category headings and using a blank row greatly improve readability.
From rows to columns
Another dimension to the data comes from its columns. 2020 and 2021 are historical results, while 2022 and 2023 are projections. The IMF distinguishes these by coloring the columns, although they’re lumped together with the same one. Repeating this approach on the improved table would reintroduce the potential for the eye to drift.
Using color can get complicated, from both reading and design perspectives. The simplest method I’ve found is a dividing line on either side of the data block.
I’ll use a dark color to surround the category (in this case actual versus projected), with a lighter shade for columns within.
Not every column needs a division though, as that can also create confusion. I’ve found a border between every other column to be sufficient.
Defy convention and be accessible
There are some conventions that undermine readability, most notably in company accounts. It’s not uncommon to find formal accounts that are little more than number salad with some bold fonts spread around.
I appreciate these conventions have been around for a while, but they cause problems. Most of the formal accounting statements I design for clients follow the style I’ve set out here. The general reaction is once people get over the “they look different” there’s universal agreement they’re easier to read.
Last words
If you are creating tables for your report or website, please consider those of us who find them difficult to read through no fault of our own.
- hide the default grid on your spreadsheet
- use a different background color on alternating rows to give the eye a marker to track along
- differentiate categories of data on rows with fonts and spacing
- differentiate categories of data on columns with border lines, not color.
My name is Ross Hori
I'm a freelance writer, designer and photographer. By day I create articles, features and reports. At night I take photos and write fiction. Find out more.
Follow Me:
Subscribe to my weekly(ish) email for notes from my ongoing research, photos and more. Just pop your email address in the box below.
