Voting in an election requires drag-and-drop interaction and is currently impossible using only the keyboard. This mode of interaction excludes anyone who cannot use a pointing device, such as blind users.

Election interface, see description below image

The above screenshot is from the currently ongoing election on Russian Language SE. Below the link "Learn more" (which can be opened using the keyboard), there is an area with a gray background onto which the candidates you vote for can be dragged and dropped. When you tab through the interface, you move from the link "Learn more" to the first candidate's avatar, then the second candidate's, etcetera; after tabbing through all the candidates, you jump to the link "Russian Language" in the footer. The "grabber area" (the six dots) to the left of the candidate's name and the info link are not in the tabbing order. (If you are new to accessibility, see for example Keyboard access on the website of Arizona State University.) In fact, both the "grabber area" and the info link have the aria-hidden attribute, telling assistive technology to ignore those elements. These UI elements have no keyboard listeners, so even replacing the aria-hidden attributes with tabindex="0" to ensure they can receive keyboard focus, is not sufficient. (Since they are SVG-elements, aria-label or a similar mechanism for text alternatives would also be necessary.)

In addition, after voting, the "x" that appears to the right of a candidate's name (to unselect the candidate) is not keyboard-accessible either.

This is not the right place for a tutorial on accessible rich internet applications. Instead, I'll point to a few resources on accessible drag-and-drop interaction to show that this is not a recent concern:

This issue is not to be confused with Can we make it so that we can vote with the keyboard?, which is about voting on questions and answer, which relies on different user interface components than elections.


You must log in to answer this question.

Browse other questions tagged .