Image, Logo and Icon
- An image is a visual representation of something (person, place, thing or an action).
- A logo is a symbol or an emblem used to aid and promote public identification and recognition.
- An icon is a small graphical image that represents the topic or information category. They do not convey meaning. Therefore, real text must accompany the icon to ensure accessibility requirement are met. Use one of the two icon sets, Glyphicons or Font Awesome for decorative purposes.
Note: if your image is an infographic, refer to our Web Design and Development Toolkit for Infographics since the requirements and specifications are different.
Content Approver
Content Approver
Before Submitting an Image or a Logo:
Beware that most images are protected by copyright. Only use images from approved sources, and obtain the necessary permission to use them.
Ensure they meet colour principals and other criteria. Refer to the colour contrast section in the Accessibility Guide.
Your Request Must Include:
- Final and approved Microsoft Word mockup (English and French);
- Provide an image in a .jpg or .png format (English and French if applicable);
- Provide an alt text that describe the image.
Visit our Prepare Content page for instructions on how to create a mockup.
Content Publisher
Content Publisher
Types of Images
There are two common image formats used on iService, Jpeg and Portable Network Graphics (PNG). Even though Graphics Interchange Format (GIF) can be displayed in a browser, PNG is a better format. Requests to post animated GIF will not be published as this is not an accessible format for time based media.
Icons
Icons are glyphs − picture-based fonts, similar to wingdings. They do not convey meaning, unlike traditional fonts. Therefore, real text must accompany the icon to ensure accessibility requirements are met. Make the text visible or invisible, as long as it is present. Use one of the two icon sets, Glyphicons or Font Awesome for decorative purposes. A code has been added to the iService CSS that gives access to use solid style Font Awesome icons. Read more about icons.
Accessibility
There is a lot of information available about making images accessible. Read these articles about how and what makes images on a web page useful for everyone.
- Accessible Images
-
Most people know that you need to provide alternative text for images. There is much more to the accessibility of an image than just its
alttext. There are many additional accessibility principles and techniques regarding images.
Read more about Accessible Images. - Alternative Text
-
Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement.
In many cases you can ask the question
"If I could not use this image, what would I put in its place?" to determine appropriate alternative text.Read about Alternative Text.
- Contrast and Colour Accessibility
-
Contrast and colour use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. In order to pull together the terms and principles needed to understand WCAG 2 requirements for contrast and colour read about Contrast and Color Accessibility and Contrast Checker.
- Images Style Guide in the WET
-
For examples and coding methods read Images style guide in the WET.
Categories of Images and Basic Coding Methods
There are four categories for images:
- Decorative
- Simple
- Complex
- Image of text
Decorative
Although decorative images support the content, they do not carry a message. This beach scene may support content about retirement but it does not have an information to communicate, therefore the alt text for this decorative image remains empty. The class "img-responsive" is used to make the image fit the area it's in which can vary depending on the screen size and device.
<img src="/eng/hr/images/beach_day.JPG" alt="" class="img-responsive" />
Simple
Simple images have some text in the image that needs to be represented in a text format. If the number of characters is less than 160 it can be put in the alt="" of the image code. Alt text that is longer than 160 characters is added below the image and the alt text then has a short description and the location of the long description.
<img src="/eng/hr/ohs/topics/coronavirus/imgs/everything-covid-19.png" alt="Everything you need to know about the Coronavirus" />
Complex
Complex images have a lot of information they are communicating such as infographics, charts and graphs. The message the image carries needs to be communicated in an alternative text to ensure the information is available to everyone and can be consumed by different methods. The alt="" of the image must contain a short description and the location of the long description.
<img src="/eng/finance/ip/images/categories_ip_reported_piechart.PNG" alt="Intellectual Property breakdown chart. Long description below" class="img-responsive" />
Intellectual Property Breakdown Chart
Long Description
| Property | Percentage |
|---|---|
| Reports | 40% |
| Training | 10% |
| HR Docs | 9% |
| No IP | 7% |
| Coding | 6% |
| Research | 6% |
| Project Management | 4% |
| Other | 18% |
Infographics
Infographics are complex images that are published as a large image with a long description as a single page of content. There may also be a link to a larger image or a PDF to offer the user a printable version.
Accessible Canada Act – visual representations
More about publishing Infographics.