Forum Discussion
Text hyperlink states not applying to some hyperlinks
I'm encountering an issue in Storyline where a text box with hyperlinked words is not applying the hyperlink states to some of the text links.
For example, in the below gif, you can see that the first hyperlinked text in the box does have a hover state (purple), however, the second hyperlinked text does not.
I have found only one consistent thing across all the hyperlinked text's being affected by this issue. When previewing the course, I opened up the Inspect window to find the hyperlinked text's class value. When I check the style tags for that section, to make sure that a :hover is being applied to the correct class value, I noticed that the first few characters of the matching class value to the hyperlinked text's are not green like the rest of the class value or the others (see below).
No matter what I try, I cannot get these specific words to show the correct state. I've tried;
- Removing the hyperlink and reapplying it
- Removing the entire text box, and reapplying the hyperlinks
- Forcing an a:hover with an !important flag in the Inspect CSS (which worked for the other hyperlinks)
I'd love to get some feedback on this one. I can't just leave it as is, as this module needs to be WCAG 2.2 AA compliant, and that includes hover states applying correctly.
I'm also unable to upload the .story file (either whole or in part) due to privacy requirements from my client.
Storyline version: 3.98.34222.0 (issue was occurring in older versions as well)
10 Replies
Normally, I would just use a separate text box or a hidden shape on top for my hyperlinks, but as this module needs to comply with WCAG 2.2 AA, the text needs to be reflowable. When Accessible Text is enabled, the line-spacing is adjusted, so any additional shapes or textboxes would lose alignment.
Regarding the textlib-wrapper class, I believe this is used for textboxes when Accessible Text is enabled. Without Accessible Text enabled, the hyperlink states work fine. Seems that enabling Accessible Text, which converts all the text to 'accessible versions', is ironically making the text fail WCAG accessibility by removing some of the hyperlink states.Alistair Articulate should really find a solution for this. Since your posting in Feb, have you found an accessible fix to the hover issue? If so, can you please share it here? I did not see a answer on past version history builds or on the feature roadmap. Thanks.
I see what you're referring to—I should have paid closer attention to your original post. When "Accessible Text" is enabled, only one or a few links work as expected, showing the hover state, while others do not. Unfortunately, there's no simple solution to this at the moment. This is something Articulate should address in a future update.
That said, I do have a workaround that involves JavaScript. The solution uses a "MutationObserver" to detect when "Accessible Text" is enabled (i.e., when Storyline enforces the "textlib" classes) and dynamically assigns the classes on the anchor (<a>) elements. The tricky part is to copy a class of anchor element that works and when "textlib" is available remove current class of all anchor elements and assign the working one. Switching "Accessibility Text" on and off will not break this functionality. While it's not ideal, it can help fix the issue in the meantime.
Nedim - can you please share your JavaScript solution in more detail here? Thank you.
I can't replicate this issue. I'm using the latest version as well. I copied the first paragraph of your post and pasted it directly into Storyline, then added four hyperlinks. I confirmed that all hyperlink hover states work as expected.
The presence of the "textlib-wrapper" class suggests that the 'Add scroll bars' option may be selected in the text box properties, which I believe is causing the issue.not being particularly savvy with code, perhaps you could try creating another text box with a link to the place you want your second hyperlink here to go.
then get into the back end and copy the class value of the off-screen link and insert it into the class value of the 2nd hyperlink (that currently has the same class value as the 1st hyperlink).
Not sure if it would work--but could be worth experimenting with? ...even if only for curiosity's sake.I've found you can only add one hyperlink per text-box. So you will likely have to add another text box, or use a hotspot or shape as JHauglie suggests.
When we have had this issue before, we did a workaround - put a hotspot (rectangular) over the text link that points to the correct URL. We then manually tweaked the text so it looked like a hyperlink (blue, underlined) - that was an effective solution for us. Your WCAG requirements may not let that pass, but you could try.
