WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Marking up file diffs in a table properly

for

From: deborah.kaplan@suberic.net
Date: Jul 3, 2015 6:12PM

Marco,

This isn't what you're asking, but one thing GitHub does is awesome for my use case (voice / keyboard, Firefox, Mouseless Browsing add-on): they add aria-label and role=button to the invisible span that gets the plus-sign on hover, to indicate you can click in that location to add a line note.

The attributes don't add keyboard accessibility -- I guess adding tabindex to every line in a lengthy diff would be terrible in its own way. But they do expose all the lines to Mouseless Browsing, which means I can leave line diffs without being able to mouse over them.

I tested in the review board tool adding aria-label and role=button to the TH elements, and it worked great.

(I have ideas about the semantic markup, but I feel like this is a good time to leave the thoughts to the daily screen reader users.)

Deborah Kaplan


On Fri, 3 Jul 2015, Marco Zehe wrote:

> 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
> > > > --