SkipNav Construction

mguillory8564

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.

jasonadal

Hi Margaret - I was actually halfway through a draft response to your email to the LAUG group yesterday, but got pulled away.

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:

1. Add an onKeystroke action to the button so the learner can use the keystroke instead of having to tab-click (spacebar).
2. 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.

mguillory8564

Jason,

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?

 

jasonadal

My personal email is [email protected] - My organization doesn't allow for drop box, etc. Yay government!

mguillory8564

A link was sent to the email you sent me. Thanks so much for your help.

jasonadal

Hi Margaret - I was able to resolve one question with the page, setting the Skip Nav button to get visible focus first when the page loads. I added a RunJS to the button that gets the HTML ID for the button then sets the focus (see the first action on the button).

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.

jasonadal

I should mention that for testing purposes, I did change the graphics to stock from my library just for visual purposes. I also updated the Skip Nav, back/next so I could see them, but they still have the transparent setting for the over.

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.

cdckaren

Hi there - one of the first section in this template talks about skip nav. We use a hyperlink to an anchor. Both are hidden on the page at the title level, with anything we want to skip between the two in the Title Explorer.  I posted this a year ago, so there might be a better method of achieving skip nav since then. I do not use "set reading order to last" for the same reasons I avoid "always on top" - hard to predict how each browser or screen reader will interpret this from the code it (Lectora) generates. Note that the link + anchor can be absolutely anywhere on the screen - what matters is their placement in the Title Explorer (left side design panel). Please have a look through http://community.trivantis.com/shared-content/updated-508-lesson-and-template-for-lectora-online/

comalley5856

Thanks to all for sharing this Q&A... In reviewing the responses, I see both button and link methods but get the impression a text link is preferred, and ... in either case CSS to setthe focus is recommended. Did I understand this correctly?

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

 

mguillory8564

Now a new wrinkle. I have done one module with Jason's CSS and format suggestions and one module with Bill's CSS and format suggestions. I tried to publish both. Both times I got error messages,

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?

jasonadal

A quick correction for the button JavaScript action. You need to have "btn" in the HTMLNAME area:

document.getElementById("%HTMLNAME%btn").focus();

Without "btn", you're targeting the div ID, not the button ID. It's the same concept as hiding an image from tab order, as you have to target the "<a" name of the element. I also prefer to use onShow as an action on the element for two reasons:

• 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.

 

mguillory8564

The JavaScript Action was as you have shown above already.

jasonadal

Margaret - My first instinct is an inheritance issue. On the test, make sure it's not inheriting the navigation buttons from the AU level. By default, nothing is inherited at the title level, so in theory, that may not be it. I'm of the KISS method of troubleshooting to rule out the simplest possible solution first.

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.

mguillory8564

The disinheriting the top navigation buttons suggestion. Did the trick. Thanks so much.

jasonadal

I know this is an older topic, but I stumbled across a site that has a specific link for a Skip Navigation Builder:

Accessify

I haven't looked closely as I'm buried in other function building, but there are quite a few great tools!

mcrawford1829

Is there a way to change the focus for just the skip nav? We have a course that was built in Lectora 16 and when I try to change the style for just the one button, Lectora seems to overwrite it. I have tried the sample you attached here Jason, and I can change the colors of the border, but it changes it for everything not just the one button.

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