Add H2 to HTML5's HTML page with either Captivate 8 or 9?

Report · Aug 19, 2016

Hello! I have published dozens of tutorials to our department's website and now our web team is asking me to make the tutorials more accessible by adding an H2 header to the HTML page for each Captivate tutorial. I am by no means an HTML expert but I've been playing around with just modifying the index.html file that is generated to no (visible) avail. One suggestion that the web team gave me was to use Visual Studio to modify the HTML which is way outside my knowledge although my student worker has experience with that. Another suggestion would be to create a blank page on our website and embed the tutorial. I've seen the instructions for that here and it seems easy enough.

The main problem that I have is the extra steps that these suggestions involve. I probably have close to 50+ tutorials on our site. The idea of not only having to use Visual Studio to modify the existing ones AND for each new tutorial is not appealing. Nor do I like the idea of having to create 50+ webpages and a new webpage each time I create a new tutorial.

So I'm hoping against hope that there is something built into Captivate 8 (which I have now) or 9 (which I should have in the next couple of weeks) that would allow me to add a header to the HTML page when I publish it.

Any suggestions would be appreciated!

Report · Aug 19, 2016

You can add the H2 to the html.

Technically the use of tags like an H2 or for screen readers, not to visually style an element. If you include it but you can't see it, the screen reader will still see it.

Report · Aug 19, 2016

Ahhh, Screen Readers? I was wondering about the odd requirement for a heading.

Report · Aug 19, 2016

People use H1, H2, H3 all the time, but they use them for style. They really only make sense to a screen reader as a human has no idea what was used to make a heading, or if it really is a heading.

Semantic HTML tags, and especially the HTML5 additions :

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

have accessibility in mind.

Non-semantic tags like <div> and <span> make no sense to a screen reader.

Years ago they deprecated the use of the <b> tag and went to the <strong> tag, but then they decided to bring the <b> tag back since it has a different meaning.

Report · Nov 20, 2017

How can I add H tags to an HTML page output by Captivate?

Report · Nov 20, 2017

You'd have to add them manually into the output code. Captivate doesn't provide a mechanism to specify how the HTML5 is formed when publishing.

Report · Nov 21, 2017

Hi Rod,

Do you know how to do this? İ have not been able to figure out how Captivate generates the HTML5.

Thank you

Report · Nov 21, 2017

You can execute this JavaScript to append an H1 tag to the body.

var h = document.createElement("H1")

var t = document.createTextNode("Hello World");

h.appendChild(t);

document.body.appendChild(h);

This is very basic with no styling, such as position, font or any zIndex, so Captivate may cover it up, but it's a start not knowing what you are trying to achieve.

Report · Jan 26, 2018

I just had occasion to try this out and voila! It puts the H1 under the Captivate output. It's visible but for now I don't mind because it's not getting in the way of the content. Very much appreciated since this means I don't have to re-publish the Captivates!

Report · Aug 19, 2016

Thank you! I did run an accessibility check on the page but it was hard to tell if it was meeting the requirement. I'll add the H2 to the index file and ask our web team to run their accessibility checker to validate.

Oh and yes this is a screen reader compliancy issue. Mostly just so our accessibility checker will pass; we offer PDF alternatives to the tutorials for users who use screen readers.

Report · Aug 19, 2016

We try to use PDF's as much as possible also.

You should be able to add the <h2> directly under the <body> tag.

Report · Sep 27, 2016

So, are you 'Printing' the course to PDF, Publishing to PDF, or building the accessible PDF separately?

Do you have any tips on building that document for accessibility?

Report · Oct 07, 2016

It's a separate document. We create user guides/job aids that convey the same content as the Captivate courses/tutorials but in a different way. At the moment we create them in Word and then convert to PDF.

In the past, we have printed Captivates as handouts (a Word doc) and then saved as PDF. The more recent versions of Word have an accessibility checker (Use the Accessibility Checker on your Windows desktop to find accessibility issues - Office Support ) that allows you to address most accessibility issues. I usually find that I have to use Adobe Acrobat Pro and its accessibility checker to find all of the issues, though.

Add H2 to HTML5's HTML page with either Captivate 8 or 9?

1 Correct answer