alt attribute vs. alt tag

[cparrott]

Hi there,

My team has been adding alternate text to images using two methods:
1. Using the "alternate text" field when adding an image with the Image button, as pictured in image "alt-tag.PNG". This adds an alt tag to an image, shown in image "alt-tag2.PNG".
2. Adding an alt attribute to an image, as pictured in "alt-attribute.PNG"

I am running tests with a screen reader and noticing that my images with the alt tag aren't working the way I'd expect them to--the screen reader does not seem to recognize that these images have descriptions, and when I inspect the images, I don't see the alt tag in the code.

Could you help me understand the difference between these two ways of adding alt text and let me know if you're aware of an issue where the Alternate Text field wouldn't show up in Inspect mode once something is published?

Happy to provide more info or screenshots if you need. Thank you so much!

[Radu]

Hi,

The DITA @alt attribute is deprecated so you should use the "alt" element instead.
You mentioned:

I am running tests with a screen reader

I'm assuming you first publish the DITA content to an output format. Are you publishing to HTML5, WebHelp Responsive or PDF? If it's PDF do you obtain the PDF using the DITA Map PDF - based on XSL-FO transformation our our own publishing based on CSS DITA Map PDF - based on HTML5 & CSS?
Both the WebHelp Responsive output and our CSS-based published PDF should be accessible by default.

Regards,
Radu

[cparrott]

Hi Radu,

I am using all 3, but currently performing my testing on a the responsive output. Here is an example of a page with multiple images that have the <alt> attribute: https://shure-content-files.s3.us-east- ... a2ca.html

When I inspect the code and choose CTRL+F, I can't see any alt tags or my alternative image description. Here is the XML for the first image on that page:

<fig id="f_9425eed8-d949-4f8b-bd91-8963457bca1b">
<image href="T:\WWB\6132-scan-sidebar-top.png" width="300" id="f_e106b312-f2ae-48d0-95c6-a38d686ca9a0">
<alt>The scan sidebar with numbers indicating where the parts of the scanning workflow are on the screen</alt>
</image>
</fig>

It looks like, in the responsive output, I am also not seeing the <alt> attribute. Here is a page with an image that has the alt attribute: https://shure-content-files.s3.us-east- ... 38474.html

And here is the XML for that image:

<fig id="f_de3e7b42-330f-4bbc-a032-8cb03b23bf90">
<image href="T:\WWB\inventory_calls.png" width="950" id="f_66586e5b-8df4-40d7-9b4d-60d3b9cec7ad" alt="The Inventory tab with numbered callouts ">
<alt>The Inventory tab with numbers indicating each section of the screen that is called out below</alt>
</image>
</fig>

Is there something with the way I'm using figs that could be causing this text to be stripped out? Or is it still there, and somehow just not appearing in the Inspect tab?

Thank you,
Claire

[Radu]

Hi Claire,

Here's what I'm testing on my side:

1) I have a DITA topic named "iris.dita" containing inside a DITA "fig" element with an image which has an "alt" element set to it:

Code: Select all

            <fig id="fig_wgp_gfz_1pb">
                <image href="../../images/Iris_sanguinea.jpg" scale="50" id="image_ghp_gfz_1pb">
                    <alt>alternate text here</alt>
                </image>
            </fig>

2) I open Oxygen XML Editor version 23.1, I publish the DITA Map containing the topic to "WebHelp Responsive".

3) From the output folder I open in Oxygen the HTML equivalent "iris.html" of the original DITA topic. It contains the following HTML img element:

Code: Select all

            <figure class="- topic/fig fig fignone" id="iris__fig_wgp_gfz_1pb" data-ofbid="iris__fig_wgp_gfz_1pb">
                <img class="- topic/image image" id="iris__image_ghp_gfz_1pb" src="../../images/Iris_sanguinea.jpg" height="166" width="125" alt="alternate text here" />
            </figure>

So in my case the "<alt>" element from the DITA <image> element has been converted to an @alt attribute on the HTML "img" element.

I see that indeed in your webhelp responsive output the @alt attribute is not specified on the HTML "img" element.
With what version of our WebHelp responsive plugin was it generated? Looking at the HTML sources of your web site I think it is 22.1. Did you customize the WebHelp output produced by Oxygen in any way? Maybe for example add some XSLT processing steps to it.

Regards,
Radu

[cparrott]

Thank you so much for your reply! I tried the same test you did and discovered that our own content management system appears to be stripping the <alt> element out of figs. When I try the test without using our content management system, the <alt> element converts to an attribute just as you outlined. Your step-by-step breakdown of your testing helped a lot with this discovery, so thanks very much!