Skip to Conent - 508

err229

I've tried all the suggestions I've found in the forum for how to get my Skip to Content to work:

1) Used a small transparent grapic and set the button to scroll to it.

2) Tried scrolling to the text block itself

3) Tried re-ordering objects in the left pane.



Has anyone been able to make this work? I'm not sure how a title can be compliant without a way to make this very common screen reader need work.



Help!

cyberjoep

We do the same thing, but use external HTML code for all of our main Content and skip to Main Content, that has some additional advantages versus the Lectora solution for this...



1) for the main Content, we add the following code at the title level which is the LAST thing at the title level, so, when it is inherited on your pages, it is just before where your main Content is on your individual pages. By using external HTML code and setting the tabindex to -1, it keeps it out of the tabbing ring and not hit by JAWS like a empty text box is. [make sure to use actual HTML anchor tags replace [], I could not do it in this post without making actual code on the page]



External HTML code -- Custom DIV



[a id="mainContent" name="mainContent" tabindex="-1"][/a]





2) for the skip to Main Content -- we add it to the title level as the FIRST thing at the title level, therefore, all of the navigation buttons are between the skip to Main Content and the main Content anchor at the title level. [make sure to use actual HTML anchor tags replace [], I could not do it in this post without making actual code on the page]



External HTML code -- Custom DIV



[a href="#mainContent" class="ms-skip" AccessKey="J"]Skip to main content[/a]



For the class "ms-skip" in this anchor, we add the following CSS code to the Lectora title as well...



External HTML code -- Cascading Style sheet



a.ms-skip,a:hover.ms-skip,a:visited.ms-skip

{

position:absolute;

left:0px;

top:-500px;

width:1px;

height:1px;

overflow:hidden;

}

a:active.ms-skip,a:focus.ms-skip

{

position:absolute;

left:2px;

top:2px;

width:auto;

height:auto;

background-color:white;

border-color:black;

border-width:1px;

border-style:Solid;

color:black;

padding-top:2px;

padding-bottom:2px;

padding-left:4px;

padding-right:4px;

}



So, when you tab to the Skip to Main Content anchor, it will appear visually but disappear with the focus is lost on it ... we put the Skip to Main Content anchor in the upper left hand corner of our courses. It has a hot key of ALT-J that you can jump to it anytime that you need and the hot key does not interfere with JAWS (you can use something else if you want, just as long as it does not interface with JAWS or your browser).





Remember also about reading order and maintaining the reading order on every page, so, if you disinherit, inherit a navigation button to have some other action, you need to disinherit / inherit all of the navigation buttons and main content anchor that FOLLOW so that read order stays the same on this page (however, we no longer do this, as we do the actions on the navigation buttons programming using action groups and javascript instead, so we don't disinherit / inherit navigation buttons on the individual pages ).



In addition, when we load the pages in our courses, we AUTOMATICALLY go to the main Content, instead of doing some work to get to the main Content on every page, which is frustrating for the JAWS users....



1) Add the following Javascript function to the course that is on every page like this...



External HTML code - Header scripting



function setFocus() {

window.scrollTo(0,0);

var mainContent = document.getElementById('mainContent');

if(typeof(mainContent) != 'undefined' && mainContent != null)

{

mainContent.focus();

}

};



This javascript code will move the window back to the top of the page, and then, jump to the mainContent anchor -- if it finds one on the page (safety measure code added, so you don't get a javascript error in your browser on popups, etc that dont have a main content anchor)



2) You need an action at the title level that calls the function in #1 above (except on popup pages, etc).



In 11.X you can create a action On PageShow Run Javascript setFocus()



In 10.X, you need to do a trick to get the Lectora code into running the javascript function.

a) create a dummy variable 'temp' in Lectora Variable Manager, initial value can just be blank ( we are not using the variable for anything to read from it )

b) Set your action at the title level to be On Show Modify Variable temp, Set Contents javascript:setFocus()

this trick will call the javascript function for you to set the focus to the main Content anchor.

dbanner

Hi All:



Ever since the Lectora 11 upgrade came out at the beginning og Nevember 2013, the tab indexing/keyboard accessibility function is not working proerly in packages published to SCORM and uploaded into Blackboard. Has any one else had this issue?



Diane