Skip to navigation content (Press Enter).

WCAG 2.0 AA Compliance

Section 2.4.1

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.


This is simple but required for all pages. If you try and use your keyboard to navigate or "tab" through this page, you might notice that at the top you will see two bars that show up: one that says "Skip to main content" and one that says "Skip to navigation content." These are the required fundamentals for satisfying this section. The tool that UTS uses is from a demonstration located here. The source code for our implementation is located below.


This goes in the CSS stylesheets:

/* Skip link styling starts here. */
/* First, the positioning CSS for the skip link and the skip target. Changing any of this will most likely break the skip link in one browser or another, so if you change it then TEST IT */
#skiplinkholder a, #skiplinkholder a:link, #skiplinkholder a:visited {display: block; width: 99%; position: absolute; top: 0; left: -200%; z-index: 2}
#skiplinkholder a:focus, #skiplinkholder a:active {left: 0; top: 0; z-index: 100}
#skiptargetholder {position: absolute; left: -200%}
/* You may find on certain page layouts that the skip link is appearing underneath other elements on the page in IE7 and below. If this is the case then try uncommenting the two statements below, and if that does not work then try increasing the z-index value above as well */
/*
*+html #skiplinkholder a:focus, *+html #skip a:active {position: relative}
* html #skiplinkholder a:active {position: relative}
*/
/* Now, the visual styling. Change this as desired */
#skiplinkholder a, #skiplinkholder a:link, #skiplinkholder a:visited {color: #fff; background: #990033; text-decoration: none; border-bottom: solid #ccc 2px; padding: 5px; text-align: center;}
/* End of skip link styling */
/* Skip nav link styling starts here. */
/* First, the positioning CSS for the skip link and the skip target. Changing any of this will most likely break the skip link in one browser or another, so if you change it then TEST IT */
#skipnavlinkholder a, #skipnavlinkholder a:link, #skipnavlinkholder a:visited {display: block; width: 99%; position: absolute; top: 0; left: -200%; z-index: 2}
#skipnavlinkholder a:focus, #skipnavlinkholder a:active {left: 0; top: 0; z-index: 100}
#skipnavtargetholder {position: absolute; left: -200%}
/* You may find on certain page layouts that the skip link is appearing underneath other elements on the page in IE7 and below. If this is the case then try uncommenting the two statements below, and if that does not work then try increasing the z-index value above as well */
/*
*+html #skiplinkholder a:focus, *+html #skip a:active {position: relative}
* html #skiplinkholder a:active {position: relative}
*/
/* Now, the visual styling. Change this as desired */
#skipnavlinkholder a, #skipnavlinkholder a:link, #skipnavlinkholder a:visited {color: #fff; background: #990033; text-decoration: none; border-bottom: solid #ccc 2px; padding: 5px; text-align: center;}
/* End of skip link styling */

Here is the skip link anchor located at the main content of the page. For the navigation skip link, you simple changes the id attributes:

<!-- This is the skip target. This should be placed directly before where you want the keyboard focus to be moved to. Usually this is directly before the main page content --> 
<p id="skiptargetholder"><a id="skiptarget" name="skiptarget" class="skip" tabindex="-1"></a></p> 
<!-- End of skip target -->

Finally, you should load the following Javascript after the page has finished loading (by using jQuery if you know how, or using a <script> tag at the bottom of the page before </body>. This is to ensure webkit based browsers will go to the proper tabbing point.

//<![CDATA[
var is_webkit = navigator.userAgent.toLowerCase().indexOf('webkit') > -1;
var is_opera = navigator.userAgent.toLowerCase().indexOf('opera') > -1;
if(is_webkit || is_opera) 
{
 var target = document.getElementById('skiptarget');
 target.href="#skiptarget";
 target.innerText="Start of main content";
 target.setAttribute("tabindex" , "0");
 document.getElementById('skiplink').setAttribute("onclick" , "document.getElementById('skiptarget').focus();");
 
 var navtarget = document.getElementById('skipnavtarget');
 navtarget.href="#skipnavtarget";
 navtarget.innerText="";
 navtarget.setAttribute("tabindex" , "0");
 document.getElementById('skipnavlink').setAttribute("onclick" , "document.getElementById('skipnavtarget').focus();");
}
//

References

Service Bulletins

  • MAC ID Password Expiry

    Beginning in May 2016, MAC ID passwords at McMaster expire annually. Learn more at www.mcmaster.ca/uts/macid

Service Desk

Client Self Service:
https://servicedesk.mcmaster.ca
Hours: Monday - Friday
8:30 am - 4:30 pm
Phone: 905-525-9140 x24357 (2HELP)
Email: uts@mcmaster.ca
Location: Main Campus BSB Rm. 245
Service Catalogue:
http://www.mcmaster.ca/uts

Great Idea Site

Great Idea