Accessible Links in Rise

[00:00:00] So today we're going to talk about a quick accessibility improvement that we can make in Articulate Rise. Um, but it's a little bit of a workaround. One of the limitations of Rise is that you can only set one accent color. So, in the theme customization, you have these accent colors that you can choose a custom color.

[00:00:32] For instance, right now we're using our brand Learning Ninjas orange, and you'll see that pop-up as accents and different kinds of statements, and dividers. The other thing that it does is opens it and uses that color for text links and buttons by default. So if we come into the content area here, you'll see that I changed the link or the, I change the accent color, and it actually changed the color of this link here. The problem with this is that this is an inaccessible link contrast color, uh, with the rest of this text and on this gray background. So I have a problem there. So if I just went in here and changed that link. Try to change that link, color to a blue or something else, I can't do it. You'll notice that I can just edit the link or unlink it, but I cannot change the color. You cannot change the color like I can here. So the workaround to get this blue accessible link color, like you see down below is you have to, if you already have a link, unlink it. All right. So now it's back to the same just strict text and then you need to set both the underline and the color. So if I underline this and then I change the color to an accessible blue, which I have a text expander that will automatically put that in, but #0000FF is a good accessible blue color for links and standard across the web. And it's a web safe color. So we'll do that. What you'll notice here is that now this is a nice, bright blue.

[00:02:17] It's got good contrast to the black text. And so unfortunately you will have to do this manually for each text link because there is no other way to do it in Articulate Rise at this point. That is the workaround. If you were to add a button, this is something you should pay attention to. Because when I add a button it defaults to that accent color, and you can notice, you may notice here that this is a white text on a very light orange.

[00:02:47] This is a very, uh, inaccessible button right now. So one thing we want to do is make sure we also go into our button colors and choose an accessible button color for that. So maybe choose a dark blue. And make sure that you test that for accessibility. Um, but by default, some of your colors, your accent colors may not be accessible.

[00:03:13] So you'd need to double check that. So the order is again to highlight the text that you want, underline it, then change the link color to the color that is that you want, that you've checked for accessibility. If you highlight the text, change the color, and then add a link. You'll notice what happens is.

[00:03:58] It adds it, but it creates that accent color that's the underline color that does not look good. And it's also not accessible. So you must underline and change the color before adding. I hope you enjoyed this little tutorial. There's a transcript and a breakdown of the steps. And thanks to the Articulate Rise community forums for this workaround.

[00:04:23] I will also link to that in the blog post that we post about this. And, hopefully Articulate, if you're listening, you will add a link color option to your interface and, or allow us to have maybe a color dashboard that allows us to set defaults for links, buttons, et cetera, rather than just one accent color.

[00:04:45] Thanks for watching.