# Infographics and Accessibility and Screen Readers (oh my!)

**URL:** <https://community.evolveauthoring.com/t/infographics-and-accessibility-and-screen-readers-oh-my/2699>\
**Category:** General Help\
**Created:** [December 22, 2023, 12:19pm UTC](https://community.evolveauthoring.com/t/infographics-and-accessibility-and-screen-readers-oh-my/2699 "2023-12-22T12:19:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![GemzNunn](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/gemznunn/32/1248_2.png) [@GemzNunn](https://community.evolveauthoring.com/u/GemzNunn)\
**Post date:** [December 22, 2023, 12:19pm UTC](https://community.evolveauthoring.com/t/infographics-and-accessibility-and-screen-readers-oh-my/2699/1 "2023-12-22T12:19:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Matt\_Leathes](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/matt_leathes/32/586_2.png) [@Matt\_Leathes](https://community.evolveauthoring.com/u/Matt_Leathes)\
**Post date:** [December 23, 2023, 1:30pm UTC](https://community.evolveauthoring.com/t/infographics-and-accessibility-and-screen-readers-oh-my/2699/2 "2023-12-23T13:30:05Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/evolveauthoring/original/2X/9/9b589ed7fc7534e1f3fa6fca2d6490fde53412ce.png)

Maybe try the Flowchart component instead?

---

<div class="post-metadata">

**Author:** ![nath](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/nath/32/2608_2.png) [@nath](https://community.evolveauthoring.com/u/nath)\
**Post date:** [January 2, 2024, 10:34am UTC](https://community.evolveauthoring.com/t/infographics-and-accessibility-and-screen-readers-oh-my/2699/3 "2024-01-02T10:34:09Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Anne\_Cornwell](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.evolveauthoring.com/anne_cornwell/32/1101_2.png) [@Anne\_Cornwell](https://community.evolveauthoring.com/u/Anne_Cornwell)\
**Post date:** [January 3, 2024, 6:43pm UTC](https://community.evolveauthoring.com/t/infographics-and-accessibility-and-screen-readers-oh-my/2699/4 "2024-01-03T18:43:13Z")

</div>

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?