I have identified an issue with the process block when using a screen reader to read the content.
When I first access the process block and the first slide of the carousel is displayed, the first element of the process block is the Next button to take me to the next carousel slide (first step in the process block).
This could cause users to miss content or at least some confusion when interactive with the content.
This is valuable feedback, thanks for sharing! I thought I'd share a little bit of background to start a conversation about how this can be improved.
The reading order of the process block is this: 1 - Next button 2- Previous button (on succeeding steps) 3 - Contents 4 - Step pagination
We "park" the focus on the next button with the intention of making the navigational experience more optimal, so that screen reader users (and keyboard users too) can easily navigate between steps. Upon loading the steps, we automatically announce the step count & title so users have a preview of what the step is about, providing a way to scan the steps without going through the whole content. At this point, if they want to proceed and read through, the content is next in the reading order.
We did explore other ways to do this with consideration of our current design - such as reading in the natural order, top to bottom, left to right. Nevertheless, it has flaws of its own. From our research, we determined that this is the best pattern to go with and iterate as we receive more usability feedback from users.
I can see how an unfamiliar user may get confused about how to operate the interaction. Carousel-type widgets are challenging already to begin with 😄. I'm curious to know how you'd ideally design the reading order of the process interaction.
Thanks again! While I wait, I'm exploring ways to overcome the challenges as a content author.
Hi Marvie, I think the carousel is working pretty well overall. My biggest issue, is just the initial slide and the potential to miss it. Here's my suggestion on how to address this problem with a relatively simple CSS edit.
Thanks for taking the time to make a recording, Sam! I understand it better now and can see how a user can easily miss the introduction. I'll get a ticket going to start exploring the option you suggested!
3 Replies
This post was removed by the author
Hi Sam!
This is valuable feedback, thanks for sharing! I thought I'd share a little bit of background to start a conversation about how this can be improved.
The reading order of the process block is this:
1 - Next button
2- Previous button (on succeeding steps)
3 - Contents
4 - Step pagination
We "park" the focus on the next button with the intention of making the navigational experience more optimal, so that screen reader users (and keyboard users too) can easily navigate between steps. Upon loading the steps, we automatically announce the step count & title so users have a preview of what the step is about, providing a way to scan the steps without going through the whole content. At this point, if they want to proceed and read through, the content is next in the reading order.
We did explore other ways to do this with consideration of our current design - such as reading in the natural order, top to bottom, left to right. Nevertheless, it has flaws of its own. From our research, we determined that this is the best pattern to go with and iterate as we receive more usability feedback from users.
I can see how an unfamiliar user may get confused about how to operate the interaction. Carousel-type widgets are challenging already to begin with 😄. I'm curious to know how you'd ideally design the reading order of the process interaction.
Thanks again! While I wait, I'm exploring ways to overcome the challenges as a content author.
Cheers!
Marvie
Hi Marvie, I think the carousel is working pretty well overall. My biggest issue, is just the initial slide and the potential to miss it. Here's my suggestion on how to address this problem with a relatively simple CSS edit.
Thanks for taking the time to make a recording, Sam! I understand it better now and can see how a user can easily miss the introduction. I'll get a ticket going to start exploring the option you suggested!
Cheers!
Marvie