Client-side CSS for enhancing accessibility

Table of Contents

• How to create a client-side CSS file
• How to configure your browser to use a client-side CSS file
  • Internet Explorer for Windows
  • Internet Explorer for Mac
  • Mozilla Firefox, Netscape (6.0 and later) and Mozilla
  • Opera 8 and later
  • Opera 7
  • Safari

How to create a client-side CSS file

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 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.

• Visible skip navigation links by default
• Expandable page
• Underline all links
• Consistent link colours
• High contrast content page banner
• High contrast Welcome Page message area
• High contrast hover/active/focus links

Visible skip navigation links by default

div.navaid {
position: static !important;
font-size: 100% !important;
float: none !important;
overflow: visible !important;
width: auto !important;
height: auto !important;
max-width: auto !important;
margin-left: 0px !important;
margin-right: 0px !important;
padding-left: 0px !important;
color: #000 !important;
}

div.navaid a {
color: #00F !important;
padding: 5px !important;
line-height: 150% !important;
border: none !important;
position: static !important;
zoom: 0 !important;
}

div.page div.core div.navaid a:hover,
div.page div.core div.navaid a:active,
div.page div.core div.navaid a:focus {
color: #00F !important;
border: none !important;
background-color: #FFF !important;
}

Expandable page

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

Underline all links

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

Consistent link colours

a:link, a:visited, a:hover, a:active, a:focus {
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, a:active, a:focus {
color: #C00 !important;
}

In the above example, the colours can be modified and are assigned as follows:

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

High contrast content page banner

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;
}

High contrast Welcome Page message area

div.msgarea, div.msgareaalt {
background: none !important;
border-top: 1px solid #000 !important;
border-left: 1px solid #000 !important;
border-right: 1px solid #000 !important;
}

div.wp-pa-bkg {
background: none !important;
}

div.msgareaalt {
border-bottom: 1px solid #000 !important;
}

* html div.msgarea, * html div.msgareaalt {
width: 99.7% !important;
}

* html div.msgarea {
height: 129px !important;
}

* html div.msgareaalt {
height: 248px !important;
}

div.msgarea h1, div.msgareaalt h1, div.headtitleLft, div.headtitleRgt, div.headcontainer, div.msgarea, div.msgareaalt {
color: #000 !important;
}

div.msgarea h1.hidden, div.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;
}

div.headcontainer {
background-color: #FFF !important;
border: 1px solid #000 !important;
}

* html div.headcontainer {
width: 99.7% !important;
height: 118px !important;
}

High contrast hover/active/focus links

a:hover, a:active, a:focus {
color: #000 !important;
background-color: #FFF !important;
}

In the above example, the colours can be modified and are assigned as follows:

Link property	Class Name	Class property	Colour (hex)	Colour
Hover/active/focus link colour	a:hover, a:active, a:focus	color	#000	Black
Background colour	a:hover, a:active, a:focus	background-color	#FF0	Yellow

How to configure your browser to use a client-side CSS file

Internet Explorer for Windows

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.

Internet Explorer for Mac

1. Select “Preferences…” in the “Explorer” menu.
2. Select the “Web Content” section under the “Web Browser” list item (expand the “Web Browser” list item as necessary).
3. Check the “Show style sheets” and “Use my style sheet” boxes.
4. Use the “Select Style Sheet…” button to select your client-side CSS file.
5. Confirm the changes by using the “OK” button.

Mozilla Firefox, Netscape (6.0 and later) and Mozilla

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 8 and later

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.

Opera 7

1. Select “Preferences…” in the “File” menu.
2. Select “Page Style”.
3. Use the “Choose…” button to select your client-side CSS file.
4. 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.