I use this code in layouts/_default/_markup/render-link.html to open external links in a new tab
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if or (strings.HasPrefix .Destination "http") (strings.HasSuffix .Destination ".pdf") }} target="_blank" rel="nofollow noreferrer noopener"{{ end }}>{{ .Text | safeHTML | markdownify }}</a>
However, I would like to add this in the code <span class="screen-reader-text">(opens in a new tab)</span> to it. I tried adding it before the cosing tag but it shows after every link including internal links. I would appreciate a working example for the benefit of accessibility.
First of all that class is something that Wordpress uses internally as per this doc.
Therefore the above class on its own -without the associated CSS- has no effect in the context of a Hugo project.
Instead it is better to provide an aria label for links that will open in a new tab.
Have a look at this doc for suggestions.
1 Like
I have the CSS already in place that I use extensively.
Aria-label did the trick though, so thanks. Full code for those who may stumble upon this in future
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if or (strings.HasPrefix .Destination "http") (strings.HasSuffix .Destination ".pdf") }} target="_blank" rel="nofollow noreferrer noopener" aria-label="{{ .Text | safeHTML | markdownify }} (opens in a new tab)" {{ end }}>{{ .Text | safeHTML | markdownify }}</a>
4 Likes
@alexandros though it seems the render-link.html only works for links inside {{ .Content }}? Is that by design? I just found my external links in other places outside Content don’t get the same markup.
render-link.html is a Markdown Render Hook Template it is applied only in links found within the .Content of Markdown content files.
1 Like
Alright. Understood.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.