Forum Discussion
The focus indicator on the Assessment Next button is not available.
The focus indicator on the Assessment Next button in Rise 360, particularly for keyboard and screen reader users, is a potential accessibility issue. This means that when navigating via keyboard, the currently selected button might not be visually highlighted, making it difficult to determine where focus is. The focus indicator gets highlighted using Tab key after reading everything on the screen. The next focus should ideally highlighted after correct/incorrect feedback. Screen reader is reading Next button but it is not highlighted.
Any suggestion would be helpful.
Sudeepa, I had the exact same issue. The solution is to modify the focus state outline with a css theme component. Here's a screen recording where I show the problem and solution.
6 Replies
Hi SudeepaGanguly,
Thanks for reaching out! I understand you’re noticing that the Next button in a Rise quiz doesn’t look highlighted.
In Rise 360, navigation elements like the Next button follow ARIA accessibility standards. That means they work with keyboard navigation, even if they don’t always show a yellow highlight when focused. You can still use the Tab key to move around and Enter/Spacebar to click.
In the screenshot below, you’ll see what I observed during testing. The button doesn’t show a yellow box, but there’s still a clear difference between when it’s active and inactive. I also recorded a quick video of my tests. You can check it out here.
Please let me know if you have any questions or if there’s anything else I can help with.
Thanks , but when we are using our company's branding colour "#00005c", the black border is difficult to distinguish.
Hello SudeepaGanguly,
I see that you've opened a support case, and my colleague Mick just reached out to you. You're in excellent hands!
We'll continue the conversation over in your case.
Sudeepa, I had the exact same issue. The solution is to modify the focus state outline with a css theme component. Here's a screen recording where I show the problem and solution.
Hi PhilFoss, thanks for the solution. Will definitely try. I want to understand, for all the buttons in my course, I need to individually work with the CSS Style?
Yes there will be a style for each type of button. For these 'next' buttons the css looks like below, it will apply to all of this button type throughout your course.
.quiz-card__submit button:focus { outline: 3px solid green; outline-offset: 4px; }Also I like your cover image- is that an animating gif? And here's how I recommend installing a theme component to your exported course.
