Frame HTML Generation for Accessibility Requirements

Report · Sep 20, 2019

We have a requirement to make all of our materials 508/ADA compliant. That means we need HTML and PDFs that are tagged in a way that makes the logical structure apparent. For PDFs, Frame 2019 has a great tool that associates various tags with one of several tags for the output. However, HTML is proving more difficult. I'm wondering if someone can help me find some solution through Frame that will solve the following problem.

I've been able to create a settings file for HTML5 generation that generates a particular paragraph tag as H1. However, it doesn't use the correct styles that are actually associated with the paragraph tag in Frame. When I go into the CSS file, I find "p.FM_XYZtag" with all the right styles. That "p" means that the ".FM_XYZtag" is a selector only associated with the paragraph tag in HTML, which is why the H1 defaults to whatever the browser wants. As soon as I modify the CSS file to remove the "p," I get the right results. When I import that back into the settings file, it isn't recognized as something that I can map a paragraph tag to. Only by adding the "p" back will it pop up as a choice for mapping the output of the tag.

Is there any way within Frame to import the CSS without that "p" and map the tag output correctly? Am I missing something silly and simple? Short of creating and maintaining a separate CSS file with manually removed "p" from each style and replacing the auto generated CSS with it in the HTML folder for the final output, are there any other options?

Report · Sep 22, 2019

David, you are able to map paragraph tags to HTML elements in the export settings area for paragraph styles, for example, a monospaced para in FM, say p.FM_mono can be mapped to the HTML element <code> or <pre> by selecting map to tag/map to element and typing code or pre. In the resulting HTML you will get elements that look like:

<code>here is your words foo bar</code> in FM 2015.

<code class="FM_mono">... in FM 2019.

instead of the <p class="FM_mono">

You will need to create a CSS for <code> but Framemaker then allows you to attach the CSS to the publishing process.

Remember, you can have multiple CSS (Cascading Style Sheets) for one document, and they are hierarchical. i.e In your <head> you can have:

Personally, I have a script that removes unnecessary CSS, classes, html tags etc using a range of regex which also introduces my own .js .css files and divs to the HTML docs.

Best of luck

Report · Sep 23, 2019

Yes, you can (and should) map your heading tag to H1, which will give you better results.

In fact, any content that is formatted with the class="FM_blah should be mapped to a specific CSS style. This greatly simplifies your management of CSS.

-Matt Sullivan
FrameMaker Course Creator, Author, Trainer, Consultant