Skip to navigation content (Press Enter).

Operable Guidelines

Lesson 8 of Section 3

Seizures

Do not design content in a way that is known to cause seizures.

Three Flashes or Below Threshold: Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.

The premise of both the guideline and section are simple: do not have content that flashes more than three times in one second. If there is doubt about your content passing this guideline, you should just revise your content.

Navigable

Provide ways to help users navigate, find content, and determine where they are.

Most accessible browsing programs have several ways of navigating through a page using the identification of special tags such as header tags and anchor tags. This guideline instructs you and your developers on how to use these tags properly to conform to WCAG standards.

Bypass Blocks

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 code):

/* 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 (skip code):

<!-- 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. (skip code)

//<![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();");
}
//

Page Titled

Web pages have titles that describe topic or purpose.

Like Technique G88 describes, you must simply provide a proper title that describes the content of the web page. McMaster's convention set out by OPR is the following tag:


<title>McMaster University > Department or Faculty Name > Descriptive Page Name</title>

Always try and make the page name unique. If you are using the same page name for multiple web pages, you should probably revise your title strategy.

Test your knowledge!

Take the test or continue to the next lesson.

Sources

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