TOC and 508 issues

[olerd81870073]

Hello All!

I am creating a course that has to be 508 compliant. I am using Captivate 2017 v10.0.0.219. I am exporting to HTML5.

For the most part Captivate handles this wonderfully, however when using the TOC a host of issues arise.

The largest of which is having to navigate, by keyboard, through the entire TOC if you have it open or are starting navigation. This will cause the screen reader to read every entry in the TOC, which for the current course is close to 43 slides.

Does anyone know of a way, other than creating a completely custom TOC, to get it to behave similar to the swf exported version?

Let me know your thoughts and maybe we can figure this one out.

Thanks!

[Lilybiri]

This is not an answer to your question, but just want tell you that you are not using the most recent version which is 10.0.1.285. Please upgrade, using Help, Updates.

[olerd81870073]

Updated, will check.

[RodWard]

If you are going for 508 compliance the general consensus is that you need to ditch the Captivate TOC and skin.  Create your own navigation inside the stage area.  The TOC is not 508 compliant at this point.

[olerd81870073]

Yeah, this is the answer I was leaning towards as well, but I was hoping someone would have found some way to use the built in stuff, for convenience.

[olerd81870073]

I found a solution using some JavaScript that I tack on after publish. Its a bit convoluted, but it works with some of the other things we already had added onto our project. See Below.

We have a initialize function on the first slide. I added

document.getElementById("tocContent").style.height = "535px";

document.getElementById("tocFooter").style.display = "none";

document.getElementById("fullBookmark").style.display = "none";

var bookmarks = document.getElementsByClassName("tocBookmark");

for(var i=0; i<bookmarks.length; i++){

  bookmarks.style.display = "none";

}

document.getElementById("toc").style.height = "610px";

This allows me to edit the width and height of the TOC and remove the bookmarks so that screen readers and keyboard navigation ignore them.

Then in my OpenTOC function, custom but using the cpCMNDToggleTOC (or whatever its called), I added this when the TOC is closed:

document.getElementById("toc").style.width = "255px";

document.getElementById("tocHeading").style.width = "255px";

document.getElementById("tocContent").style.width = "255px";

This allows me to set the display to none which lets Screen Readers and keyboard navigation skip the TOC when it is "closed"

I know its a bit convoluted and extra, but it is workable solution, so I am posting it.

Leaving this as open for anyone who wants to add on their solution for this issue.