Hello. I've created a popup that includes a couple of hyperlinks. When viewing the popups in Web Map viewer, the links are underlined as expected and seem to meet basic WCAG guidelines. When the map is viewed in an Experience, the links in the popups are not underlined and are generally indistinguishable from non-link text.
In the screencap below, the popup on the right is from Web Map viewer. It follows basic WCAG standards by underlining the link. However, when the popup is displayed in Experience Builder (left side of image), the links are not underlined. Further, the color of the link text is almost the same color as the rest of the text. There is no way to know that the text is a link other than moving the mouse all around the popup and seeing the text highlighted on hover
Is there a way to the style the links in the popups in Experience Builder so that they conform to WCAG standards?
Solved! Go to Solution.
Hi @Trippetoe,
You can style the links in the WebMap that is referenced within the Experience Builder Application.
Select the layer and configure the Pop-up.
You can change colour, set bold/italics, underline the text, etc.
Save the map and the now when you open the experience builder, the styling should come through.
Hi @Trippetoe,
You can style the links in the WebMap that is referenced within the Experience Builder Application.
Select the layer and configure the Pop-up.
You can change colour, set bold/italics, underline the text, etc.
Save the map and the now when you open the experience builder, the styling should come through.
Perfect. Thank you!
A minor note is that to see the changes in Experience Builder, i had to close and re-open the experience to see the changes in the map.
I'm running into a similar situation, but the links are built within an Arcade expression, and there's no way to style like this solution suggests. Any thoughts?
Hi @Jesse . Sorry for the delay - i've been out for a while.
My Arcade is very rusty, but i think you can return the literal html code that you need for the link in the Arcade expression. Off the top of my head, something like
return '<a href="your-url" style="text-decoration:underline">link text</a>'
might work for you.