E-mail List Archives
Thread: Logical focus flow on carousel
Number of posts in this thread: 9 (In chronological order)
From: Greg Jellin
Date: Tue, Apr 02 2019 11:52AM
Subject: Logical focus flow on carousel
No previous message | Next message →
Happy spring friends,
I'm not a fan of carousels from any perspective, however I find myself
testing a carousel pattern for a client.
The pattern has standard previous and next buttons to move between
slides. Each slide has some basic content (an image, a heading, a
paragraph).
At the moment, I'm testing using TalkBack for Android. The context is
that I am swiping to navigate forward/backward. My question is, what is
the expected focus behavior when a user has activated the "next" button?
In this case, another swipe forward takes the user out of the carousel
and onto the next element on the page. To get to the now current slide
content the user has to swipe backward (right to left) which sets focus
on the "previous" button, then again to get to the current slide
content, which sets focus at the bottom-most element in the content. The
user has to work backward towards the title of the slide.
This seems to be a common behavior in the wild. including the example on
the WAI tutorials page:
https://www.w3.org/WAI/tutorials/carousels/working-example/
In my opinion, after activating the next button the next forward swipe
should move the focus to the first element at the top of the now current
slide.
I'd love to hear some opinions on this.
Greg Jellin
From: glen walker
Date: Tue, Apr 02 2019 7:28PM
Subject: Re: Logical focus flow on carousel
← Previous message | Next message →
Whatever order the DOM is should remain in that order. That is, the way
you described how you'd like to see the behavior, sounds like the DOM order
should change after the user selects next. Hopefully that's not the case.
As you swipe or tab through the page, if you get to the prev button, then
the carousel contents, then the next button, selecting the next button
should load more carousel content but leave the focus on the next button.
You'd have to swipe/tab backwards to get to the contents.
If the DOM order were carousel contents, prev button, next button, then
selecting next should leave the focus on next and the user would have to
swipe/tab backwards twice to get to the contents.
You could mitigate this a little for screen reader users by having a live
region and announce that new content was added, or announce the actual
content that was added, and perhaps tell the user to navigate backwards to
get to the new content. For me, personally, if I hear prev, then carousel
contents, then next and I select next, I know the content is "behind" me
and I have to navigate backwards to get to it.
Glen
From: Aditya
Date: Tue, Apr 02 2019 9:47PM
Subject: Re: Logical focus flow on carousel
← Previous message | Next message →
I too prefer the order of previous button, carousel content and next button. Upon activating any of the buttons, focus should be placed on the first new item that becomes visible in the carousel.
That way when users activate next, they truly get the next content.
Sent from my iPhone
> On Apr 2, 2019, at 8:28 PM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> Whatever order the DOM is should remain in that order. That is, the way
> you described how you'd like to see the behavior, sounds like the DOM order
> should change after the user selects next. Hopefully that's not the case.
>
> As you swipe or tab through the page, if you get to the prev button, then
> the carousel contents, then the next button, selecting the next button
> should load more carousel content but leave the focus on the next button.
> You'd have to swipe/tab backwards to get to the contents.
>
> If the DOM order were carousel contents, prev button, next button, then
> selecting next should leave the focus on next and the user would have to
> swipe/tab backwards twice to get to the contents.
>
> You could mitigate this a little for screen reader users by having a live
> region and announce that new content was added, or announce the actual
> content that was added, and perhaps tell the user to navigate backwards to
> get to the new content. For me, personally, if I hear prev, then carousel
> contents, then next and I select next, I know the content is "behind" me
> and I have to navigate backwards to get to it.
>
> Glen
> > > >
From: Maxability
Date: Tue, Apr 02 2019 11:23PM
Subject: Re: Logical focus flow on carousel
← Previous message | Next message →
+1 to Aditya. In this way if the slide content has interactive elements
users can interact with them. I also like the thought from Glen of
announcing the content with live region updation, however I prefer it if
the content of the slide is just a sentence or change of an image and
little content.
I dont think we can depend on one solution for carousels, I will take a
call depending on the content the slide holds with an exception of same
technique for the entire carousel.
Regards - Rakesh
On 4/3/2019 9:17 AM, Aditya via WebAIM-Forum wrote:
> I too prefer the order of previous button, carousel content and next button. Upon activating any of the buttons, focus should be placed on the first new item that becomes visible in the carousel.
>
> That way when users activate next, they truly get the next content.
>
> Sent from my iPhone
>
>> On Apr 2, 2019, at 8:28 PM, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Whatever order the DOM is should remain in that order. That is, the way
>> you described how you'd like to see the behavior, sounds like the DOM order
>> should change after the user selects next. Hopefully that's not the case.
>>
>> As you swipe or tab through the page, if you get to the prev button, then
>> the carousel contents, then the next button, selecting the next button
>> should load more carousel content but leave the focus on the next button.
>> You'd have to swipe/tab backwards to get to the contents.
>>
>> If the DOM order were carousel contents, prev button, next button, then
>> selecting next should leave the focus on next and the user would have to
>> swipe/tab backwards twice to get to the contents.
>>
>> You could mitigate this a little for screen reader users by having a live
>> region and announce that new content was added, or announce the actual
>> content that was added, and perhaps tell the user to navigate backwards to
>> get to the new content. For me, personally, if I hear prev, then carousel
>> contents, then next and I select next, I know the content is "behind" me
>> and I have to navigate backwards to get to it.
>>
>> Glen
>> >> >> >> > > > >
From: Bim Egan
Date: Wed, Apr 03 2019 3:23AM
Subject: Re: Logical focus flow on carousel
← Previous message | Next message →
+1 to Aditya too! Love that logic for tab order
But ... And I hate to disagree with Glen on anything, I don't think
aria-live should be used referencing carousel slide text. I've come across
carousels with aria-alert on the slide as it comes into view, and in some
browsers it is like having a video with sound that starts automatically. The
difference being that the screen reader and video volume can be controlled
separately, but the alert is read by the screenreader, and it's almost
impossible to identify the pause button if the slide transitions don't have
large enough pauses.
IMHO Potentially creates a page you just have to close.
Bim
-------------
Bim Egan
Skype phone: 01223 96 87 96
Personal Email: = EMAIL ADDRESS REMOVED =
Skype ID: bim.accessequals
Coordinator: Describe Online
W: www.describe-online.com
E: = EMAIL ADDRESS REMOVED =
----------------------------------------
Partner: AccessEquals
W: www.accessequals.com
E: = EMAIL ADDRESS REMOVED =
From: glen walker
Date: Wed, Apr 03 2019 9:47PM
Subject: Re: Logical focus flow on carousel
← Previous message | Next message →
>
> But ... And I hate to disagree with Glen on anything,
No, please do. I'm just one person's opinion and accessibility can be
somewhat subjective.
But I will, respectfully, disagree with moving the focus. I personally
hate when an application thinks it knows what I want to happen with the
focus. When I click on next, don't move my focus to another element.
Leave it on next because the stuff that's scrolled into view in the
carousel might not be the thing I want so I want to click on next again,
and again, and again. Don't make me have to navigate back to next every
time.
And I rarely use role="alert" or aria-live="assertive". If I need a live
region, I'll use "polite". There are not many scenarios where an update is
so urgent that it has to be announced immediately, even less that it has to
say "ALERT!" and then my update.
Glen
From: Greg Jellin
Date: Thu, Apr 04 2019 10:12AM
Subject: Re: Logical focus flow on carousel
← Previous message | Next message →
I agree with this Glen. I think that focus should remain on "next" until
the user tabs/swipes forward to the next element. In my original
description of my opinion, I stated that I think that the next tab/swipe
(forward) should take the user to the top of the current slide. After
reading this thread and thinking about it, I think it would be better if
the next tab/swipe moves the focus to the next element in the DOM
(outside of the carousel), but tabbing/swiping backwards should take the
user to the top of the current slide rather than the bottom.
Thanks for the lively discussion.
Greg Jellin
On 4/3/2019 8:47 PM, glen walker wrote:
>> But ... And I hate to disagree with Glen on anything,
>
> No, please do. I'm just one person's opinion and accessibility can be
> somewhat subjective.
>
> But I will, respectfully, disagree with moving the focus. I personally
> hate when an application thinks it knows what I want to happen with the
> focus. When I click on next, don't move my focus to another element.
> Leave it on next because the stuff that's scrolled into view in the
> carousel might not be the thing I want so I want to click on next again,
> and again, and again. Don't make me have to navigate back to next every
> time.
>
> And I rarely use role="alert" or aria-live="assertive". If I need a live
> region, I'll use "polite". There are not many scenarios where an update is
> so urgent that it has to be announced immediately, even less that it has to
> say "ALERT!" and then my update.
>
> Glen
> > > >
From: Isabel Holdsworth
Date: Fri, Apr 05 2019 3:49AM
Subject: Re: Logical focus flow on carousel
← Previous message | Next message →
Hi all,
If focus is left on the Next button after it's been pressed, users
would need to be informed that new content has been loaded, especially
if it comes before the initiating element in the DOM.
Cheers, Isabel
On 04/04/2019, Greg Jellin < = EMAIL ADDRESS REMOVED = > wrote:
> I agree with this Glen. I think that focus should remain on "next" until
> the user tabs/swipes forward to the next element. In my original
> description of my opinion, I stated that I think that the next tab/swipe
> (forward) should take the user to the top of the current slide. After
> reading this thread and thinking about it, I think it would be better if
> the next tab/swipe moves the focus to the next element in the DOM
> (outside of the carousel), but tabbing/swiping backwards should take the
> user to the top of the current slide rather than the bottom.
>
> Thanks for the lively discussion.
>
> Greg Jellin
>
> On 4/3/2019 8:47 PM, glen walker wrote:
>>> But ... And I hate to disagree with Glen on anything,
>>
>> No, please do. I'm just one person's opinion and accessibility can be
>> somewhat subjective.
>>
>> But I will, respectfully, disagree with moving the focus. I personally
>> hate when an application thinks it knows what I want to happen with the
>> focus. When I click on next, don't move my focus to another element.
>> Leave it on next because the stuff that's scrolled into view in the
>> carousel might not be the thing I want so I want to click on next again,
>> and again, and again. Don't make me have to navigate back to next every
>> time.
>>
>> And I rarely use role="alert" or aria-live="assertive". If I need a live
>> region, I'll use "polite". There are not many scenarios where an update
>> is
>> so urgent that it has to be announced immediately, even less that it has
>> to
>> say "ALERT!" and then my update.
>>
>> Glen
>> >> >> >> > > > > >
From: glen walker
Date: Fri, Apr 05 2019 8:04PM
Subject: Re: Logical focus flow on carousel
← Previous message | No next message
Yup. That's what I said in my initial email.
On Fri, Apr 5, 2019 at 3:49 AM Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
wrote:
> Hi all,
>
> If focus is left on the Next button after it's been pressed, users
> would need to be informed that new content has been loaded, especially
> if it comes before the initiating element in the DOM.
>
> Cheers, Isabel
>
>