Hi, I'm revisiting some older courses to improve accessibility, namely via focus order.
I've patched everything up including things that are hidden away in layers or slide masters.
Where I'm struggling is where a text box includes a trigger, either a link to an external site, or back to the main menu.
For example a text box that states
"If you'd like to return to the main menu, click here"
The focus order contains a line item for the text box, but not for the trigger. The trigger is a link back to a specific slide.
I could get around this by ditching the in-line hyperlink and adding a transparent hotspot, but if I stick with hyperlinks in text boxes, how do in-line hyperlinks respond to actual screen readers? And what happens if you have more than one hyperlink within the same text box?
If you have a text box that contains text and a hyperlink, if you use tab to navigate through your slide, you'll observe the following behavior:
Tabbing will move the focus box to the hyperlinked text first, and the screen reader will read out that the text is linked.
Using the up and down arrow keys will allow the screen reader to read out the rest of the non-interactive text in the text box.
There isn't a way to declare hyperlinked text as individual items in the focus order. You can check out this article for more information on how slide content is read by screen readers:
Thank you for the example and for confirming the order and the lack of focus order entry.
I'm wondering if I'm better off using invisible hotspots; it gives me greater control over the labelling and the colour? Are there any obvious negatives?
I'd recommend utilizing text boxes with a hyperlink (Select the text you'd like to link and then navigate to the INSERT tab and then click on the Hyperlink button) in order to direct your learners to text and hyperlinks as needed. You can modify the focus order and include appropriate alt text so that it maintains an accessible course.
Here's a quick look at how to hyperlink the text box text:
Attached you'll find a sample file so that you can take a closer look!
If you have any other questions, please let us know!
You can hyperlink the text, or you can hyperlink the text box. If you hyperlink the text box, you can add hover, down, and visited states separate from the default hyperlink color system. A prior experiment demonstrated that if you have a hyperlink trigger on the text in a text box and a hyperlink trigger on the text box with the hyperlinked text in it, the hyperlink trigger on the text box takes priority.
You are better off using the hyperlink inline with the text as that is how a user would expect it in a website. As a best practice you should never say click here or here as the styling of the url should define it.
The other solution is to use buttons and write the text in such a way that the button can appear inline in the focus order.
Another issue, perhaps resolvable but I don't know best practice, is that our brand guidelines are strict on colours used, particularly for accessible text. The last time I set a colour palette from scratch in a new project, I was able to set one hyperlink colour as white (which works fine against dark blue).
However if I want to use our other brand colours, including a background light grey, I find myself having to use the text formatting tools to override the link colour. The alternative - by underlining the text instead of adding a hyperlink, and adding the hyperlink via an invisible hotspot (no fill, no border), the same effect is more or less achieved with greater control, and a separate callout in the Focus Order.
To Phil's point, in my most recent course I've typically used buttons, however if it's relating to a policy or Act of Parliament, it's easier to hyperlink the named act.
The last time I set a colour palette from scratch in a new project, I was able to set one hyperlink colour as white (which works fine against dark blue).
However if I want to use our other brand colours, including a background light grey, I find myself having to use the text formatting tools to override the link colour.
That is where, while I appreciate it, wish the styles function had been more robust. I want to set multiple hyperlink styles.
I was just working on an old course this week (built in 2020), making updates for accessibility and came across this same issue. There were text boxes with multiple hyperlinks in them, and while multiple "jump to URL" triggers were present in the Triggers panel, they all were associated with the text box itself; when testing with a keyboard/screen reader only one of the links would actually be exposed.
FWIW, the only way we found to fix the behavior was to delete and recreate the text box and the in-line hyperlinks (w/their associated triggers.)
I'm not sure if the issue was due to some backwards incompatibility with Storyline versions, since the original file was created in a SL version that did not yet have text styles...that's the only thing I can think of that might have contributed.
8 Replies
Hello Joe,
Happy to help!
If you have a text box that contains text and a hyperlink, if you use tab to navigate through your slide, you'll observe the following behavior:
There isn't a way to declare hyperlinked text as individual items in the focus order. You can check out this article for more information on how slide content is read by screen readers:
Let me know if you have any questions!
Hi Joe,
Thank you for the example and for confirming the order and the lack of focus order entry.
I'm wondering if I'm better off using invisible hotspots; it gives me greater control over the labelling and the colour? Are there any obvious negatives?
Hi Joe!
Glad my colleague Joe was able to assist you! Thanks so much for the follow-up question!
I want to clarify what you mean by invisible hotspots. What do you have in mind to achieve with an invisible label? We have the ability in Storyline to have invisible buttons. Here's a quick look at some examples from a past E-Learning Challenge.
I'd recommend utilizing text boxes with a hyperlink (Select the text you'd like to link and then navigate to the INSERT tab and then click on the Hyperlink button) in order to direct your learners to text and hyperlinks as needed. You can modify the focus order and include appropriate alt text so that it maintains an accessible course.
Here's a quick look at how to hyperlink the text box text:
Attached you'll find a sample file so that you can take a closer look!
If you have any other questions, please let us know!
You can hyperlink the text, or you can hyperlink the text box. If you hyperlink the text box, you can add hover, down, and visited states separate from the default hyperlink color system. A prior experiment demonstrated that if you have a hyperlink trigger on the text in a text box and a hyperlink trigger on the text box with the hyperlinked text in it, the hyperlink trigger on the text box takes priority.
You are better off using the hyperlink inline with the text as that is how a user would expect it in a website. As a best practice you should never say click here or here as the styling of the url should define it.
The other solution is to use buttons and write the text in such a way that the button can appear inline in the focus order.
Hi Luciana,
There was as bug back in SL2 where if a text box contained multiple hyperlinks, or they spanned more than one line, the highlighting and/or the destination didn't function as expected. I've been wary of using in-line hyperlinks ever since, and usually split them into single text boxes - https://community.articulate.com/discussions/articulate-storyline/problem-adding-more-hyperlinks-to-a-text-box
Another issue, perhaps resolvable but I don't know best practice, is that our brand guidelines are strict on colours used, particularly for accessible text. The last time I set a colour palette from scratch in a new project, I was able to set one hyperlink colour as white (which works fine against dark blue).
However if I want to use our other brand colours, including a background light grey, I find myself having to use the text formatting tools to override the link colour. The alternative - by underlining the text instead of adding a hyperlink, and adding the hyperlink via an invisible hotspot (no fill, no border), the same effect is more or less achieved with greater control, and a separate callout in the Focus Order.
To Phil's point, in my most recent course I've typically used buttons, however if it's relating to a policy or Act of Parliament, it's easier to hyperlink the named act.
That is where, while I appreciate it, wish the styles function had been more robust. I want to set multiple hyperlink styles.
Hi Joe,
I was just working on an old course this week (built in 2020), making updates for accessibility and came across this same issue. There were text boxes with multiple hyperlinks in them, and while multiple "jump to URL" triggers were present in the Triggers panel, they all were associated with the text box itself; when testing with a keyboard/screen reader only one of the links would actually be exposed.
FWIW, the only way we found to fix the behavior was to delete and recreate the text box and the in-line hyperlinks (w/their associated triggers.)
I'm not sure if the issue was due to some backwards incompatibility with Storyline versions, since the original file was created in a SL version that did not yet have text styles...that's the only thing I can think of that might have contributed.