Hyvor Talk Accessibility

Accessibility is hard to get right with Hyvor Talk because of the many customization options we provide. However, we are working hard on improving accessibility for all users. Here’s our progress.

Reviewed for accessibility:

Awaiting review:

  • Comment Writer
  • Comments display
  • Reply, share, etc. buttons

If you have found any issues with accessibility in Hyvor Talk, please share your feedback below. We promise a fix within 72 hours for any accessibility issues with reviewed components.

I think I shared this before, but here’s the full issue list (with recommended solutions) from our office’s accessibility review: Hyvor Violations List August 2023.xlsx - Google Sheets

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)

Hi folks, also just checking in here for updates on the accessibility front as this is becoming more urgent to our continuing use of HT. Any info would be appreciated, thanks!

Just checking in again! We’d love to be expanding our use of HyvorTalk, but I’m worried about shining a light on it and getting flagged for not meeting our accessibility standard and having to stop using it altogether. Any idea when this might be released? Thank you for your commitment to improving the accessibility!

Hey!

The development part of this is complete. We’ll be releasing it in the next update, which is quite a large one with newsletter/membership features. We expect to release it around the 20th of July.