Navigating (using a screen reader) after completing Narrative Carousel component

We are encountering a situation where screen reader users (Chrome Vox on a Chrome Book) can successfully navigate a Narrative Carousel, but when they get to the last slide, they can’t navigate any further. I notice in the course that we’re getting tickets for, the Narrative Carousel is the last component on the page. There is a navigation bar at the bottom of the page, that takes them to the next back (or back to the previous page if they desire). Ideas about their lack of success at moving forward after navigating all the slides in the Narrative Carousel? Thank you.

Hi @Anne_Cornwell unfortunately there are multiple issues with accessibility in the Narrative component which is why we have marked it as ‘not accessible’.

1 Like

Hi @Anne_Cornwell, you could switch the narrative to a tab component, which has been audited and marked as accessible.
Cheers-Sam

1 Like

Hi Sam! Good idea. I’ve proposed that to the designer. Thanks!

Understood. Presently the only issue being reported by screen reader users is the one I mentioned. We’re also having internal accessibility tests done. I do like @Sam_Cook_Evolve_PO idea of using tabs. Thanks both!

That might be an easy fix. Suspect the problem is down to the navigation buttons being removed when you reach the beginning/end of the items. Leaving it on-screen but in an ‘inactive’ state might well resolve the issue. I’ll look into it for you.

I looked back at other courses where we use the Narrative component and not gotten any accessibility tickets from our learners. In those courses, the slide item layout was “Left” and there is no alt-text for the images as they are purely decorative. These courses are taken by thousands of learners so lack of tickets re accessibility is somewhat telling. I wonder if the text being placed on the right makes it possible for the screen reader to move forward at the last slide? Hoping this doesn’t sound like mad ramblings. :-/

I don’t think so; when I tested this locally I had that exact setup but still ran into issues.

1 Like

Just to add to what Sam said about the Tabs component being a good alternative - I would go so far as to say that even if we were to resolve all the accessibility issues with Narrative, the Tabs component would still be the better experience for screen reader users, purely because there are tab-specific ARIA roles we can use to let the screenreader/user know they are on ‘tabbed’ UI component - but there’s no such equivalent for a carousel-style component.

It is possible to use custom roles for UI components that don’t have standard ARIA roles - and that’s something I’d like to implement in Narrative. But they have several disadvantages compared to using the available standard ARIA roles.

1 Like

@Anne_Cornwell just to let you know that the update to Evolve that went out today includes changes to the Narrative component that should mean it is now fully accessible.

We can’t actually declare it as such yet because it needs to be officially re-audited first - but we’re confident that at the very least it’s a significant improvement.

Please give it a try and let us know how you get on. You don’t need to do anything to existing Narrative components other than re-publish/sync them in order to get the latest changes.

2 Likes

Thanks, Matt! Coincidentally, an internal accessibility team will be testing a sample course of various components soon. I’ll be sure to re-sync that course.