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.
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
tabindexof 0 puts it in the default tab sequence
aria-pressedindicates whether or not the user has voted (should be flipped to true after pressed)
aria-disabledis 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.