I am referring to what the screen reader speaks for the button you press to like a post. Or maybe you can somehow add other reactions, but my screen reader does not tell me about that at all. The only thing I get a label on is the element that shows the current like count, if 1 or higher. If it is 0, that control isn’t there. But the button I have to press to add a “Like” reaction is unlabeled for my screen readers on Windows, Mac, and iOS.
I am blind, so am not using a mouse. And the title attribute in general is problematic for touch interactions anyway, since there is not usually an easy way to trigger a mouse hover.
Hope this helps…
To be clear, I am referring to the button
#discourse-reactions-actions-916340 > div > div.discourse-reactions-reaction-button.my-likes > button. That button has no title or aria-label, only an SVG inside which is aria-hidden. And even if it weren’t, that SVG as well as its children don’t have any information a screen reader could use, either. So the solution here is to:
- Give this button an aria-label, that says something like “Like this post” or “React with Like” or similar. Since there may eventually be more reactions somewhere, this wording needs to be explicit to which reaction is being added.
- The element that holds the count,
#discourse-reactions-counter-916340, should probably get some better information as to who actually reacted with which reactions. I don’t know how sighted people get to that, if you click on that number and then get a popup somewhere. But that also needs to be made accessible to screen reader and keyboard users.
- If other reactions are to be added at some point, they will also have to be made accessible for not only mouse, but also touch, keyboard, and screen readers.
Right now, at least for me, the widget seems to only allow “like” reactions.
Sorry for the multiple posts, but this shows how meticulous this sometimes can be to find the cause for something. The title attribute on posts that are not mine, is currently on the parent div of the actual “like” button. However, for a screen reader to pick it up, the titlle needs to go on the button itself. Screen readers do not pick up titles from just any element. It’s been abused too much for that generalization in the past 25 years. So, if you move the title attribute to the
<button> child element, the screen reader will pick it up properly.