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.

3 Answers 3


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> 


<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>
  • 1
    Hi @jeff-atwood. Changing from <span> to <a> tags does not fix this issue because it is referring to comment voting and flagging which is not keyboard accessible because it requires a mouse hover. Furthermore, all of these voting and flagging elements (questions, answers, and comments) really should be marked up properly using ARIA to be accessible. My recent answer on a related post explains how to do this properly. Thanks. May 3, 2017 at 15:58

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.


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'}); })()
  • The bookmark helped, thanks. Maybe a group of so users should do a section 508 VPAT on the site? It'd be one way of helping the community understand accessibility with examples they could follow along with.
    – Jared
    Sep 28, 2010 at 13:48
  • This would be a huge job; the sight is very complex and huge in extent. Would anybody be able to pay someone to do it? Aug 14, 2013 at 17:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .