WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Arrow key navigation in the conversation list of a chat application

for

From: Patrick H. Lauke
Date: Aug 30, 2021 12:31PM

On 30/08/2021 19:24, Frederik Creemers wrote:
> Hi,
>
> I work at TalkJS, where we offer a chat service that can be used to provide
> user-to-user chat on websites+apps. I'm working on making our application
> more accessible, and one of the ways I'd like to do this is by allowing the
> user to navigate between conversations in a list using the arrow keys. On
> wide screens, this list of conversations is shown ne"xt to the active
> conversation. I see two approaches
>
> 1. Navigating with the arrow keys directly changes which conversation is
> active (as WhatsApp web does it)
> 2. Navigating with the arrow keys moves the focus between conversations,
> and hitting enter makes the focussed conversation active (as Facebook's
> messenger.com does).

Sound conceptually like the difference between "Tabs with Automatic
Activation" and "Tabs with Manual Activation" (see examples for
https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel). I think both
approaches are valid, and some people will have a personal preference
for one or the other. For me, it depends on how "heavy" the change
between tabs is - if it involves a lot of DOM thrashing that may slow
things down, and if the list of active tabs is quite long, it may result
in an unnecessarily sluggish experience for a user to navigate through
and auto-activate lots of tabs before reaching the one they're
interested in.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke