Hyvor Talk Accessibility

Suggestions & Feedback
3

Just worked on an accessibility update for Reactions.

Adding some details here for future reference and for others to review.

Unlike ratings, there’s no standard way for the reactions widget. I found a couple of ways to implement accessibility for reactions (a group of buttons). Thanks for the Google Sheet @uhrwebsupport, it helped!

Option 1: Use radiogroup and <input type="radio">

This was the most promising one, as most of the keyboard navigation will be handled by the browser. But, there were two problems:

  • The browser doesn’t allow deselecting after a radio input is selected (Space doesn’t reverse). This could be solved by using Javascript, but I guess at some point this might confuse users.
  • Tabbing into the radiogroup focuses the first input, but arrows then select* (focus) the next one.

So, Option 1 didn’t fit right.

Option 2: role="group" with buttons. Make buttons togglable using aria-pressed

There were some issues with this option as well:

  • Each button can be tabbed into separately. The reactions widget is shown at the top of the page, so it will take a lot of time to go through each button to reach the comments input, which is not what a user might want. Considering this, Option 1 was better, but then, I added some custom logic to handle tabindex:
    • If no reaction is selected, the first reaction can be tabbed into
    • If a reaction is selected, that reaction can be tabbed into
    • Arrow keys can be used to navigate

The final result looks like this:

ezgif-1-8ad0b1105b

The HTML looks like this now (unrelated attributes removed):

<div 
    role="group"
    aria-labelledby="reactions-title"
>
    <div id="reactions-title">What is your reaction?</div>
    <div>
        <button
            aria-label="Wow"
            aria-pressed="false"
            tabindex="0"
        >
            <!-- Image and text -->
        </button>

        <!-- Other buttons -->
    </div>
</div>

We have added

  • role="group" to the outer element to group everything
  • aria-labelledby for the title
  • aria-pressed to buttons to make them togglable (voiceovers work nicely here)
  • tabindex to handle the “tab into” logic

Probable issues / improvements:

  • Users might not recognize that keyboard navigation is possible. We may need a hidden i18n aria-describedby element?
  • Well, custom logic for accessibility is always risky. We may need to update the navigation and tabindex logic based on feedback from real users.

(We haven’t released the update yet, waiting for other accessibility improvements as well)