Highlighted

Is it possible to generate 100% accessible (qualifies VPAT testing) and responsive HTML5 from FM 2017?

Explorer ,
Nov 09, 2017

Copy link to clipboard

Copied

I need to create accessible HTML output through FM 2017 since all our guides are already in FM so we cannot migrate to robohelp or any other HTML editor, because it may take too much time.

There are few points that has to be considered while generating accessible output.

  • Structure -  I see an error for the title element which says "Title" is not marked up as a heading but has Font Size (30.0px) significantly larger than that used on most of the page (17.2px). Check if this should be a heading (WCAG2 1.3.1). So how can we make it as heading by default?
  • Language attribute - I can edit the HTML for this. But, if there is some method to implement it within the framemaker, it would be great.
  • Table design - This is the major challenge for me where I need to create scope for each row and column header. The error for this looks like following:

Views

470

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Is it possible to generate 100% accessible (qualifies VPAT testing) and responsive HTML5 from FM 2017?

Explorer ,
Nov 09, 2017

Copy link to clipboard

Copied

I need to create accessible HTML output through FM 2017 since all our guides are already in FM so we cannot migrate to robohelp or any other HTML editor, because it may take too much time.

There are few points that has to be considered while generating accessible output.

  • Structure -  I see an error for the title element which says "Title" is not marked up as a heading but has Font Size (30.0px) significantly larger than that used on most of the page (17.2px). Check if this should be a heading (WCAG2 1.3.1). So how can we make it as heading by default?
  • Language attribute - I can edit the HTML for this. But, if there is some method to implement it within the framemaker, it would be great.
  • Table design - This is the major challenge for me where I need to create scope for each row and column header. The error for this looks like following:

Views

471

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 09, 2017 1
Adobe Community Professional ,
Nov 10, 2017

Copy link to clipboard

Copied

Structure

Have you mapped Title to Heading1 in the Style Mapping dialog?

Language

No opinion on this

Table Design

Do your tables contain heading rows? If not, can you add them to remedy the Header cell - not scoped message?

Please respond back, as I'd like to know if/how you get these remedied!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 10, 2017 0
Explorer ,
Nov 13, 2017

Copy link to clipboard

Copied

I tried doing them. But couldn't resolve issue for Tables specially. That is only possible through HTML editing so Robohelp is must. Because we have an option for HTML editing on the go.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 13, 2017 0
Adobe Community Professional ,
Nov 14, 2017

Copy link to clipboard

Copied

Are you saying that your tables now contain heading rows, and that the problem still occurs?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 0
Explorer ,
Nov 14, 2017

Copy link to clipboard

Copied

Yes.

To fix this error each Column header and Row header must contain following codes in HTML.

<th scope="col"> xyz </th>
<td scope="row"> abc </td>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 14, 2017 0
Adobe Community Professional ,
Nov 15, 2017

Copy link to clipboard

Copied

I suggest you submit this at adobe.com/go/wish. FrameMaker has no "row heading" feature, so I imagine these would each require an extra option in the Style Mapping, much like the option to start a new topic based on style.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 15, 2017 0
Explorer ,
Nov 16, 2017

Copy link to clipboard

Copied

I just tried the structured version of FM 2017. Our guides are in unstructured format. So it will be a little bit hectic task to migrate them in to structured version. But, I am able to fix all the errors I mentioned in this question including table element.

Now it looks like following during the testing:

When I saw the element structure, I can see the option of scope there. Then the summary is given just like this:

The only challenge is now to migrate. It all looks good. Structured version of FM 2017 can generate responsive as well as 98% accessible HTML output.

Why 98%?

There is a very small modification has to be done in index.html after generation to add iframe title which is very easy for anyone.

Here is the problem

iFrame is the sidebar we have for navigation. To fix this error anyone can go to index.html file and do this change.

<iframe title = "This is sidebar navigation" class="topic" name="rh_default_topic_frame_name"></iframe>

Just added the title attribute here. Now the output looks like this

May be the name attribute can be edited to title attribute internally in Framemaker for next version. That would help.Also our VPAT testing tool may be different to others. So that makes sense. It's just a minor observation.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2017 1
Adobe Community Professional ,
Nov 16, 2017

Copy link to clipboard

Copied

It looks like your example is using DITA, so it's good to know that DITA HTML5 is nearly valid using your accessibility eval tool.

How did you resolve the row heading message? I don't see where you identified a row heading to address that message from your checker tool.

Migrating to DITA is a manageable task, but not a pushbutton process. As with any conversion process, make sure you provide time and budget to do the migration and hand work to switch over.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 16, 2017 0
Explorer ,
Nov 19, 2017

Copy link to clipboard

Copied

Actually, the accessibility testing tool considers scope for each row and column. When we insert a table in framemaker in structured way, it looks like following, where by default the codes are good for accessibility. I can see each row and column has a header element and it also has a scope.

The code  <row rowsep="0"> and <entry colname="1"> fix this issue by default and it's very good.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
Explorer ,
Nov 19, 2017

Copy link to clipboard

Copied

Migrating to DITA may take a little more time, but we can manage since we don't have to struggle too much in editing part.

I would  be very happy if you can suggest something about creating/editing EDD/DTD. Or share some link where I can learn to re-structure and format my content.

That would help a lot.

Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2017 0
Adobe Community Professional ,
Nov 20, 2017

Copy link to clipboard

Copied

You can get information on my 2 FrameMaker 2017 structure workbooks
(Structured Authoring, and Structured EDD Development) at http://www.techcommtools.com/books/

The EDD workbook has an entire chapter devoted to structuring legacy content.

I also have a series of FrameMaker courses (structured and unstructured) available.
More info at Online Training Courses - Tech Comm Tools

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2017 0
Explorer ,
Nov 21, 2017

Copy link to clipboard

Copied

Thank you so much.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2017 1
ash2shy LATEST
New Here ,
Apr 09, 2018

Copy link to clipboard

Copied

Hi I'm facing all the above issues. Can you please guide me on how to fix these issues?

1. No ‘lang’ attribute used

2. Duplicate ID ‘OGHAGheaders’ found.

3. Headings are not marked as headings.

4. No summary and no row headers for the two tables

Please help me!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2018 0