ARCHIVED - Accessible initiative link solution

Warning This information has been archived because it is outdated and no longer relevant.

Archived Content

Information identified as archived on the Web is for reference, research or recordkeeping purposes. It has not been altered or updated after the date of archiving. Web pages that are archived on the Web are not subject to the Government of Canada Web Standards. As per the Communications Policy of the Government of Canada, you can request alternate formats by contacting us.

Table of Contents

1.0 Introduction

Colourful and visually appealing links are often used to help promote Government of Canada initiatives. Several of these initiative links are created using images that contain embedded text. Although image links are undeniably colourful and visually appealing, they can also create accessibility issues.

Image links in most cases will not scale with the rest of the text on the page, which can be problematic for clients with low vision who quite often will be unable to read the small text embedded in the images. Even expandable image links will quickly become pixelated, making the text difficult to read for low vision clients.

Image links also prevent clients from modifying the foreground and background colour combinations to meet their accessibility needs and the colour combinations selected for the image links may not achieve sufficient colour contrast for certain clients.

To meet both appealing visual design requirements and accessibility needs, it is necessary to separate text from the image so both elements can be controlled independently. This approach can be achieved by specifying a background image for foreground text using Cascading Style Sheets (CSS). This solution improves accessibility by allowing the text to scale and allowing the client to control the foreground and background combinations.

Note: This solution will only work with the Government of Canada Common Look and Feel Template Package. The base CSS code that is critical for this solution to work has been included in the template CSS files.

2.0 Creating an accessible initiative link

There are three parts to an accessible initiative link: the background image, the initiative-specific (X)HTML code and the initiative-specific CSS code.

2.1 Background image

2.1.1 Creating the background image

The display dimensions for the initiative-link container are 191 pixels wide by 66 pixels high. To accommodate stretching of the initiative-link container at larger font sizes, the background image dimensions should be at least 210 pixels wide by 100 pixels high. The image should be optimized for display at the default font size with the focal point in the centre being 191 pixels wide and 66 pixels high.

The image focal point should be designed with an area large enough for the display of the foreground text at the default font size. To ensure the foreground text can be easily read, this area should have minimal image complexity and use colours that will ensure high contrast with the foreground text.

2.1.2 Installing the background image

Copy the image to a central location that can be referenced by all Web pages (for example, /images).

2.2 Initiative-specific CSS class name

Create a unique name for the CSS classes that will be specific to the initiative. It is best to create a class name that includes text from the name of the initiative to prevent conflicts with the CSS classes of other initiatives (e.g., recruitInit).

2.3 Initiative-specific (X)HTML code

2.3.1 Creating the initiative-specific (X)HTML code

The (X)HTML code will be very similar for all initiative links. The following (X)HTML code must be used for each initiative link:

<div class="gcinit">
<div class="recruitInit">
<a href="#" title="Recruiting - Join the Armed Forces">
<span class="fontSize130">Recruiting</span>
</a>
</div>
</div>

Only five areas in the above code can be customized. These areas are:

  1. The class name for the second div element ("recruitInit") must be replaced with the class name that was determined in section 2.2 (Initiative-specific CSS class name).

  2. The URL for the link ("#") must be replaced with the URL for the targeted initiative page.

  3. The title for the link ("Recruiting - Join the Armed Forces") must be replaced with a title that helps to give context to the link text. The title must begin with the link text (specified in step 5) and must be followed by a hyphen and descriptive text that gives additional context.

  4. The class name for the span element ("fontSize130") must be replaced with the class name for one of the font size classes specified in section 8.1 (Font size classes) in the Government of Canada Common Look and Feel Template Package.

  5. The link text ("Recruiting") must be replaced with the desired link text.

2.3.2 Installing the initiative-specific (X)HTML code on a Web page

The initiative-specific (X)HTML code must only be installed in the right side menu or the content area of the Web page.

2.3.2.1 Right side menu

To install the (X)HTML code in the right side menu, simply paste the initiative-specific (X)HTML code between <div id="right"> and the associated </div>.

2.3.2.2 Content area

The display of the initiative links is different in the content area than it is in the right side menu. In the content area, there is more width available, so more than one initiative link can fit on the same line. To allow this, it is necessary to use "wrapper" code. All content area initiative links should be contained in the same "wrapper" code.

