28

One of the baseline principles of web accessibility is that all functionality of a site should be available via keyboard navigation alone. It's an important baseline to accommodate those with muscular difficulties or those who are blind (and would rely on a screen reader), who would be unable to use a mouse.

Users reliant on a keyboard (including blind users) cannot upvote or downvote posts, or upvote comments. The buttons cannot be reached via the tab key, and can only be reached via clicking them with the cursor.

As with the comment flag button being unreachable, this occurs because it is an anchor element that isn't a link and which has no tabindex set. Fixing it would involve making it either a <button type="button"> or giving it the attributes <a tabindex="0" role="button">. ARIA guidelines would suggest use the button element, but if it must stay an anchor element, you want to give it the button role because it isn't a link or anchor, it's a button.

Thankfully the accept checkmark is keyboard accessible and exists in tab order (because it has a href attribute), but they cannot give their feedback via voting.

This bug existed in the old-style themes and persists in the new themes being rolled out.

Improve this question
4
  • Upvoted this question with the keystrokes v and u (partially contradicting what you write, but I get what you mean).
    – Glorfindel Mod
    Commented Aug 7, 2018 at 19:10
  • 1
    Oh, good, I'm glad those exist somewhere then. I don't imagine behing behind a well-hidden preference is an acceptable hurdle for the purposes of accessibility though, yeah—only power users would really find out those exist.
    – doppelgreener
    Commented Aug 7, 2018 at 19:13
  • 1
    @JoeFriend Thanks for planning this. I suggest you may also want to have someone sit down with a screen reader (NVDA is free and popular) and ensure they can naturally figure out post scores whilst they're working in that region of the page. It will probably be eye-opening for anyone who hasn't done so already to turn on a screen reader, switch off their monitor, and try to use the site.
    – doppelgreener
    Commented Aug 8, 2018 at 8:30
  • @doppelgreener Yep, there are many issues we need to address around screen readers and our sites. I'm working to prioritize this work so that everyone can access content on the sites. Then we will focus on full participation. Thanks for raising your concerns.
    – Joe Friend
    Commented Aug 8, 2018 at 14:27

1 Answer 1

Reset to default
15

This is fixed.

The whole voting sidebar is now a flex-box column of buttons with proper* tabbability and accessibility, thanks in no small part to the adoption of universal theming and out Stacks design system.

One thing you'll probably notice is that the favorite button is smaller and the voting arrows are a little bigger. This is based on the feedback from the designer when we converted the icons from a sprite to SVG. Another is that you get focus highlighting when you tab but not when you click with a mouse, that again is by design and is a behavior we wanted to keep for non-button-looking buttons on the site.

* By proper I mean it does what I expect it to do in my browsers and with Voice Over. Accessibility is tricky.

Improve this answer
4
  • Excellent work.
    – doppelgreener
    Commented Dec 20, 2018 at 21:32
  • Previously one could use userscripts to restore the site specific buttons, e.g. by modifying .vote-up-off{}. What is the name of the new element?
    – samcarter_is_at_topanswers.xyz
    Commented Dec 21, 2018 at 16:37
  • 3
    @samcarter You can match on button.js-vote-up-btn[aria-pressed="false"] and button.js-vote-up-btn[aria-pressed="true"] for upvotes and button.js-vote-down-btn[aria-pressed="false"] and button.js-vote-down-btn[aria-pressed="true"]. I would visibility:hidden the internal SVG and either apply the sprite outright or to an absolutely positioned :after. THIS ADVICE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED. 🙂
    – Brian Nickel
    Commented Dec 21, 2018 at 17:33
  • @BrianNickel Thank you very much! That helps a lot! Edit: It works great! Thanks again!
    – samcarter_is_at_topanswers.xyz
    Commented Dec 21, 2018 at 17:35

You must log in to answer this question.

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