Focus Order and Meaningful Sequence in 508

tmichael9734 · March 11, 2019

Hello Everyone,

The 508 review team returned my title with this remark: "The next and back buttons appear before the user tabs through the main content of the e-Learning." My Next/Back buttons are placed at the very top level of the title (please see attached screenshot) and I use actions to hide and show them in the first and last page of the title respectively. What do I need to do to fix this issue?

Thank you for any tip.

timk · March 11, 2019

I'm no expert for accessibility but I think the way that's meant to achieve this would be to group these buttons and check "Set Reading Order to Last" in the properties of the group.

Also, make sure that elements on pages aren't "Always on top".

tmichael9734 · March 11, 2019

Thank you Tim. I thought about grouping both and set the reading order to last, however in knowledge check pages, I show the Back button and hide the Next button so user cannot advance until they answer the question. When I grouped them, I couldn't hide one and show the other. Is there a way to do so?

timk · March 11, 2019

Why can't you? I can show/hide each button in a group separately. In a Test you can check "Student Must Answer Each Question". This way a user cannot continue while the question is unanswered although the Next button is visible and enabled. Enabing / Disabling may be another way to do it.

tmichael9734 · March 11, 2019

My bad! You're right! Thanks a million! I was trying to show and hide using the Inheritance Settings (sorry about that), but you're right the show/hide worked for the group. Thank you.

Do you mind if I ask one more question. I used a loader/spinner around some images to attract users to click in there. The loader runs infinitely and doesn't stop. Is there a way to stop it after few seconds? It's a 508 road blocker too. Here's the CSS that I used for the spinner:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
border: 6px solid #c00000;
border-radius: 50%;
border-top: 6px solid #ccffff;
width: 35px;
height: 35px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

timk · March 12, 2019

You can try with:

animation-iteration-count: 3;

This should make the animation play 3 times.

tmichael9734 · March 12, 2019

Thank you Tim. I used your statement but it is still spinning. As a decent solution, I just used "When Page Shows/ Hide the loader" and set 5s as a delay time. I hope that suffices the 508 requirement.

Thank you though for all the help. Have a great morning!

eLBX Online 2021 | June 22 - 24

Focus Order and Meaningful Sequence in 508

Comments

So You Wanna Be An eLearning ROCKSTAR?

Categories