🌲 Accessibility Feedback

[onpon4]

What do you want to see?

I'm not entirely satisfied calling this a "feature request" because accessibility isn't merely a feature, but "bug" didn't seem to me to fit either. In any case, it seems to me that Revite doesn't do anything to help with screen reader accessibility.

I'm sighted and don't depend on a screen reader to read things, so I'm not the best person to give specific advice on how to properly make Revite accessible, but I noticed two problems:

1. No landmarks, headings, etc of any kind are used. These are essential to screen reader use because they're how keyboard navigation throughout a page is done. Discord, for example, has a level 3 heading for each message (indicating the display name of the message author and the time it was posted), and landmarks which help locate navigation sections and the main content. Revolt, on the other hand, just has a whole lot of div tags (which the screen reader generally doesn't know what to do with).
2. Custom emoji alt text seems poorly thought out. I came across a custom emoji that, when I got to it, caused the screen reader to read out a whole crapton of numbers. This is not useful to a screen reader user. Using the name of the emoji (as is done with standard emojis) would be much better.

These are just what I saw at a glance, and I think a more thorough screen reader accessibility audit from someone more knowledgeable than me would be warranted. The open source alternative to Discord should be more accessible than Discord, not less.

🦇

[insertish]

Messages from #Accessibility on the lounge:

The web app could use a lot of cleaning up in the way of keyboard navigation. Right now it's super clunky: Have to hit tab x2 for every server icon to be able to actually hit enter to get into a server, for example. Focus styles outside of the login/register page are also lacking - for the web app. Firefox has a decent outline by default for links/buttons, but this isn't something that's consistent across all browsers.

Couple :focus/:focus-within and :hover styles together, with proper outlines on text inputs could be a huge help. Right now it's difficult to discern where there is keyboard focus on most elements that aren't expressly text area/input or links. And many of those could use proper <label>s as well.

There's a lot of elements that function like links or buttons that also cannot be focused on with the keyboard at all because they are <div>s with an onClick event. The settings menu is one offender, where you'll hit tab expecting to focus on the "profile" link [div with an onClick event], but instead you'll find focus is on the sidebar container, then will actually jump all the way down to the link for Source Code (which is an actual link) and further tabbing will move focus to the links for donating and the current commit, rather than cycling through any of the actual options that would let you access all the settings. (this is already being avoided in the new codebase)

[insertish]

notes from email sent through support:

I hope this message finds you well. I wanted to bring to your attention an issue I encountered while using your app. When a new message is sent in a group within a server and I click on the top button to view the latest message, a grey box appears in the location where the keyboard used to be, and it stays there until I refresh the app. This issue can be frustrating for new users trying out the app for the first time. As an expert in Discord Management, I believe that Revolt has great potential and a bright future ahead, but this bug needs to be addressed in order to provide a smooth and seamless user experience. Thank you for your attention to this matter, and I look forward to seeing the improvements you make to the Revolt app.

Attached video:

https://user-images.githubusercontent.com/38285861/226100760-1cf4e806-5704-4743-bfcd-2d6704cb431a.mp4

[NyaomiDEV]

Chiming in for accessibility features: having role colors separate from names.

[insertish]

Making a note here to add proper icons for status.

[insertish]

More comments from #Accessibility:

heya~ very new to the platform and we have some big accessibility concerns, some of which i've seen mentioned here already but i'd rather have them all in one place.

• motion reduction. there are a bunch of things that move smoothly or quickly, from ui elements like entering/exiting the settings page and most of the tooltips i've seen, to rapidly moving emoji and pfps. a way to disable or reduce these movements would be great (including stuff like "only play on hover" for emojis, i see that's the default for avatars at least)
• text and ui scaling. with the size everything is at rn, we have to be on 150% zoom for things to be barely readable (any closer and things like the text box take up most of the screen if i'm already typing there). an option to scale the text and ui separately would help here.
• hinting. we use tridactyl, a browser plugin that lets you use most websites with the keyboard by relying on hinting or whatever it's called. this causes two problems. firstly that you can't leave the text box with escape, which means i have to manually click outside of it to not interfere with hinting mode. secondly, most of the right side of the app is completely inaccessible with said hinting mode, meaning i can't access member profiles (they don't work in chat either). as far as i know, this would influence screenreader accessibility too? at the least i can't seem to do the (shift) tab thing to anything other than the server list/settings buttons... and then the settings menu only has hinting in the content bit but not the side bar or exit button.

continued in next message

• fonts. i appreciate the thought of having fonts like open dyslexic and atkinson hyperlegible, but they both focus on very specific reading problems and their solutions tend to make things harder for us specifically. fonts like andika on the other hand are made for general literacy, being based on actual handwriting forms and all. i'll probs fiddle with the css when i figure that out, but i thought it an important thing to point out anyway.

and now, things i noticed while typing this wall

• double spaces. double spaces get collapsed to single ones? no idea why, i usually double space to help with reading bigger texts.
• message length. there's no indication of when a message has reached the length limit. i spent a minute thinking the site just wasn't responding to my keyboard inputs but apparently i'd just reached the limit. smth like a countdown would help here.

[ghost]

This feature: https://github.com/revoltchat/revite/issues/26

I have a lot of problems with my hands/wrists and use various assistive technologies (including voice and footpedals) to navigate my PC without putting additional strain on my body. The only reason I can reliably use Discord is because of the Alt+Up/Down (next/prev channel), Alt+Ctrl+Up/Down (next/prev server), and Alt+Shift+Up/Down (next/prev unread) shortcuts, which permit me to reliably navigate the app hands-free. Without this feature or some equivalent (and to be clear, Ctrl+K is not an equivalent because it doesn't produce consistent results from the same set of key inputs), I can't use Revolt.

[insertish]

We're working on improving keybindings in the new client so hopefully we can address this for you.

[Rexogamer]

We should make sure images are labeled correctly/have alt text where needed - see also revoltchat/revite#963