Forum Discussion
Rise: Focus Visible: what theme/button colors are supported?
This is a 2.4.7 Focus Visible (AA) question:
The Rise VPAT indicates this functionality is supported.
Is there documentation of which color values (Theme, Buttons) will reliably produce a perceivable focus rectangle?
In testing this functionality, I'm seeing mixed results. With some colors, the focus rectangle is imperceptible.
16 Replies
So, that is to say that we cannot change it (to Katalin's question)? If so, is this a feature request we could submit? Or is it not changeable?
If not, perhaps there should be a warning with certain color schemes/templates to say that it may cause color contrast issues, e.g., using dark blue for buttons will cause a color contrast issue when using Chrome as Liz suggests.Hello Naomi!
Currently, you can't change the focus rectangle color in Rise 360 so it overrides was it the browser default. We do have this logged as a feature request! I'll include your comments in our report.
I'll be sure to update this discussion if this feature makes it on our product roadmap.
Hello, For accessibility reasons, I'd like to change the focus rectangle's color in Rise. Currently, when the video (embedded in a Rise course) is in focus (using the tab key), the black focus rectangle is nearly impossible to see. Is there a way to change the color and even the stroke size of this focus rectangle's outline in Rise? The course will be used by 100s of learners so I'd like to make this change in Rise (versus relying on different browsers' default focus indicators). Thank you in advance for any recommendations.
I second this upgrade request. Thank you.
I third this update request please!
Yes, I am looking for this upgrade as well. Please add it to the Rise feature roadmap! Thank you!
Adding my support for this feature request. We often use dark coloured buttons etc because a) they're in our brand colours and b) it makes the buttons easily perceptible. But the default on both Edge and Chrome is black (or close enough to it) and means that the focus indicator is all-but invisible, even to those with good eyesight.
Any news on this one? I am finding that for buttons that need to be dark colours to meet WCAG, it is hard to see the focus with a keyboard. It would be good to have a much thicker outline of the buttons so you can see the focus easily. Adding support to this if not already available.
Hi Amanda-Gunning,
Thanks for following up!
I don’t have any updates yet, but I’ve shared your request with our product team and noted your feedback on improving the keyboard focus visibility for Rise 360 buttons. We’ll let you know if any changes are made that could help.
Hi Amanda-Gunning I ran into the same issue with blue buttons and the blue focus style. This is a good example of when you may need to start developing a multi-color palette for accessibility requirements. Here's how I fixed it with a CSS theme component:
The key CSS from the video:
/* change the color, width and offset on the button:focus */ .blocks-button__button:focus { outline: 3px solid #d75f16; outline-offset: 3px; }Awesome thank you so much I will give this a try!
This works but then the changes aren't saved. It reverts back to the focus outline being none. Anyone any ideas on how to save it to the code?
Hi Amanda, I save my code with a tool called Stylus, and after exporting your course I add the css as a Theme Component and it gets saved in the SCORM package. I did a recording showing that last step of adding the CSS: https://www.youtube.com/watch?v=rXHZvj-cSqE
Hi Liz!
We are relying on the browser's default focus ring to indicate where the current keyboard focus is. This is why you may be getting mixed results. Different browsers have their own focus indicator styling. For example, Safari's default is a light blue outline, while in Chrome you'll see dark blue with a white outline.
Marvie