What version are you running? 2.0.17
What's the URL of the page containing the problem? https://reviewboard.mozilla.org/r/12135/diff/2#index_header
What steps will reproduce the problem?
1. Run the above URL with Firefox and the screen reader for the blind NVDA from http://www.nvda-project.org.
2. After page loads, press Control to silence speech, then press t 3 times to go to the third table on the page, which contains the first file.
3. Press Control+Alt+Left, Right, Up or DownArrows to traverse the table cell by cell and listen to the output.
What is the expected output? What do you see instead? I would love to hear some more descriptive information about the diffs. Is the line changed? Is it an added line, or a removed one? And the file name should not repeat over and over and over.
What operating system are you using? What browser? Windows 7, 8/8.1, or 10, Firefox 39 release.
Please provide any additional information below.
From the original bug I filed against Mozilla's instance of Code Review at https://bugzilla.mozilla.org/show_bug.cgi?id=1180600, with some additional info:
The side-by-side diff isn't bad at all per se, but it could use some improvements to be more friendly to screen readers. Here are some of the proposed changes:
1. Make the file name, which is now a th in the first row of the table, a caption element instead. Each diffed file in a commit or set of commits gets its own table, so it makes semantically more sense to make this the caption of the table rather than an arbitrary header cell that gets repeated by screen readers over and over. It is also semantically more correct.
2. Add text to the line number header cells that is only visible to screen readers (e. g. collapsed via CSS rules) that annotates what the change is. Is it a changed line, a newly added, or a removed one? Right now, these things are, as far as i can tell, only communicated via color. Making this information part of the header cells that contain the line numbers will make this information immediately accessible to screen reader users. Information on how text can be made accessible to screen reaers, but visually hidden, can be found here: http://unobfuscated.blogspot.de/2015/01/updated-offscreen-techniques.html
3. Make the diffs more keyboard friendly by making them keyboard actionable, so one doesn't have to use the mouse to add a comment. Github has something similar, which works really well. This would entail binding the click (or double click?) handler to a keypress on either the line or line number cell, so it becomes actionable. Probably not tabable, because that would make it cumbersome for keyboard users, but enabling screen readers to execute on the line number by making it focusable via tabindex="-1" would help.
I am Mozilla's senior accessibility QA engineer and evangelist and am experienced in mentoring these kinds of changes. I'd be willing to help along the process of making this more screen reader friendly.
