SkipNav Construction

We have constructed our templates with a skipnav button. However, an outside reviewer said we have constructed our template incorrectly. Currently, we have an invisible skipnav button that has the user skip down to immediately before the page title. But, if one doesn't click on the button, but rather uses the tab to navigate through the page, the user isn't skipping anything. Any suggestions would be appreciated.
0
Categories
- 34 ✫ Announcements
- 6 ✪ Contests
- 34K eLearning Brothers® Products
- 1 AssetLibrary™
- AssetLibrary Discussions
- 1 AssetLibrary Feature Requests
- 35 CenarioVR®
- 101 CenarioVR Discussions
- 54 CenarioVR Feature Requests
- 1 CourseMill®
- 101 CourseMill Discussions
- KnowledgeLink®
- KnowledgeLink Discussions
- KnowledgeLink Feature Requests
- 62 Lectora®
- 1.1K Lectora Discussions
- 1.9K Lectora Feature Requests
- 53 Lectora User Groups
- 4 Off-the-Shelf Course Library
- 3 Off-the-Shelf Course Library Discussions
- 1 Off-the-Shelf Course Library Feature Requests
- ReviewLink®
- 21 ReviewLink Discussions
- 12 ReviewLink Suggestions
- 1 The Training Arcade®
- 1 The Training Arcade Discussions
- The Training Arcade Feature Requests
- 7 Additional Learning Products
- 2 Adobe®
- 2 Articulate®
- 1 Camtasia®
- Docebo®
- 1 iSpring®
- 1 Microsoft® PowerPoint®
- 288 All Things eLearning
- 3 Course Development Showcase
- 1 eLearning Brothers® Downloads
- 1 Compliance Training
- 4 eLearning Development
- eLearning Game Design
- 7 Instructional Design
- 264 Learning Management System (LMS) Integration
- 2 Mobile Learning
- 2 Visual Design
- 317 Web Accessibility
- 579 ♪ The Green Room
- 2 ♡ Community Feedback
The Big Launch - Exciting News From eLearning Brothers
eLearning Brothers is all set to rock the eLearning world in 2021, and we want to let you in on the plans! Join us for The Big Launch event, where you’ll hear from company leaders like Andrew Scivally, Co-founder and CEO, Christian Weibell, CPO, and more special guest stars. We’ve got a lot of eLearning awesomeness up our sleeve—you won’t want to miss The Big Launch.
REGISTER NOW
Comments
Did the reviewer offer any more feedback on what specifically was wrong with the button? There are a few things I think about if I'm offering a SkipNav option:
- Add an onKeystroke action to the button so the learner can use the keystroke instead of having to tab-click (spacebar).
- Screen readers in general read the page title before reading any navigation or contents, so having the button go to the title again is redundant. SkipNav is better served by jumping to the content instead.
One other thing I tend to do is add all of the navigation buttons as a group at the title or AU level, then set the group to "Set reading order to last". This bypasses the need for a SkipNav option at the top and takes the screen reader straight to the content. If you could post a sample, I could take a closer look if you'd like.I tried multiple times to make a zip file of my template and Lectora crashed every time. Can you send me your email and I can send you a link to a file sharing drop box?
I was also able to get better success for the Skip Nav button by using a Go To Web address and using the name of the ContentStart text block. The "address" to enter is #text979 or #<name of element on the page>
In a test with NVDA, the focus, reading order and click on the button worked. I also set the reading order so it reads the Top navigation items from left to right, then the next button. (Personal pet peeve - when setting a group to reading order last, it reverses the expected reading order. Instead of top to bottom, groups set to read last go bottom to top in the group.)
Test it with the html, not the preview, as the preview in browser doesn't add the alt-tags correctly for reading.
Also, I added my custom CSS file that increases the tab focus so it's easier to see where the focus is.
One other note: When naming buttons, it's better practice to leave off "button" from the label. Screen readers will announce that the object is a button, then read the label, so it will announce "button" twice.
Are the following JavaScript examples coded correctly?
For Text method: On PageShow > Run JavaScript > document.getElementById("text999422").focus();
For Button method: On PageShow > Run JavaScript > document.getElementById("button866839").focus();
In each case, the reference between the quotation marks is the HTML Name of the textbox/button.
THANK YOU!
Christine
ALSO -
For everyone's benefit, I am posting Bill's response to include in this string:
A little background first. The skip navigation/skip to content mechanism targets two main populations: the visually impaired/blind using a screen reader and the dexterity impaired using exclusively the keyboard. Being able to skip over the primarily navigation controls and interact with the new content on a page is critical for these users to access content efficiently. Although this may seem like a small issue on a single page, when you multiply this loss of time of increased effort over the course of hours, days, and weeks, it is a serious obstacle for these users. Forgive my digression, but I often find myself in the position of explaining why this is so important to those Section 508 is designed to help.
For screen reader users, in my opinion, the skip navigation/skip to content link (in most cases) is fairly useless because as it is coded in Lectora it does not produce consistent results. I have tested it over and over again; it is not reliable. If a method does not produce reliable results, it should not be used. That would not be acceptable in general, so it should not be acceptable for accessibility. One reason for this is the published HTML includes a page refresh, which plays havoc with screen readers in actual usage. In theory it sounds good, but it doesn't work. The best thing is to place the page title at the beginning of the new content and mark it as <H1>. The Section 508 Refresh does not mandate a skip nav/skip to content link; it requires a mechanism of skipping repetitive navigation controls. For screen reader users the page title as <H1> does this smoothly and simply. In numerous surveys of screen reader users appropriate headings on webpages is one of the most important features of accessible design. Doing this consistently will have the greatest impact on such users.
That being said, there is currently a bug in Lectora 17 where if you use the auto page title and mark it as <H1> at the title level, which is the most efficient way to do this, it is not coded as <H1> in the published HTML. The Lectora developers need to fix this bug as soon as possible.
For the dexterity impaired user a skip navigation/skip to content link would still be required. It is possible to add such a link that would only be visible when it receives focus; when it has been tabbed to. The link is placed inside a text box. You need to get the HTML id of the text box from the description dialog box of its properties. If you add an HTML element to the page as type CSS. You edit this element by adding the following text:
a span.text11040Font1 {
opacity:0;
}
a:focus span.text11040Font1 {
opacity:1;
}
The 11040 here is the specific id of the text box I used. You should substitute that number for the number of the specific text box containing the link that you obtained from the description dialog box. If this is done at the title level, then it need be done once, and the link will be active on all subsequent pages. I have not tested the skip navigation/skip to content functionality in the published HTML without a screen reader active. If it does not produce reliable results, I don't see other options for dexterity impaired users.
A word of caution here: there is another bug in Lectora 17 whereby the first element in the title explorer will not be the first tab stop (see a previous post I made); it ends up being at the bottom of the page; however, if you place other elements above it (those not getting a tab stop, such as graphics), that will often resolve the bug issue.
I hope this helps.
Bill
I got error messages on both styles.
Only Prev Page/Next Page actions are valid with a test/test section in random mode.
I got this error message for each question in the quiz at the end.
If I take the quiz off random test question selection, the SCORM will publish, no problem.
But with randomizing, it sends it into fits.
What do I do now?
- It prevents the RunJS from running "too early"; I've had experiences where the JS is "run" before the element is rendered.
- You can attach the action to ANY button without having to edit the name in the JS (see below). This allows me to create a library object that I add to any element, based on it's type.
If I'm reading Bill's CSS correctly, I wonder if it may be better to use a custom div and class rather than targeting the specific element in the CSS? I'm not totally CSS saavy to know with confidence what that would look like from a coding perspective, but maybe "#customdivname .classname" etc.? I would need help with that potential method.It could also be the Last test page, as it includes a "done" button that has a process test action. This action is not necessary for randomized tests. The course will automatically process the test on the final question then go to the next page OR the pages you've selected on the test behavior ribbon.
Accessify
I haven't looked closely as I'm buried in other function building, but there are quite a few great tools!
The Skip Nav starts as white text so it's not seen by any users. Then when the user keyboards to it it should show with a white background, black text, and the dotted black line around it. Then when the user selects/hits enter it goes back to the blend into the background.
Thanks,
Monique