Select to view content in your preferred language

Links in Experience Builder popups fail WCAG standards

764
5
Jump to solution
11-14-2023 05:07 PM
Labels (1)
Trippetoe
Frequent Contributor

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

Trippetoe_1-1700010357153.png

 

Is there a way to the style the links in the popups in Experience Builder so that they conform to WCAG standards?

 

0 Kudos
1 Solution

Accepted Solutions
gis_KIWI4
Frequent Contributor

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. 

gis_KIWI4_0-1700015984303.png

gis_KIWI4_1-1700016184675.png

 

 

View solution in original post

0 Kudos
5 Replies
gis_KIWI4
Frequent Contributor

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. 

gis_KIWI4_0-1700015984303.png

gis_KIWI4_1-1700016184675.png

 

 

0 Kudos
Trippetoe
Frequent Contributor

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. 

0 Kudos
Jesse
by
Occasional Contributor

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?

0 Kudos
Trippetoe
Frequent Contributor

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.

Jesse
by
Occasional Contributor
Neat, that did the trick. I did try giving the link a blue color using this method but something in Experience Builder overrode that. The underline styling seems to be the answer.
0 Kudos