Labels: Type-Defect Priority-Medium
New issue 3912 by marco.z...@gmail.com: Make side-by-side diffs more
screen-reader friendly for blind users
*** READ THIS BEFORE POSTING!
*** You must complete this form in its entirety, or your bug report will be
*** If you have a security issue to report, please send it confidentially
*** secur...@reviewboard.org. Posting security-related issues to this bug
*** tracker causes us to have to do an emergency release.
*** For customer support, please post to reviewbo...@googlegroups.com
*** 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
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
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
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
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
To unsubscribe from this group and stop receiving emails from it, send an email
To post to this group, send email to firstname.lastname@example.org.
Visit this group at http://groups.google.com/group/reviewboard-issues.
For more options, visit https://groups.google.com/d/optout.