Potential Accessibility Issues in Webhelp Responsive Output

[awdonald]

I've recently started working with a company that publishes their online help using Oxygen's webhelp responsive templates. There is currently a push to have our web material be brought up to accessibility standards (WCAG 2.0+).

As the person that set up our publication process is no longer with the company, I'm struggling to identify how to modify the output.

Specific items I'm trying to trace the roots of and hopefully correct:

Tables are generated with empty <caption> tags.
The topic id is replicated in data-id attributes.
Modal images are generated without an alt element.

If some direction could be provided on where I might find and modify the sources of this issues, it would be appreciated. If this isn't the right spot to ask these questions, let me know and I'll direct my questions there.

Thanks.

[alin]

Hello,

The recommended way to change the HTML structure of the WebHelp Responsive output is to use an XSLT Extension: https://www.oxygenxml.com/doc/versions/ ... mport.html
This way you can override the default XSLT processing that generates the HTML pages.

Specific items I'm trying to trace the roots of and hopefully correct:

Tables are generated with empty <caption> tags.

You can avoid having tables with empty caption by simply providing a <title> or a <desc> element for that table in your source DITA topic:

Code: Select all

<table frame="none">
      <title>Flowers</title>
      <desc>Description</desc>
      <!-- ... -->.
</table>                

However, if you do not want to provide a title or a description for your tables you can contribute an XSLT extension file in your current Publishing Template that does not allow empty caption generation.
For example, the XSLT file may look like the one below:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:table="http://dita-ot.sourceforge.net/ns/201007/dita-ot/table"
    version="3.0">
    
    <xsl:template
        match="*[contains(@class, ' topic/table ')][not(*[contains(@class, ' topic/title ') or contains(@class, ' topic/desc ')])]"
        mode="table:title" priority="100">
        <!-- Do not generate a caption element for the tables that do not have either a description or a title -->
    </xsl:template>
</xsl:stylesheet>

The topic id is replicated in data-id attributes.

The @data-id attributes are generated by design for all navigation links. More exactly they are generated for each entry in the following components:

• Menu
• Breadcrumb
• Publication TOC

Each entry in the above components corresponds to a DITA topic and the @data-id attribute is meant to reflect the ID of the associated topic. This would allow users to perform granular customizations in the above components only for certain topics.
For example, the Menu entries corresponding to certain topics of a publication can be decorated with specific icons via CSS using a selector based on the @data-id attribute.

I would not recommend removing this attribute because in the future it might be used as base for other WebHelp features.

Modal images are generated without an alt element.

I assume that you are referring to the <img> element from this fragment:

Code: Select all

<div id="modal_img_large" class="modal">
    <span class="close oxy-icon oxy-icon-remove"></span>
    <!-- Modal Content (The Image) -->
    <img class="modal-content" id="modal-img" alt="">
    <!-- Modal Caption (Image Text) -->
    <div id="caption"></div>
</div>

It is only used as a placeholder for the images in the content that are not displayed at their original size. When the user clicks on a image, this placeholder will display an enlarged version of the image.
As this <img> placeholder is meant to be ignored by the Screen Reader it has an empty @alt attribute.
(https://www.w3.org/WAI/WCAG21/Techniques/html/H67)

Regards,
Alin