Narrative slider title has no heading tag?

Hello Evolve team!

I’ve been using the Narrative component (with images) and it was flagged in a QA that the title has no heading level tag (H2, H3, etc). I could’ve sworn that it did, although maybe I’m thinking of the carousel. It is labelled as accessible, so I wondered if this was a bug? Or something that can’t be helped. I have tried testing this in new courses and going back to old ones with the same result.

This could also be NVDA being it’s usual quirky self.

Many thanks,

Lauryn

@LaurynS no, you’re quite right it doesn’t set a heading level tag on the narrative item title

The reason for that is due to how I had to ‘retro fit’ accessibility into a component that was originally created quite some time back, without much thought to accessibility standards. And do so in a way that didn’t break the layout for existing Narrative components!

Although I could set it to have a heading tag, it wouldn’t make any difference due to the way the component is structured - the actual slide contents are hidden from screenreaders and the containing element uses an aria-labelledby attribute to read out the slide contents as a whole as each slide is navigated to, so there’s no need for the user to nagivate through the slide contents in order to have the content read out - and then have to navigate back through the content again to get back to the ‘next slide’ button!

Hope this helps!

Also just to note: the equivalent to this component in the new version of Evolve we’re working on is much better set up for accessibility - something that actually only became possible to do quite recently due browsers recently having added support for functionality that allows for far better accessibility in carousel-style interactions

3 Likes

A very upfront and detailed answer as always, thanks! That’s understandable, we’re looking forward to seeing the new Evolve.