Client-side CSS for enhancing accessibility

CLF standards require a specific visual design, which may require a workaround to enhance accessibility where circumstances warrant. The template's design is flexible enough to allow clients to configure the visual presentation to meet their accessibility needs by using client-side CSS.

Most browsers provide the ability to specify a custom style sheet, which would be applied to every Web page that a client visits. To take advantage of this feature, clients need only to create a custom style sheet and to instruct the browser to use it.

To create a custom style sheet, a client would require knowledge of both CSS and how pages are developed. There are many custom style sheets available on the Internet to improve accessibility of Web pages in general, but to create a custom style sheet that enables specific accessibility features in this template would most likely be too difficult for most clients.

To make it easier for clients to enhance the accessibility of Web pages using the GC CLF template, client-side CSS were developed that can easily be included in custom style sheets. These client-side CSS should be made available on the institutional help page for clients to download.

Visible skip navigation links by default

To meet visual design requirements, it was necessary to make the skip navigation elements invisible by default. This approach does not affect clients using a screen reader and the skip navigation elements do become visible when they gain focus but they may be difficult to find initially since they are invisible by default.

Although CLF does not allow the skip navigation links to be visible by default, clients can make the skip navigation links visible by default by including the following client-side CSS in their custom style sheets:

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

To meet visual design requirements, it was necessary to fix the width of the template at 760 pixels. For some clients, an expandable template improves accessibility and/or usability.

Although CLF does not allow the template to be expandable by default, clients can make Web pages using the template expandable by including the following client-side CSS in their custom style sheets:

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

Underline all links

To meet visual design requirements, it was necessary to remove the underlining of links in the side menu and the common menu bar. Some clients may have difficulty recognizing links that are not underlined or may prefer that all links be underlined regardless of the impact on visual design.

Although CLF does not allow the side menu and common menu bar links to be underlined by default, clients can force all links to be underlined by including the following client-side CSS in their custom style sheets:

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

Consistent link colours

To meet visual design requirements, it was necessary to specify different link foreground and background colours in some areas of the page. Some clients may have difficulty identifying links when the colour scheme is not consistent throughout the page.

Although CLF does not allow the foreground and background colour to be the same for all links by default, clients can force all links to have the same foreground and background colours by including the following client-side CSS in their custom style sheets:

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

To meet both visual design and accessibility requirements for the content page banner, the template displays the foreground text either over a background colour or a background image. Depending on the current font size and the colours used, the contrast between the foreground text and the background may not be sufficient for certain clients.

Clients can ensure a high contrast content page banner by disabling the background colour or image and specifying a high contrast foreground and background colour combination. This can be achieved by including the following client-side CSS in their custom style sheets:

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

To meet both visual design and accessibility requirements for the Welcome Page message area, the template displays the foreground text over both a background colour and a background image. Depending on the current font size and the colours used, the contrast between the foreground text and the background may not be sufficient for certain clients.

Clients can ensure a high contrast Welcome Page message area by disabling the background colour, disabling the background image and specifying a high contrast foreground and background colour combination. This can be achieved by including the following client-side CSS in their custom style sheets:

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

To meet both visual design and accessibility requirements, the foreground or background colours of links may not change when a mouse pointer hovers over top or when the link gains focus when using a keyboard or other alternate input device. Depending on how the browser highlights links, the current font size, and the colours used, some clients may have difficulty determining which link they are about to select.

Clients can make it easier to determine which link they are about to select by specifying a foreground and background colour for links when a mouse pointer hovers over top or when the link gains focus when using a keyboard or other alternate input device. This can be achieved by including the following client-side CSS in their custom style sheets:

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

Visible text element

To meet visual design requirements, it was necessary for graphics to be displayed by default with the option of an alternative text. This approach does not affect clients using a screen reader. Clients can remove the graphic elements and replace them with scalable text by including the following client-side CSS in their custom style sheets.

div.right ul#featuresList li.menucontent img.feaImage {
display: none;
}
div.right ul#featuresList li.menucontent span.feaText {
position: static !important;
font-size: 100% !important;
overflow: visible !important;
width: auto !important;
height: auto !important;
}
div.right ul#featuresList li.lastSpe1 {
border-bottom: 0px solid #C00 !important;
}
div.right ul#featuresList li.lastSpe2 {
border-bottom: 1px solid #C00 !important;
}
div.right ul#featuresList li.menucontent {
background-image: url(http://canada.gc.ca/images/lfflblt.gif) !important;
background-position: 3px 5px !important;
background-repeat: no-repeat !important;
padding-left: 18px !important;
} div.right ul#featuresList li.menucontent {
border-right: 1px solid #C00 !important;
border-left: 1px solid #C00 !important;