Infographics and Accessibility and Screen Readers (oh my!)

General Help
1

Hi folks,

I’m in a bit of a pickle concerning infographics and screen readers. A member of my team has created a fantastic infographic that hides and reveals content when a learner selects a button. The problem is it’s not being picked up properly by a screen reader. I’ve tested it in NVDA and JAWS with similar results.

The infographic is a stack of newspapers with headlines and a short piece of text. The first newspaper appears along with a button to reveal the next newspaper. The screen reader picks up on the text and the button. The learner selects the button, and the next newspaper appears. However, if using the keyboard, the learner goes straight to the next button and the text is missed.

I’ve checked the focus order on the infographic, and all looks well. I’m wondering if I’ve missed something in the settings of the items.

2

@GemzNunn unfortunately the Infographic component isn’t one that’s certified Level AA accessible:

image
image804×464 18.5 KB

Maybe try the Flowchart component instead?

3

In the past I’ve had luck with screen readers making sure the layers are organised one after the other (in reverse order if I remember correctly). Especially with hidden elements. It’s not perfect but might be worth a try?

4

Please correct me if I’m wrong. It sounds like the issue is with keyboard navigation, not screen reader navigation. Is that the case? Can you advise what device(s) and browsers are being used?