Can I create an "accessible" image-based menu in Storyline?

Mar 18, 2015

I'd like to create an interactive menu from a single image. The image is a graphic of a process, and I'd like to use it as the central menu from which users will navigate the course. I believe this approach is called an image map.

I read that hotspots in Storyline don't meet accessibility requirements such as Section 508.  Is there another way to approach this?  Note that my graphic doesn't cut nicely into squares that could perhaps be fit together as separate images that are placed to look like a single image.

Would slicing in Photoshop be an option? The accessibility requirement is that each segment of the image be titled with an Alt tag and that the user be able to tab through the menu, with the Alt tag read to the screen reader.

I've attached a sketch of the menu image I'd like to use.

12 Replies
Fiona Macelli

I've noticed that you can add Alt-text to a hotspot (by clicking Size & Position, the same way as for images).  Does this mean that a text reader will pick them up and someone could keyboard between them?  It says somewhere in the storyline specs that hotspots and drag-and-drop don't meet accessibility criteria, but I guess I'm looking for an invisible button basically that I can apply over top of an image and apply a trigger to. 

I'm new to storyline as well as accessible design so suggestions would help.


Ashley Bricker

I looked at the image and for accessibility purposes you can keep this simple. Drag and Drops and hotspots are not accessible (as of now ) in Storyline. Create this how you would for your visual users and then hide all that from the screenreader. Add invisible shapes over the areas you want to use for your menu. Add alt text and triggers to these shapes. Test in JAWS, NVDA, or whatever screen reader you have to test with to make sure this works. Should be fine though! 

Julie Miles

I'm looking at a very similar situation, where I have an image map acting as a menu, and I need to make it accessible to screenreaders. Your suggestion sounds as though it would work, but there's one thing I don't understand: why do I need both hotspots and invisible shapes? Could I not make the invisible shapes work for both visual access and screenreaders, and dispense with the hotspots altogether? I feel like I might be missing something really basic here :)

Fiona Macelli

Hi Julie, I wrote this question before I understood things well. I haven't confirmed the "hotspot" feature with a screen reader, but invisible shapes that you assign triggers to, or any kind of button placed over the image works great.  Test what you create by previewing it and then using the Tab key to move through it. If your "button" appears in yellow and contains Alt-text, then the screen reader will read that. Press spacebar to activate your button and test it for keyboard use that way.

Fiona Macelli

The way I interpret Ashley's comment, she's saying that hotspots are not accessible (so don't use them). I'm not sure that's exactly true, since they are essentially just an invisible shape, but some uses of hotspots (as in hotspot questions) would definitely be inaccessible.

If you need more info about accessibility and how to test, I recently shared a guide that I developed here:

This discussion is closed. You can start a new discussion or contact Articulate Support.