Status: New
Owner: ----
Labels: Type-Defect Priority-Medium

New issue 3912 by Make side-by-side diffs more screen-reader friendly for blind users

*** You must complete this form in its entirety, or your bug report will be
*** rejected.
*** If you have a security issue to report, please send it confidentially
*** Posting security-related issues to this bug
*** tracker causes us to have to do an emergency release.
*** For customer support, please post to
*** If you have a patch, please submit it to
*** This bug tracker is public. Please check that any logs or other
*** that you include has been stripped of confidential information.

What version are you running? 2.0.17

What's the URL of the page containing the problem?

What steps will reproduce the problem?
1. Run the above URL with Firefox and the screen reader for the blind NVDA from 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, 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:

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.

You received this message because this project is configured to send all issue notifications to this address.
You may adjust your notification preferences at:

You received this message because you are subscribed to the Google Groups 
"reviewboard-issues" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
To post to this group, send email to
Visit this group at
For more options, visit

Reply via email to