Accessibility challenges

We seem to be coming up against a number of challenges making our Storyline modules fully accessible.  Here are a number of concerns raised by our publications manager after testing our most recent one with a screenreader:

  • Links aren’t recognised as links (the key to find links finds nothing) - is there a way of presenting links so that a screenreader can recognise it?
  • Headings aren’t recognised as headings - ditto
  • Most images are announced as sections rather than graphics and no alt text is read - these were screen shot thumbnails we had inserted that you had to click on to enlarge.  Is there a way around this?
  • The tab order (which is how screen readers often navigate) isn’t always correct. This is true even of the pre-populated templates.  For example, the labels layout in Vigor.  Are we even able to manually adjust this?

As a government agency, we are required to be compliant with WCAG 2.0AA but it doesn't look like this will be possible.  Can you please advise?

Thanks

Catherine

47 Replies
Leslie McKerchie

Hi Catherine - 

Storyline 360, Storyline 3, and Storyline 2 comply with Web Content Accessibility Guidelines (WCAG) 2.0. See this article for details.

Articulate Storyline 2 supports JAWS 16 and later with Internet Explorer 11 and later (Flash output only). Although NVDA will work with many aspects of Storyline content, it isn't officially supported at this time. To learn more about Storyline's accessibility support, see this article.

Catherine Seal

So why are we experiencing the above problems, Leslie?  I don't think you can actually say it complies if it doesn't work on NVDA or other popular screen readers.  My understanding is that JAWS costs several thousand dollars and is actually a relatively smart screen reader so will compensate for some instances of non compliance.  Article is interesting doesn't really provide any how to information or address my issues.  I was pretty assiduous with the alt texting and insertion of links so don't understand why these are not being read out. 

mat corrado

Hi Catherine!

As Leslie posted, knowing what product you're using will help us to target answers to your questions.  In addition, I'd like to know if there is a specific browser you are using, and if the issues you are seeing are in flash or html5 output.

Is it possible for you to add your .story file (or even a scaled-down version of it) as an attachment?  Or, you can do so via this route.  Being able to work with your project specifically is the best route to take, to get your questions answered.

I can answer one of your questions now... We do not offer an "accessibility checker" feature in Storyline.

Catherine Seal

thanks, both of you.  This particular file was actually created in Storyline 2 but I upgraded it to 360 which is what I am now using to create my own files.  We publish as html5 but with the flash option and testing was probably done using Explorer as this is our supported browser.  Future modules will be created in 360.  however I am noticing that even that has some accessibility issues, eg, links open in new browser windows which is contrary to WCAG.  Also a lot needs to be fixed up manually when using templates and library items, eg, colour contrast, alt texting of buttons etc.  I know that my previous department switched back to Captivate because of accessibility concerns with Articulate.  I don't have that option though. 

mat corrado

Hi Catherine,

This article may be helpful to you, as it specifies what accessibility features are at the author's discretion.

 You can change the method that links use to open, either from within Storyline, or via browser settings.  Here's one way to designate that method from within Storyline:

Color contrast is modifiable within the Player Properties Dialog.  Open that dialog, select the Colors & Effects link, and you can designate colors for every detail of the player. 

Alt Text of buttons, shapes, etc., is wholly within the author's control.  It is indeed likely that you will want to confirm that the default Alt Text assigned to an object is acceptable to you.  If not, you have the capability to change it.  If your screen reader, which you mentioned is NVDA, is not accurately narrating the Alt Text of an object, and you've confirmed both the Alt Text and the Tab Order, you may want to contact NVDA support for assistance.  

I hope this helps, Catherine.  I know you have specific concerns about links, headings, and images.  Please feel free to attach here or send us your project file, and we can target your specific pain points.

mat corrado
Catherine Seal

Thanks.  I have uploaded module in question into Review and submitted.  Case number is 01056943. 

Hi Catherine,

Thanks for opening a case.  I've had a look at your .story file and that has helped a great deal in enabling me to address your concerns.

Links:  They are not being recognized as links by a screen reader because they are embedded in a text box, not separated out as individual objects.  To a screen reader, a text box means just that - text to be narrated.  You will need to reincorporate those links into your content as individual web objects.  That way, they become a distinct object that is identifiable by a screen reader as a link, not just text.  One solution would be to create a button with a label that identifies the website.  Insert the web object on a slide layer.  Create a trigger for the button to show that layer. (Note, too, the web object feature has a setting designating it should be opened in the slide rather than in a new window.)

