WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Aug 30, 2021 1:03PM

I assume the arrow key navigation you are refering to only applies to
the conversation list/tabs, not to tying this functionality to the
arrow keys in all situations (e.g. while inside the message editor).
If we are talking tabs, Patrick's gt it right (as usual). If you have
a short list (5 or less) of relatively lite conversations (quick to
load) you can do actication upon arrow key press. Else, require the
user to select the conversation they want with the arrow key but
require them to hit enter or spacebar to actually load it.
Why?
Imagine you are on conversation 1 and need to get to conversation 6.
If you rely on the keyboard to do this, you press arrow keys to
navigate to 2, 3, 4 and 5. In scenario 1 you activate each of those
conversations as the user presses the key, even if they are not the
one the user is interested in.
If activating each conversation takes, say, 2 seconds, it will take
the user 10 seconds to get to the one they want.
On the other hand, if you rquire the extra action, the user can
navigate directly to the conversation they prefer then activate it, no
time wasted loading needless content.
This approach also works more consistently with mobile devices (a
mobile device has no simulation for arrow keys).


On 8/30/21, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
> 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
> > > > >


--
Work hard. Have fun. Make history.