Focus Order and Meaningful Sequence in 508
March 11, 2019 12:00 AM
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.
Discussion (6)
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?
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".
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.
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:
undefinedmeta name="viewport" content="width=device-width, initial-scale=1"undefined
.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); }
}
undefined
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!
You can try with:
animation-iteration-count: 3;
This should make the animation play 3 times.
Discussions have been disabled for this post