Headings:  Similar to the issue with links, the headings are embedded in the same text box as the rest of the content.  If you separate the headings into their own text boxes, then you can provide Alt Text that specifies them as headings.  (I'm making an assumption that you want the screenreader to narrate, for example, Heading: Logging into the Provider Portal.)  

Images:  I ran a quick test using NVDA and it does, indeed, narrate many objects, including images, as _Section_.  You'll have to check with their support to find out what the solution for that is.  Using JAWS, I discovered that the narration of images was also inaccurate (alt text not being narrated), due to the Zoom Image feature.  That's a bug that I will pursue on this end.  In the meantime, removing the Zoom Image feature did correct the problem.  I know that is not an acceptable solution for your sighted learners who will want to see the zoomed image.  A workaround for accessibility purposes might be to add the Alt Text as a text box above or below the image so the screen reader will narrate it.

I hope this information helps you in moving forward with your project.

Julie Breen

Hello, I know this thread is a bit old, but I'm encountering the same issues with 508 accessibility for a government project. Specifically, the below issue in which the screen reader reads the left pane (Notes panel) as Header 4. How can we edit this in Storyline 3 or 360?

"Total Validator suggests using heading markup such as <h1> in order to organize content."

"=> In this case, <h4> has been used (in the left sidebar area) after <h1> (in the main section) without using <h2> and <h3>."

Thanks, Julie Breen

Julie Breen

Hi Ashley,

To clarify: the client used the Total Validator tool to find that the Notes panel is labeled as "header 4." (I don't know which browser was used.) So perhaps it was not read, but we still need to remove/change any text identifying the Notes panel as Header 4.

https://www.totalvalidator.com/

Thanks (I have submitted a case 01174433 with the file attached).

 

 

Miriam Larson

Hi - I have a question about providing a screen reader transcript separate from the notes in the player. We wanted to provide that so that someone could download it and have their screen reader read the transcript in lieu of sitting through the entire presentation. However, we thought we could just place an accessible PDF under the Resources link, but the tabbing when  in JAWS highlights highlights the whole drop down for the resources link and does not allow you to tab to the PDFs uploaded within the Resources. Do you have a solution for this?

thanks -

Miriam

Miriam Larson

Hi Alyssa - Thank you for taking the time to demonstrate this. So from your video it sounds like the procedure to open a resource when you cannot use a mouse is:

1. Tab to the Resources link
2. Select the Enter key
3. Tab twice to highlight the resource listing
4. Use the down arrow key to move to and highlight the desired resource
5. Press the space bar to open the resource.

When I followed those directions in my course it worked. However, I am at a loss as to how to explain this in a simple way to a challenged user (who likely represents about 1% of my learner population) without distracting all other learners. It doesn't seem to be a very intuitive procedure. Do you have any recommendations for how to efficiently communicate this information (how to open the resources without use of a mouse) to a challenged learner without adding even more of a challenge to their learning task?

One other question: when you opened one of the resources, you mentioned going back and opening a different resource. Did you "go back" without the use of the mouse? And if so, how did you do that? 

thanks!

Miriam

Alyssa Gomez

Hi Miriam,

Yes, that sequence of instructions is correct. 

If you feel that method isn't intuitive, you could always link the resources on a lightbox slide instead. With this method, you would still have the "Resources" tab on the player. However, selecting the tab would open the lightbox instead of opening a player tab drop-down.

Now, on to your second question about going back to the course after opening a resource without using the mouse. Different browsers handle this in different ways. For example, if you're using Chrome, you can press Ctrl + Shift + Tab to go back to the previous tab where the course is located. 

I hope that helps!

Tamara Tarasova

Hi,

If you could advise please  on resolving the following wissues working with SL 360 (tested with JAWS):

1. Hyperlinks do not open. The reader offers to activate them with Space bar but nothing happens when I click Space

2. Sometimes I see extraneous objects in the tab order window (and they are read by screen reader) that the system does not allow me to delete. Also they are not present in the timeline. One is  called Custom - Rectange 1. Where is this coming from? Thank you!