MadCap Software Forums

Hello! I've done a fair amount of investigating and I don't think what I want to do is possible - but! Asking here in case I've overlooked something.

My team is looking to implement alt text for images in HTML outputs. In our organization, any customer-facing text must undergo a literature review for safety/legal purposes. Because alt text is not visible on the page by design, this introduces challenges into the review process. I'm looking for a solution that will help make the alt text visible (or allow it to be exported), without a lot of manual work. Ideally, the reviewer will not be asked to do anything additional to view the alt text (such as using the Inspect feature). Either PDF or HTML output works, and we don't necessarily need to see the image alongside the alt text. I haven't been able to figure out if the native Flare accessibility report can produce a report that does contain images that do have alt text + the alt text in question.

Can anyone suggest something that might work?

What I've considered so far:
1. Use the screentip feature to duplicate the alt text, so it is available on hover (leading choice).
2. Manually mark up a copy of the PDF output with the alt text for each image in a comment.
3. Duplicate the alt text in the body of the topic and use a special condition to make it visible for review.

Appreciate any help or ideas!

Perhaps you could you ::before and the content property to display the alt text. The content property is interesting because you can use it to display attribute values as well as text strings.

To try it out, you need to set up something like the following in your stylesheet:

img::before {
display: block;
content: attr(alt);
mc-condition: MyReviewCondition;
color: magenta;
}

Normally "before" is inline, so I figure we probably want to make it display as a block (paragraph). Then the content line says to insert the value of the alt attribute. Finally, mc-condition would set a condition so the style only displays in certain outputs.

This will apply to all images, though, so will probably not be desirable for inline icon images, or for images that don't need alt text, so possibly you might need to set up one or two classes (img.ReviewAlt::before), and apply the new classes to the images for which you want alt text reviewed. This is obviously a lot of work, but perhaps it can be applied gradually as you update topics.

You could also use ::after in a similar way if you decided the alt text after the image would be better.

(Thinking about it, perhaps something like the following would work for inline images:

img.InlineReview::after {
content: ' ' & attr(alt) & ' ';
color: magenta;
mc-condition: MyReviewCondition;
}

)


In any case, it's something to try out to see if it can work in your situation.

In case it didn't come through, the thought experiment for inline images should have spaces between the apostrophes (so there are correct spaces around the inserted attribute value.

content: '<space char>' & attr(alt) & '<space char>';