Skip to main content
Inspiring
September 16, 2021
Question

Indicators for External Links

  • September 16, 2021
  • 3 replies
  • 191 views

For ADA compliance external links should have an indicator that the link is an external link, and will move the user off the current site. I do not see a reference on how to program this in RoboHelp 2020 or in prevsious discussions. Does anyone have a suggestion on how to include this indicator?

    This topic has been closed for replies.

    3 replies

    Community Expert
    September 17, 2021

    Adobe have advised that if you add the code below to the stylesheet used for your topics the icon will appear for external links in your topics and won't affect links in the skin.

     

    If you do need the icon for links in your skin, you would need to add it to the LayoutDiff.css. You can find it by right-clicking on the skin and selecting Show in Explorer. (If the skin you are using doesn't have a LayoutDiff.css, you could try creating one with that name and seeing if the change showed up. Otherwise, create a css file called anything you want, then add the stylesheet in the User Assets section of the skin editor.)

    Community Expert
    September 17, 2021

    I did this in Classic with a very complex selector directly in the css file.

     

    I can't give exact steps in RH2020 as I haven't inspected the output code to know exactly what is required based on the specific output being generated. 

     

    Assuming that all external links start with http, you need to set up a hyperlink style that looks for hrefs begining with http and use the :after pseudo element to define the image.

    https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

    https://developer.mozilla.org/en-US/docs/Web/CSS/::after

     

    It'll look something like the following, but may need additional classes/elements depending on the RH2020 output. For example in Classic I needed to specify the class assigned to the topic content to prevent the image appearing on links in the skin.

    a[href^='http']:after {
        content: url('relative/path/to/image.png');
    }
    Dean5EA1Author
    Inspiring
    September 16, 2021

    My first example did not work, see below.