Help

The template:

• respects accessibility (WCAG 2.0 AA and WAI-ARIA), usability, and interoperability;
• uses HTML5 semantic elements and WAI-ARIA landmarks;
• are HTML5 conformant, to improve compatibility with adaptive technologies, handheld devices, browsers, and search engines;
• have been successfully tested on a wide range of adaptive technologies and browser/platform combinations;
• include major components, such as the common menu bar, side menu, and content area that are properly marked up with headings to simplify navigation with a screen reader;
• employ table-less layout and design to simplify screen reader navigation by reducing the structural complexity of Web pages;
• improve accessibility by allowing visitors to configure visual elements to meet their accessibility needs;
• use scaleable fonts and text-based navigational elements to improve accessibility and simplify navigation using adaptive technologies;
• provide printer-friendly functionality in the Cascading Style Sheets (CSS) to render pages more compatible with printers and to prevent printing unnecessary page elements;
• separate visual presentation from the document structure;
• avoid truncated and overlapped elements at very large font sizes;
• display the title value when a link gains keyboard focus; and
• employ skip navigation links at the beginning of the page for quickly moving to the content or the institutional links. These skip navigation links become visible when a mouse pointer hovers over top or when selected using a keyboard or other alternate input device.

To create a client-side style sheet, create a plain text file with a ".css" file extension using either a plain text editor or a CSS editor. Include CSS syntax (http://www.w3.org/Style/CSS/) in your client-side CSS file to control the visual presentation of Web pages.

To make it easier for you to enhance the accessibility of Web pages on this Web site, you can include any combination of the following client-side CSS in your client-side CSS file.

How to make the skip navigation links visible?

1. Open your client-side CSS file and paste the following snippet:

   div.navaid {
position: static !important;
font-size: 100% !important;
float: none !important;
overflow: visible !important;
width: auto !important;
height: auto !important;
}
div.navaid a {
color: #00F !important;
padding: 5px !important;
line-height: 150% !important;
}

2. Save your CSS file and refresh your browser

Your browser should now display the "Skip to content" and "Skip to institutional links"

How to make pages expand across the entire screen?

1. Open your client-side CSS file and paste the following snippet:

   div.page {
width : 100% !important;
}

2. Save your CSS file and refresh your browser

Your browser should now display the pages at 100% of the width of the screen.

How to make all links underlined?

1. Open your client-side CSS file and paste the following snippet:

   a:link, a:visited, a:hover {
text-decoration: underline !important;
}

2. Save your CSS file and refresh your browser

Your browser should now underline all links on the screen.

How to make links all have the same foreground and background colours?

1. Open your client-side CSS file and paste the following snippet:

   a:link, a:visited, a:hover {
background-color: #FFF !important;
font-weight: normal !important;
font-style: normal !important;
font-variant: normal !important;
padding: 0px 0px 2px 2px !important;
}
a:link {
color: #00F !important;
}
a:visited {
color: #009 !important;
}
a:hover {
color: #F00 !important;
}

   Please note that the colours in the above example can be modified and are assigned as follows:

   Background colours

   Link property	Class name	Class property	Colour (hex)	Colour
   Background colour	a:link, a:visited, a:hover	background-color	#FFF	White
   Normal link colour	a:link	color	#00F	Blue
   Visited link colour	a:visited	color	#009	Dark Blue
   Hover link colour	a:hover	color	#F00	Red

2. Save your CSS file and refresh your browser

Your browser should now display all links with the same foreground and background colours.

How to add more contrast to the content page banner?

1. Open your client-side CSS file and paste the following snippet:

   div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div-banner-lfcoa-fra {
background: none !important;
border-top: 1px solid #000 !important;
border-left: 1px solid #000 !important;
border-right: 1px solid #000 !important;
min-height: 5.58em !important;
margin-top: 3.14em !important;
padding-bottom: 0.67em !important;
}
* html img.coa, * html img.lf {
margin-top: -2.84em !important;
}
div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div-banner-lfcoa-fra img.coa, div-banner-lfcoa-fra img.lf {
display: inline !important;
}
div.banner-eng p.main, div-banner-fra p.main, div.banner-lfcoa-eng p.main, div-banner-lfcoa-fra p.main, div.banner-eng
p#siteuri, div-banner-fra p#siteuri, div.banner-lfcoa-eng p#siteuri, div-banner-lfcoa-fra p#siteuri {
position: static !important;
font-size: 100% !important;
float: none !important;
overflow: visible !important;
width: auto !important;
height: auto !important;
}
div.banner-eng p.main, div.banner-fra p.main, div.banner-lfcoa-eng p.main, div.banner-lfcoa-fra p.main {
font-family: "times new roman", sans-serif !important;
font-weight: bold !important;
font-size: 185% !important;
margin: 0 !important;
padding: 0 !important;
}
div.banner-eng p#siteuri, div-banner-fra p#siteuri, div.banner-lfcoa-eng p#siteuri, div-banner-lfcoa-fra p#siteuri {
font-family: Arial, Helvetica, sans-serif !important;
background-color: transparent !important;
font-weight: lighter !important;
font-size: 110% !important;
margin: 0 !important;
padding: 0 !important;
}
p.main, p.main span, p#siteuri, p#siteuri span {
color: #000 !important;
}
* html p.main, * html p.main span, * html p#siteuri, * html p#siteuri span {
width: 99.5% !important;
}
p.main img, p#siteuri img {
display: none !important;
}

