search

Ajaxy / telegram-tt

Telegram Web A, GPL v3
https://web.telegram.org/a
GNU General Public License v3.0
2.38k stars 516 forks source link

Improve screen reader accessibility. #128

Open TheQuinbox opened 2 years ago

TheQuinbox commented 2 years ago

This is by far the most accessible Telegram web app. There's just a few minor problems.

  1. Going through the list of chats is a tad annoying. With the VoiceOver cursor (macOS), and arrow keys (NVDA), the initials of the person go on their own line, then the name of the person. You can only click the name of the person. This is not ideal. It would be cool if we could navigate through chats in a different way (the standard is j and k for this).
  2. The way messages read is confusing. This is sort of a similar problem to the first one .Especially if something's a reply, it's really, really hard to follow using the VO cursor or NVDA's browse mode. I suggest the same kind of navigation for chats.
  3. The names of who sent a message is not read. I think it shows the profile photo or something, but VoiceOver doesn't tell you who sent a message unless it's a reply, for some reason.

Overall this is a great start, and really close to being fully accessible Telegram on all platforms. If all these issues are addressed I'll actually be able to enjoy using this. As it stands there are no accessible Telegram clients on the Mac, and only one (Unigram), on Windows, which is pretty buggy.

Danstiv commented 10 months ago

@Ajaxy, are you interested in improving Web A accessibility? In addition to this problem, there are some others, with a list of messages, with modal dialogs, with folder tabs, etc. If you or anyone else is willing to try to solve these problems, I am willing to provide descriptions of them and possible solutions.

Ajaxy commented 10 months ago

@Danstiv We are surely interested, thank you!

Danstiv commented 9 months ago

@Ajaxy Okay, for example I will describe the problem with the message list. Currently, navigating through the list of messages using a screen reader is much difficult; there is no way to move from one message to another, and there is no way to quickly jump to messages with a certain date or to unread ones. Navigation can be made easier as follows:

  1. All messages must be placed in a list, this can be either a native ul or a div with the role="list" attribute.
  2. Each message must be wrapped in a list element, a native li or div with the listitem role.
  3. Each date header and header above unread messages should also be wrapped in a list item element.
  4. Each date header should also be wrapped in a third level header (h3 or role="heading" aria-level="3")
  5. Header above unread messages should be wrapped in fourth level heading (h4 or role="heading" aria-level="4").

These changes will allow users to quickly navigate through messages using quick navigation through list items, move to a group of messages (today, yesterday, ...) using navigation through 3rd level headings, and conveniently detect the first unread message by moving to a 4th level heading.

Danstiv commented 1 month ago

Any news? @Ajaxy

Ajaxy commented 1 month ago

@Danstiv So far no updates, unfortunately.