The "wrapper" code begins with <div class="gcinits"> and ends with </div><div>&#160;</div> as shown below:

<div class="gcinits">
... Initiative-specific (X)HTML code 1 ...
... Initiative-specific (X)HTML code 2 ...
... Initiative-specific (X)HTML code 3 ...
... Initiative-specific (X)HTML code 4 ...
</div>
<div>&#160;</div>

Top of Page

2.4 Initiative-specific CSS code

2.4.1 Creating the initiative-specific CSS code

The CSS code will be very similar for all initiative links. Below is the CSS code that must be used for each initiative link:

.recruitInit {
      text-align: left;
      background: url(../images/rec/af_dp_3_200.jpg) #006 no-repeat center center;
}
.recruitInit span {
      position: relative;
      top: 5%;
      left: 5%;
      color: #FF0;
      font-family: inherit;
      font-style: normal;
      font-variant: normal;
      font-weight: bold;
      line-height: normal;
      letter-spacing: normal;
      word-spacing: normal;
      background-color: transparent;
}

The name for each of the above classes ("recruitInit") must be replaced with the class name that was determined in section 2.2 (Initiative-specific CSS class name).

The following tables identify how the properties in the above classes can be configured:

Configurable properties for the class "<class_name>" (e.g., .recruitInit)
Property Possible values Description
text-align left, center, right These values determine the alignment of the text within the container.
background (image URL) url(.../images/.../image.jpg) The value must be replaced with the URL of the image created and installed in section 2.1 (Background image).
background (colour) Web-safe colour (e.g., #006) The value must be replaced with a Web-safe colour. This value controls the background-colour of the container should the font size cause the container dimensions to exceed the image dimensions.


Configurable properties for the class "<class_name> span" (e.g., .recruitInit span)
Property Possible values Description
top Relative unit (e.g., 5%) This property controls the percentage of the container height that the link text should be moved down. The value must be replaced with a percentage value that correctly positions the link text vertically.
left Relative unit (e.g., 5%) This property must only be used if the text-align property has a value of "right" or "center".

This property controls the percentage of the container width that the link text should be moved right. The value must be replaced with a percentage value that correctly positions the link text horizontally.
right Relative unit (e.g., 5%) This property must only be used if the text-align property has a value of "right" or "center".

This property controls the percentage of the container width that the link text should be moved left. The value must be replaced with a percentage value that correctly positions the link text horizontally.
color Web-safe colour (e.g., #FF0) This property controls the colour of the foreground link text. The value must be replaced with a Web-safe colour. The colour of the foreground link text must achieve high contrast with the background image.
font-family inherit, font-family value This property controls the font-family of the foreground link text. The value "inherit" should be used in most cases. If a different font-family is desired, then a backup font of sans-serif must be specified (e.g., "arial, sans-serif").
font-style normal, italic, oblique This property controls whether the style of the foreground link text is normal, italic or oblique.
font-variant normal, small-caps This property controls whether lowercase or small capitals are used for non-capitalized letters.
font-weight normal, bold This property controls whether the foreground link text is normal or bold.
line-height normal, relative unit (e.g., 100%) This property controls the height for each line of foreground link text. The value "normal" should be used in most cases. If a different line height is desired, then relative units must be used.
letter-spacing normal, relative unit (e.g., 0.2em) This property controls the amount of space between the letters in the foreground link text. The value "normal" should be used in most cases. If different letter spacing is desired, then relative units must be used.
word-spacing normal, relative unit (e.g., 0.2em) This property controls the amount of space between the words in the foreground link text. The value "normal" should be used in most cases. If different word spacing is desired, then relative units must be used.
background-color transparent, Web-safe colour (e.g., #FFF) This property controls the background colour of the foreground link text. The value "transparent" should be used in most cases. If a background colour for the foreground text is desired, then a Web-safe colour must be used.

2.4.2 Installing the initiative-specific CSS code

Copy and paste the initiative-specific CSS code into the institution.css file of the GC CLF Template Package.

3.0 Initiative link examples

3.1 Individual initiative link examples

3.1.1 Recruiting initiative link example

3.1.1.1 Initiative-specific (X)HTML code

<div class="gcinit">
<div class="recruitInit">
<a href="#" title="Recruiting - Join the Armed Forces">
<span class="fontSize130">Recruiting</span>
</a>
</div>
</div>

3.1.1.2 Initiative-specific CSS code

.recruitInit {
      text-align: left;
      background: url(../images/rec/af_dp_3_200.jpg) #006 no-repeat center center;
}
.recruitInit span {
      position: relative;
      top: 5%;
      left: 5%;
      color: #FF0;
      font-family: inherit;
      font-style: normal;
      font-variant: normal;
      font-weight: bold;
      line-height: normal;
      letter-spacing: normal;
      word-spacing: normal;
      background-color: transparent;
}

3.1.1.3 End result
Recruiting

3.1.2 Endangered species initiative link example

3.1.2.1 Initiative-specific (X)HTML code

<div class="gcinit">
<div class="endSpecInit">
<a href="#" title="Endangered Species - Information about Canada's endangered species">
<span class="fontSize110">Endangered<br />Species</span>
</a>
</div>
</div>

3.1.2.2 Initiative-specific CSS code

.endSpecInit {
      text-align: right;
      background: url(../images/env/spp157p1.jpg) #333 no-repeat center center;
}
.endSpecInit span {
      position: relative;
      top: 23%;
      right: 2%;
      color: #FFC;
      font-family: inherit;
      font-style: normal;
      font-variant: normal;
      font-weight: bold;
      line-height: normal;
      letter-spacing: normal;
      word-spacing: normal;
      background-color: transparent;
}

3.1.2.3 End result
Endangered
Species

3.2 Grouped initiative links examples

3.2.1 Content area

3.2.1.1 (X)HTML code

<div class="gcinits">
<div class="gcinit">
<div class="recruitInit">
<a href="#" title="Recruiting - Join the Armed Forces">
<span class="fontSize130">Recruiting</span>
</a>
</div>
</div>
<div class="gcinit">
<div class="endSpecInit">
<a href="#" title="Endangered Species - Information about Canada's endangered species">
<span class="fontSize110">Endangered<br />Species</span>
</a>
</div>
</div>
</div>
<div>&#160;</div>

3.2.1.2 End result
Recruiting
Endangered
Species
 

3.2.2 Right side menu

Top of Page
3.2.2.1 (X)HTML code

<div class="gcinit">
<div class="recruitInit">
<a href="#" title="Recruiting - Join the Armed Forces">
<span class="fontSize130">Recruiting</span>
</a>
</div>
</div>
<div class="gcinit">
<div class="endSpecInit">
<a href="#" title="Endangered Species - Information about Canada's endangered species">
<span class="fontSize110">Endangered<br />Species</span>
</a>
</div>
</div>

3.2.2.2 End result
Recruiting
Endangered
Species

4.0 Client-side CSS for enhancing accessibility

Initiative links require a specific visual design, which may require a workaround to enhance accessibility where circumstances warrant. The institution link 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 create a custom style sheet and instruct the browser to use it.

To create a custom style sheet, a client requires knowledge of both CSS and how Web 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 institutional link solution, TBS provides client-side CSS that can easily be included in custom style sheets. This client-side CSS should be made available on the institutional help page for clients to download.

4.1 High contrast institution link with no background image

To meet both appealing visual design and accessibility requirements, it is necessary to display foreground link text over a background image. Depending on the current font size and the colours used, the contrast between the foreground text and background image may not be sufficient for certain clients.

Clients can ensure high contrast initiative links by disabling the background image, setting text properties to default values and specifying a high contrast foreground and background colour combination by including the following client-side CSS in their custom style sheets:

.gcinit div {
      background: none #FFF !important;
}
.gcinit span {
      color: #00F !important;
}
.gcinit a, .gcinit a:visited, #center .gcinit a, #center .gcinit a:visited {
      text-decoration: underline !important;
      text-transform: capitalize;
      color: #00F !important;
      font-family: Verdana, Arial, Helvetica, Sans-serif !important;
      font-style: normal !important;
      font-variant: normal !important;
      font-weight: bold !important;
      line-height: normal !important;
      letter-spacing: normal !important;
      word-spacing: normal !important;
      background-color: transparent !important;
}