Explore the community Forums General Topics Instructional Design SkipNav Construction Reply To: SkipNav Construction

#373289 Score: 0
Profile photo of Christine O'Malley
Christine O’Malley
friend finder
wise owl
curious george
product reviewer
LUC17 Attendee
Group Member
11 pts

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.



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 {



a:focus span.text11040Font1 {




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.