How To Add Accessibility Icons to Links that Open a New Tab or Window
Accessibility standards require that any link that opens a new tab or browser window be clearly identified. You know that little Square with an Arrow you may have seen on some websites?
I try very hard to make our websites as accessible as possible and this was an issue I wanted to resolve in Duda. I wrote a very short CSS style script that automatically adds that icon to any link, in your content, that opens a new tab. Unless Duda changes they entire CSS stack, this should work on every Duda site, It does work just fine on all of our clients sites.
Add this to the overall head of your Duda website (Go to Seo & Settings → Head HTML → enter text between the === to the Head HTML text box. be sure to republish your website when you are done.
====
<style>.dmBody a[target="_blank"]::after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
margin: 0px 3px 0px 5px;
}
</style>
====
.dmBody is the ID Duda uses to define the body of the web page,
target="blank" is what opens a new browser tab,
::after tells the css where to place the the icon,
content is the location of the icon we want to use,
and margin sets the spacing of the icon.
Screenshot below shows you what the content looks like after adding these icons.
