Accessibility challenges

Just adding that the screenreader we used for testing was NVDA. 

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.

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. 

Hi Catherine - I've reached out to another co-worker to see if there is a better response here. Due to it being not officially supported, I do not have much information to share, but have reached out to someone who may :)

One more question Catherine - are you utilizing SL2, SL3, or SL360?

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.

Hi Catherine,

Just wanted to jump in on one of your questions. You can manually alter the tab order of the objects on the slide. From the home tab, click the "Tab Order" button. From there you can choose "Create Custom Tab Order" and arrange the tab order as desired.

I hope this helps!

Mike

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. 

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.

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

Thanks Catherine - Looks like you are working with Vevette, so you are in good hands :)

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.

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

Hi Julie,

Which screen reader and browser are you using? I haven't ever heard Header 4 read out while using JAWS which is the supported screen reader for Storyline 3/360. You'll see more about the screen readers and our 508 support here linked at the bottom. 

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).

Thanks for letting us know you opened a case, Julie. You'll hear back from our Support Engineers soon, and I'll also follow along and share updates here!

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

Hi Miriam,

Once you tab to the resources you'll need to use the arrow keys (up/down) to navigate through the list. You'll then be able to open a resource by using the space bar/enter key.

Hope that helps! 

Hi Ashley - that does not seem to work. The arrow keys do not seem to navigate through the list. Is that something that they have to be programmed to do?

Miriam

Hi Miriam!

Take a look at this screen recording demonstration of how the arrow keys should work. 

Then, open this link, and try using the Tab key and the arrow keys to open the resources in the Resource tab.

Let me know how it goes!

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

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!

Yes thanks!

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!