2. Save your CSS file and refresh your browser

Your browser has now disabled the original background colour or image in the banner, and replaced it with a high contrast foreground and background colour combination.

How to add more contrast to the Welcome Page message area?

1. Open your client-side CSS file and paste the following snippet:

   .msgarea, .msgareaalt {
background: none !important;
border-top: 1px solid #000 !important;
border-left: 1px solid #000 !important;
border-right: 1px solid #000 !important;
}
.msgareaalt {
border-bottom: 1px solid #000 !important;
}
* html .msgarea, * html .msgareaalt {
width: 99.7% !important;
}
* html .msgarea {
height: 129px !important;
}
* html .msgareaalt {
height: 248px !important;
}
.msgarea h1, .msgareaalt h1 {
color: #000 !important;
}
.msgarea h1.hidden, .msgareaalt h1.hidden {
position: static !important;
font-size: 200% !important;
float: none !important;
overflow: visible !important;
width: 100% !important;
height: auto !important;
font-weight: bold !important;
}
.headcontainer {
background-color: #FFF !important;
color: #000 !important;
border: 1px solid #000 !important;
}
* html .headcontainer {
width: 99.7% !important;
height: 118px !important;
}


2. Save your CSS file and refresh your browser

Your browser has now disabled the original background colour or image in the Welcome Page message area, and replaced it with a high contrast foreground and background colour combination.

Internet Explorer

1. Select "Internet Options…" in the "Tools" menu.
2. Select the "Accessibility…" button.
3. Check the "Format documents using my style sheet" box.
4. Use the "Browse…" button to select your client-side CSS file.
5. Confirm the changes by using the "OK" button.

Mozilla Firefox

1. Rename your client-side CSS file to "userContent.css".
2. Copy the file to the "chrome" sub-folder in your browser profile folder. Instructions for finding your profile folder. The "chrome" sub-folder should contain the files "userContent-example.css" and "userChrome-example.css".
3. Restart the browser.

Opera

1. Select "Preferences…" in the "Tools" menu.
2. Select the "Advanced" tab.
3. Select the "Content" option in the list.
4. Select the "Style options…" button.
5. Use the "Choose…" button to select your client-side CSS file.
6. Confirm the changes by using the "OK" button.

Safari

1. Select "Preferences" in the "Safari" menu.
2. Select "Advanced".
3. Use the "Other" button to select your client-side CSS file.
4. Confirm the changes by using the "OK" button.