Make like/unlike buttons more accessible #5278
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
javierm
force-pushed
the
vote_contrast
branch
from
a45f630 to
f6064d4
Compare
We were keeping the same style and width when they were pressed, so we can simply overwrite the color.
We were using the same selectors three times. Since we're going to change that part of the code, we're simplifying it so we don't have to do the same changes three times.
The colors we were using (gray for unpressed buttons and green or red for pressed buttons) didn't contrast well against a white background, so we're now using darker colors. However, with darker colors, using solid icons for the unpressed buttons makes it harder to differentiate when a button is pressed and when it isn't, particularly for color-blind people. So we're now using regular icons for the unpressed buttons and solid icons for the pressed ones.
Since we were styling pressed buttons the same way as buttons on hover, a person hovering on the button and then clicking it wouldn't notice that the buttons had been pressed unless they noticed that the number and percentages of votes had changes. They wouldn't notice the changes when unpressing the buttons either, since, after clicking the button, the cursor would still be over it, and so the hover styles would apply. Furthermore, it was hard for mouse users to realize that a button could be unpressed, since the style of pressed buttons didn't change on hover. So we're now changing the icons on hover without changing the background. This way all four states (unpressed, unpressed on hover, pressed, pressed on hover) are styled in a different way.
We added the feature to undo a vote and made it obvious for people using screen readers using the `aria-pressed` attribute. However, for sighted people, the only way to know a button can be unpressed is to try to press it again and see what happens. The most obvious way to indicate it would be to add a text indicating that you can undo your vote. However, that'd require changing the design quite a bit. So, after trying a few techniques, we're using a classic approach browsers have used by default for years: using an inset border for pressed buttons and an outset border for unpressed ones. It might now be enough, though; we haven't done usability tests to confirm this point. Since icons to like/unlike comments don't have a border, I'm not sure what to do in this case; the icons are small and that makes it hard to style them in a distinct way. So for now we're not changing these icons.
Even if pretty much nobody uses a browser with JavaScript disabled when navigating our sites, there might be times where JavaScript isn't loaded for reasons like a slow internet connections not getting the JavaScript files or a technical issue. So we're making it possible to still use the like/unlike buttons in these cases.
javierm
force-pushed
the
vote_contrast
branch
from
f6064d4 to
7070b09
Compare
taitus
approved these changes
Oct 19, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
References
Objectives
Visual Changes
Before these changes
After these changes
Notes
I'm not sure the techniques used in this pull request are enough to make these buttons usable/accessible 🤔, since it might still not be obvious that pressed buttons can be unpressed. In particular, the fact that buttons to like/unlike comments can be unpressed is still unintuitive IMHO.