Make comment voting and comment flagging accessible

Question

According to this comment voting isn't accessible. It would be nice if both comment voting and flagging were made accessible to screen reader users since they both have the same issue of needing to be moused over.

Answer 1

Agree, using <span> for action elements was not our smartest move in retrospect, and we switched back to the more traditional <a>.

Specifically, we changed from:

<span class="vote-up-off" title="...">up vote</span> 
<span class="vote-count-post">12</span> 
<span class="vote-down-off" title="...">down vote</span> 

to...

<a class="vote-up-off" title="...">up vote</a>
<span class="vote-count-post">12</span>
<a class="vote-down-off" title="...">down vote</a>

Answer 2

One thing to remember about screen reader accessibility: screen readers generally use speech output or to some extent, braille. In both cases, the output is essentially one-dimensional - i.e. there is no width and height, everything is one long ribbon of stuff. Good semantic HTML is thus very important here because the screen reader provides various ways of navigating html documents which drammatically speeds things up for their users and increases comprehension and cognative load. As things stand currently, a screen reader user can easily jump to the "N answers" heading, but then must move through the answers and comments basically one line at a time. Imagine, as a sighted person, if you had to read a StackOverflow page on a one-line display. How crazy would that make you after about ten minutes?

In this thread for instance, we have one answer and several comments. Actually, the page claims there are two answers here (soon to be one more after I post this), but it is very difficult for me to know where the boundary between answers and comments lies, and the boundary between comments. It seems as though a username introduces a comment, so wrap this in a heading tag with proper heading level.

It appears that answers start with something like: up vote 6 down vote Where up vote and "down vote" are links. This is fine, although might be more helpful to begin each answer with "answered by blahblah - "up vote" N "down vote". In any case, wrap this introductory stuff, whatever it may be, in a heading as well.

Doing this would drastically speed up browsing for those of us who depend on screen readers.

Answer 3

One way this issue could be addressed is by giving each of these items (the up vote element, down vote element, ETC.) an aria role of "link". That should at least fix it for screen reader users whose AT supports ARIA, which most recent ones do. Giving the elements a tabindex of 0 and making it visually obvious when they have focus should also solve it for keyboard only users.

Update: I through together a quick bookmarklet which seems to fix the problem: http://www.cannonaccess.com/2010/09/accessibility-bookmarklet-for-stackoverflow-com-and-friends/

javascript:(function() { $('a, .vote-up-off, .vote-down-off, .star-off')
    .attr({role:'link',tabindex:'0'}); })()