WebAIM - Web Accessibility In Mind

E-mail List Archives

Marking up file diffs in a table properly

for

From: Marco Zehe
Date: Jul 3, 2015 6:10AM

Hi everyone, especially those of you who like to juggle data tables!

I have a rather developer-centric issue I'd like to throw out for
discussion there. This concerns how patches, or diffs, are being displayed
in Github, and other tools. At Mozilla, we use a software called Review
Board from https://www.reviewboard.org/. Those have in common that they
display side by side diffs in a tabular fashion. The problem is that all of
these implementations I've seen so far don't give enough semantic
information to screen readers to give a really good experience. But before
I approach Review Board with this, I would like to gather some input to see
if we can better the situation at all, or if current table markup may not
be sufficient.

Here's a review request you can look at, by yours truly:
https://reviewboard.mozilla.org/r/12135/ - This is the general review
request.
https://reviewboard.mozilla.org/r/12135/diff/2#index_header - This is the
complete diff, the interesting stuff starts in the third data table on the
page.

The first few rows of the table contain the file name, and how many lines
there are before the diff starts, with the option to show more context.
Then, a few lines that are identical, and then, line 74 starts where the
first difference occurs. As you can hear if you use this with a screen
reader, the reading of column and row headers is not very nice.
Specifically, the file name from the very top of the table, within the
thead, is repeated over and over again.

Second problem: The old and new files can only be distinguished by their
column numbers (1 and 2 are old, 3 and 4 are new).

And third, it is not immediately obvious if the line was changed, stuff was
removed, added, or edited. The line numbers in both cases are marked as row
header, which *seems* correct, but I would want some more semantics for the
columns at least, and something more useful than just the file name
repeated, at that.

From your experience of working with accessible tables day to day, what
would be the best solution here? Dissolve the single column header with its
col span and put extra column headers with off-screen/collapsed text in it?
Use different column headers for different sections and work with scope,
axis or whatever attributes exist for these cases?

I personally feel a bit overwhelmed with all the possibilities data tables
have to offer, so I thought I'd call out to you ladies and gents for some
ideas/advice/suggestions!

Thanks!

Marco