Tab ordering, Layers, and 508

Apr 23, 2020

I've been working with 508 for about 18 years now and just started using Storyline 360.  Mostly impressed with its capabilities, but am struggling with using layers and a screen reader (JAWS).  I have attached a real-world example of having buttons on top of an image of a form to fill out. I would have used hotspots, but they had no color or states.  Each button triggers the showing of a layer to read more info on the section of the form.  I set my custom tab order, but SL seems to be ignoring them.  In html, I would have set the focus on the layer so the screen reader could read the appropriate text, but that doesn't look possible.  I'm wide open for suggestions.

6 Replies
Bob O'Donnell

Couple of things.... First off, if you "Roil Back" your version of Storyline to the December 19 version you will find that your tab order works perfectly fine. Don't preview the file though - "Publish" your file to test it out. Preview (in this release) doesn't always show you how the screen actually works. Go figure....

For your hot buttons - you're missing the proper alt tags on the other states. Looks like you copied button 1 to create the other buttons. See attached screen capture.

In the Dec 19 version, hotspots were not accessible. We got around the issue by simply using Shapes and changing the transparency on the object. No outline, transparency set to 100%. Add your alt tag and trigger to each shape and you're good to go. (While working and testing, we leave the transparency at 90% so each spot is easy to pinpoint on the screen.)

Storyline continues to make a bunch of improvements but they keep missing the mark. For 508 development - the Dec 19 version still seems to work best for us as the tab order worked properly. At least for us anyway. Looking forward to the day they fix all the problems. Tab order still not working properly in the April 21st release.

Good luck! Dane

Thanks for the feedback, Bob!  Not sure about how to roll-back to a previous version of SL360, actually a little afraid to since they've updated the application since then.  

I've been publishing vs previewing for this issue so I can run it through JAWS.

I tried using hotspots, but since I couldn't have a hoverover state or make it colored, I switched to a standard button and styled them with a semi-transparent color with a colored border.  Funny story - I just wanted a normal and hover state for the buttons, but if you remove any of the button states, the cursor stops turning into a pointer hand on rollover.  Buggy.

So, I updated the alt tag for all states of all the buttons.  Isn't it odd that the other states don't inherit what the "normal" state is set to?  They should!  I also moved the tab order for the layers under their respective button (button, layer, button, layer, button, layer, etc). and now it all works like it's supposed to.

Speaking of 508 issues.  The way SL renders tables in the browser is scary!  Not as tables at all, not a <table> tag to be found.  Just a series of div and p tags styled to replicate the look of a table.  A normal table should read in a screen reader fine enough, but complex data tables are going to be a big 508 fail.

Bob O'Donnell

Tables are scary. We try to avoid them if possible. I think it was the February build that messed stuff up initially for us and we just never went back. We needed to keep our courses all working in a consistent manner. For some reason, Articulate decided that it would be a feature to only tab to interactive objects on a page. So pages like yours, where you have text show up after selecting a button, the user can't tab to the text field.

I hate missing out using some of the new stuff. Maybe they'll eventually change the tab order issue back. Until then, we're sticking with the old build until we finish our set of courses for the government.

Rollback - If you ever need to do it, open the Articulate 360 desktop app. When you roll over one of the programs you'll see a little arrow appear by the Open button. Click on it and you get options to choose from; one of the options is "Other versions..." That takes you to a list that allows you choose previous builds.

Lauren Connelly

Hi Bill!

I'm happy to offer additional help!

First, I appreciate you sharing the file! I was able to test in on my end using JAWS to see exactly what you're noticing with layers! On the other note, I'll be the first to say that making tables keyboard accessible is on our list of improvements. Right now, tables are not the easiest to navigate!

You mentioned that you're using hotspots rather than buttons because of the hover state. Unfortunately, the hover state isn't technically keyboard accessible in its entirety, not just with Storyline. For example, on a website, you wouldn't be able to hover over a hyperlink. Instead, you would need to tab to the hyperlink and then press Enter on the keyboard to open the link. The state that keyboard-only users would need is "Selected". 

I've attached my testing to this reply so that you can see how I moved through the slide. When testing a course, you'll use TAB to access the hotspots, ENTER to select the hotspot which opens the layer, and then press the DOWN ARROW twice to access the text. The first down arrow moves to the bottom portion of the table and the second down arrow will move to the text on the layer. Pressing the DOWN arrow twice is somewhat tedious and one of the many reasons why we're making improvements to tables. 

I do encourage you to continue updating Storyline 360 as we continue making accessibility improvements. You'll find that content created in previous versions of Storyline 360 (Update 35 and earlier) aren't up to date with the recent WCAG standards. As we continue releasing accessibility enhancements, you'll see that courses built in previous versions of Storyline aren't fully keyboard-accessible nor do they communicate with screen readers properly.

Deb Beverley

Hi, I wondered if the accessibility of layers has been improved?  Or if there is a work around now to have the layer, readout without clicking 'down arrow' twice.  This workaround is very confusing and difficult to communicate to someone with accessibility needs as they may not see that a layer has been 'invoked' and realize they need to do something.

Lauren Connelly

Hello Deb!

I'm happy to help! It sounds like you've created a course with layers. Screen readers will require you to navigate to parts on a slide or even web page in order for the screen reader to announce content. If you're moving through either a slide or layer, then you would navigate the slide using the arrow keys.

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