E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Frederik Creemers
Date: Mon, Aug 30 2021 12:24PM
Subject: Arrow key navigation in the conversation list of a chat application
No previous message | Next message →

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).

I've heard from proponents of both approaches, but I'd love to hear any
input that the WebAIM community can give for this.

Best regards,
Frederik Creemers

From: Patrick H. Lauke
Date: Mon, Aug 30 2021 12:31PM
Subject: Re: Arrow key navigation in the conversation list of a chat application
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Mon, Aug 30 2021 1:03PM
Subject: Re: Arrow key navigation in the conversation list of a chat application
← Previous message | No next message

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 ADDRESS 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.