Focus Order and Meaningful Sequence in 508

tmichael9734
Community Member Posts: 144 ♪ Opening Act ♪
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.
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.
Comments
-
-
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?
-
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:
<!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> -
Categories
- 35.8K All Categories
- 108 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 28.9K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 22 ELB Learning Content
- 22 ELB Learning Content Discussions
- 321 CenarioVR®
- 188 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 41 Rockstar Learning Platform®
- 38 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 5 The Training Arcade®
- 5 The Training Arcade Discussions
- 934 All Things eLearning
- 36 eLearning Development
- 546 Learning Management System (LMS) Integration
- 332 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products