I was working more on tables when I ran into another weird issue in VoiceOver. I needed to visually hide a column in a table, but not use display: none so that it could still be accessible by screen readers.

I tried out the “position content off-screen” technique outlined by WebAim.org, and that worked great until I started testing in VoiceOver.

Shown below is a gif of me navigating through a regular table, and doing the VO + C command to read out the column header. Since I’m not hiding anything in the table below, the command worked as expected.

Next, I visually hid a column and then tried the same command. I could navigate every cell in the hidden column just fine, but when I did VO + C, it would read the header of the column immediately next to it. Notice how in the gif below, it reads “Column 2” instead of “Column 1” even though I’m focused on the first column.

I guess the lesson here is to be very thorough when testing for accessibility, and to not forget about keyboard commands. I imagine it’d be pretty frustrating and disorienting for a screen reader user if they are not able to quickly tell which column they are on.

What did I do instead?

To get around this, I ended up using text-indent: -9999px to move the text off-screen. Doing this did not break the VO + C command. You can see in the gif below that the proper table header is read in the first column.

Now this technique still preserves the width of the column, but in my case this was okay because I was overlaying another table on top of where the empty space is (more on that in a future blog post!).

Codepen Demo

See the Pen Visually hiding a column by Tetsuro Takara (@tetchi) on CodePen.