Accessibility issue process block reading order

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