(Accessibility) Keyboard navigation is really bad
tracked
Patroll
Navigating vrchat.com/home using a keyboard (or a different similar assistive tool) is pretty much broken or unsupported.
This is an important aspect for accessibility or just people who use keyboard to navigate around.
Steps to reproduce:
Use TAB to navigate around the website, there are many different problems along the way.
Most prominent problems:
Many interactive elements do not have a focus indicator or it's barely visible.
- E.g. left menu buttons, favorite avatars list filter dropdowns, "Invite me" in Friends wing, and many more.
Some elements are inaccessible through keyboard navigation or are just not using semantic elements like <button> or <a> or tabindex attribute to even be focusable.
- (Some JS messing stuff up) Try TABing to the notifications button, hit ENTER to interact with it, a panel with notifications opens, but you cannot keyboard navigate anymore. There are now errors popping up in console with each click of TAB.
- Favorite avatars -> Edit Mode -> cannot tab to "Add to selection", because it's a <div> (it's nice that it has "aria-" and "role" attributes, but it doesn't make it focusable, there are more examples like this).
- accept/cancel/etc.. "buttons" (they are <div>) in notifications, and more.
Many interactive elements miss alt or title attribute.
These are just a few examples
Log In
This post was marked as
tracked
StormRel
needs more information
StormRel
Hello! Thanks for reporting this. A number have updates have gone out since this post, could you confirm this issue is still occurring?
eladnarra
StormRel: Not the OP, but yes, a lot of these issues are still occurring.
> Many interactive elements do not have a focus indicator or it's barely visible. E.g. left menu buttons, favorite avatars list filter dropdowns, "Invite me" in Friends wing, and many more.
Yup, this includes the logout button in the nav, too.
> (Some JS messing stuff up) Try TABing to the notifications button, hit ENTER to interact with it, a panel with notifications opens, but you cannot keyboard navigate anymore. There are now errors popping up in console with each click of TAB.
Still happens - keyboard traps like this are very bad. The only way I was able to escape the trap was by refreshing the page.
> Favorite avatars -> Edit Mode -> cannot tab to "Add to selection", because it's a <div> (it's nice that it has "aria-" and "role" attributes, but it doesn't make it focusable, there are more examples like this).
Still happens - tabbing after enabling edit mode moves you to the delete button of the first avatar, skipping the "add to selection."
It's likely that the others mentioned are too, I just wasn't able to figure out exactly what section they were looking at. All of these are only examples of issues showing up in other places.
To recap:
- many buttons/links/interactive elements are missing focus indicators
- quite a few buttons/interactive elements cannot be focused by the keyboard and/or activated (divs without tab-index and/or without event listeners)
- notifications drop down is a keyboard trap