Screen reader reading objects in states that it shouldn't "see"

Dec 02, 2020

I'm working with shapes (functioning as buttons) that have a Normal and a Selected state. I have put icons on the Normal states.

For all objects in both states except those that contain text, which includes the icons, I've gone to Accessibility and deselected "Object is visible to accessibility tools". 

For all icons, if they are "invisible" via deselecting this buttons, the name of the icon is not read by JAWS. However, depending on the complexity of the icon, most icons are still partially read by JAWS; the name is hidden, but the paths are not. Icons that are "one path" are completely hidden, whereas for those that are made up of several paths/shapes, the component parts/shapes are read, one by one, as "freeform 1" "freeform 3"  etc.

See attached graphic.

On an unrelated note, you should change the feedback that the screen reader gives when you are adding or changing the accessibility option -- right now, the "close" button is reported by JAWS as "cancel" even though it keeps your changes.)

11 Replies
Lauren Connelly

Hello Karen!

I'm happy to help! Are those icons still listed in the Focus Order? If so, I'd recommend removing them to make sure JAWS ignores them entirely. Here's what the Focus Order looks like:

How interesting that JAWS reads off the Close button as Cancel in the Accessibility Tools window!  I'm noticing the same behavior with NVDA too. I've noted this and shared it with our team for clarification. Thanks for bringing this up!

Lauren Connelly

Hi Rachael!

Objects on the timeline are included in the Focus Order. The object's states aren't included in the Focus Order, but I can see how this would be beneficial to customize the alt text of an object's states.

I've shared this with my team so that we can look into this! Thanks for taking the time to share.

Ann Hargrove

Did your team find a solution to this issue? I'm having the same problem. I've deselected icons in the accessibility menu, but it is still reading pieces of the icon. I completely ungrouped the icon and deselected all parts to not be read by the screenreader, but it is still reading objects such as freeform 1 and freeform 2. (which are pieces of the clipboard icon)

Becca Levan

Hi Ann! Welcome to E-Learning Heroes ✨

If possible, could you share the slide with the clipboard icon to see what you have going on in your project and test things on our end? You can share it publicly in this discussion or privately here. We'll reach out with our findings shortly after reviewing your file!

Luciana Piazza

Hi Heather,

Thanks so much for reaching out, I'm happy to help! 

In order to better understand your situation I have a few clarifying questions:

  • Have you tried making a custom Focus Order within your project?
  • Have you utilized alt text in order to make your course more accessible?

If I understand correctly, you are looking for states to be included in the Focus Order. It is expected that objects will show up in the Focus Order but states won’t because they’re not technically a different object. If you’re looking for a screen reader to announce a state differently, then you’ll want to rename the state.

If you could send along your file within this thread or privately in a support case, we can take a closer look at what you are experiencing and assist you further.

Heather Durham

I'm not sure if this will work for everyone who posted earlier, but this is how I fixed it. What was happening to me is NVDA was announcing "freeform [#]" when I hadn't set alt text to null on all parts of svg graphics. If you publish the file to Review 360, then use DevTools in Chrome, you can search for "freeform" in the elements pane. Once you find all of the places in the svg that show up as "Freeform", you can go back to the Storyline file, zoom into the graphic and pick the little parts that aren't hidden. Then, you set those to null alt text in the "Size and Position" > "Accessibility" dialog. These don't show up in Focus Order and sometimes you have to do this with "States" enabled on the object. It's picky work, but does solve the problem.

I don't really think this is an articulate issue. If you happen to choose a graphic that is an svg, you just have to make sure you set the alt text to null on all of the parts. Or, flatten the graphic to a .png or .jpg before you use it. That's another option.