I am a blind user of the computer, registered on Stack Exchange few days ago. I am able to use most of the site without many problems. But there are things that need improvement. An example is the editor, where I have trouble using the editor toolbar (as opposed to directly using Markdown) as the items are neither links nor buttons nor anything else. Some other elements, like up/downvote buttons, are not keyboard navigable. Using some of those features is not impossible, but it is harder in such cases.

  • Opera 12 is where it's at – random Mar 7 '16 at 20:23
  • It is a general issue and I can say that without checking, but I am using newest firefox. – Michał Zegan Mar 7 '16 at 20:24
  • Is the word "ites" in "as the ites there are neither links" an acronym for something, or is it a typo? – jscs Mar 7 '16 at 20:28
  • Of course, it is a new word in english that exists for a minute or so. And seriously, answer edited, thanks – Michał Zegan Mar 7 '16 at 20:31
  • Ah, cool. I would have edited it myself only I couldn't figure out what it was supposed to be. – jscs Mar 7 '16 at 20:36
  • I suggest changing a title in this case may or may not be a bad idea as there are probably other quite similar bugs. That was the reason for my title wording. The same problem as in the editor applies, for example, in stackoverflow's cv creation when you select, for example, where do you code. etc – Michał Zegan Mar 7 '16 at 20:41
  • 1
    Possible duplicate of Keyboard shortcuts are now integrated into the site – Peter Mortensen Dec 3 '19 at 4:18

Fixing all of these to be keyboard navigable and screen-reader friendly is actually quite easy using WAI-ARIA. I tested using Firefox with NVDA after editing the markup using Firebug. Let's go through each set of buttons...

Voting Buttons for Questions & Answers

Currently, the voting buttons are marked up as follows:

<a title="This question shows research effort; it is useful and clear (click again to undo)" class="vote-up-off vote-up-on">up vote</a>

The problem is that this is technically invalid since the anchor has no href attribute, so the browser just ignores it in the tab sequence. Furthermore, a screen reader user is given no programmatic indication whether or not they already voted (or is unable to vote due to lack of rep). The following changes are needed:

<a role="button" tabindex="0" aria-pressed="false" aria-disabled="false" title="This question shows research effort; it is useful and clear (click again to undo)" class="vote-up-off vote-up-on">up vote</a>
  • role="button" changes the element to effectively be a button control
  • a tabindex of 0 puts it in the default tab sequence
  • aria-pressed indicates whether or not the user has voted (should be flipped to true after pressed)
  • aria-disabled is false by default but should be flipped to true if a user doesn't have enough rep to vote

Comment Vote Up & Flag Buttons

This same set of attributes should also be applied to the vote up and flag buttons for comments. However, these have the additional inaccessibility of only appearing when hovering over a comment. The easiest way to fix this is just to do away with that behavior so they are always visible (i.e. remove visibility: hidden; from CSS). If the disappearing act is really too hard to do away with, then another technique needs to be employed that is keyboard-friendly, but creating a focusable element just to hide 2 little buttons seems a bit much.

Editor Toolbar and help buttons

I'd be happy to provide the ARIA markup needed here as well, but would rather not waste my time unless there will be a commitment from the developers to implement it.

  • thanks for the answer. maybe aria has a link role? and that would make it more like the intention was. but not sure. unless it was going to be a button. still what needs to be done is something like this. I have almost no knowledge about aria even though I am blind, except fooling a screenreader that a paragraph is an unchecked checkbox and such stuff that I've done some time ago. – Michał Zegan May 3 '17 at 0:56
  • ARIA does have a link role, but the voting elements are clearly buttons in the UI and act as simple commands (as opposed to a link which is expected to take you to another location). Furthermore, ARIA widget roles are meant exactly for this purpose: to change the underlying semantics of the HTML tag. In this case, you'd want assistive technology to interpret it as a button and not a link. – Steve Repsher May 3 '17 at 15:35
  • sure. here up/down vote and other things have no aria attributes, and in the android app I think those buttons are buttons but unlabelled. or rather no button there is labelled. aghhh – Michał Zegan May 3 '17 at 15:47

You must log in to answer this question.

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