From ccf0f5d0fcca5281cf7faa8ad1acf4930331336e Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 07:02:21 -0400 Subject: [PATCH 01/27] CCCSG-183-184 Fix Share and alt language rule link --- style-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-guide/index.md b/style-guide/index.md index c15bad2649..b3bd1b0528 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -295,7 +295,7 @@ title: "Canada.ca Content Style Guide" Instead of: obtain

-

See how this rule applies to content in French

+

See how this rule applies to content in French

Share this rule by email

From 63028b5c05d70be76764319da592d4ec2b7f1a2a Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 07:14:33 -0400 Subject: [PATCH 02/27] Update index.md --- style-guide/index.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index b3bd1b0528..055fb5378b 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -272,10 +272,12 @@ title: "Canada.ca Content Style Guide"
Example of direct statements

Write: Present your passport to the border officer.
Instead of: According to Canadian legislation, you're required to present your passport to the agent who will welcome you into the country.

-
- -

See how this rule applies to content in French

-

Share this rule by email

+

See how this rule applies in French

+ +
+
From 3646cb428f6118fb196256b1f119b14626c33ff7 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 07:17:12 -0400 Subject: [PATCH 03/27] Update index.md --- style-guide/index.md | 465 ++++++++++++++++++++++--------------------- 1 file changed, 233 insertions(+), 232 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 055fb5378b..8d2417229b 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -272,257 +272,258 @@ title: "Canada.ca Content Style Guide"
Example of direct statements

Write: Present your passport to the border officer.
Instead of: According to Canadian legislation, you're required to present your passport to the agent who will welcome you into the country.

-

See how this rule applies in French

+

See how this rule applies in French

-
-
-
- -
-

2.2 Use simple and common words

-

Replace long words with short, simple and everyday words that most people understand and use. Simple words have 2 syllables or less. They're easier to scan than long, complex words.

-

Example of simple and common words

-

Write: ask
- Instead of: make a request

-

Write: you must
- Instead of: you shall

-

Write: to
- Instead of: in order to

-

Write: before
- Instead of: prior to

-

Write: get
- Instead of: obtain

-
- -

See how this rule applies to content in French

-

Share this rule by email

+
+
-
-

2.3 Use active voice and positive form

-

Whenever possible use the:

-
    -
  • active voice instead of the passive voice
    • -
  • positive form instead of the negative form
    • -
-
-

Active or passive voice

-

In an active sentence, the subject does the action. The sentence is clear and direct.

-

In a passive sentence, it may not be clear who or what is doing the action.

-
Example of passive and active sentences
-

Active: We may ask you to provide proof of citizenship.
- Passive: You may be asked to provide proof of citizenship.

-
-
-

Positive or negative form

-

Whenever possible, tell people what they may or must do instead of what they may not or must not do. Avoid negatives, double negatives and exceptions to exceptions.

-
Examples of positive and negative sentences
-

Positive: You're entitled to part of the deduction.
- Negative: You're not entitled to the entire deduction.

-

Positive: The procedure will be effective.
- Double negative: The procedure will not be ineffective.

-

Positive: You may claim a child born in 1972 or earlier as a dependent, if he or she has a mental or physical disability.
- Double negative: You may not claim anything for a dependent child born in 1972 or earlier, unless the child has a mental or physical disability.

-

If something has serious consequences, you can use the negative form to explain that something isn't possible or should not be done.

-
Examples of using the negative form for something that has serious consequences
-

Write: Do not try to locate the source of carbon monoxide. Leave your home immediately and move to fresh air.

-
- -

See how this rule applies to content in French

-

Share this rule by email

-
-
-
-
-

2.4 Use verbs instead of nouns formed from verbs

-

Avoid using nouns that are formed from verbs. They can be vague. Verbs alone clearly express the action needed.

-

Examples of the use of verbs instead of nouns

-

Write: apply
- Instead of: submit your application

-

Write: consider
- Instead of: take into consideration

-

Write: modify
- Instead of: make a modification

-

Write: needs
- Instead of: is in need of

-

Always use the simplest form of a verb. When possible, use the present tense.

-
- -

See how this rule applies to content in French

-

Share this rule by email

-
+
+
+

2.2 Use simple and common words

+

Replace long words with short, simple and everyday words that most people understand and use. Simple words have 2 syllables or less. They're easier to scan than long, complex words.

+

Example of simple and common words

+

Write: ask
+ Instead of: make a request

+

Write: you must
+ Instead of: you shall

+

Write: to
+ Instead of: in order to

+

Write: before
+ Instead of: prior to

+

Write: get
+ Instead of: obtain

+
+ +

See how this rule applies to content in French

+

Share this rule by email

+
+
+
+

2.3 Use active voice and positive form

+

Whenever possible use the:

+
    +
  • active voice instead of the passive voice
    • +
  • positive form instead of the negative form
    • +
+
+

Active or passive voice

+

In an active sentence, the subject does the action. The sentence is clear and direct.

+

In a passive sentence, it may not be clear who or what is doing the action.

+
Example of passive and active sentences
+

Active: We may ask you to provide proof of citizenship.
+ Passive: You may be asked to provide proof of citizenship.

-
-

2.5 Avoid jargon, idioms and expressions

-

Where possible, avoid using jargon, idioms and expressions. Use the clearest, most popular term for your audience.

-

Legal and technical terms and "government-speak" confuse most people.

-

People who don't speak English or French might use online tools to translate text. These tools don't always translate idioms and expressions accurately.

-

Examples of jargon, idioms and expressions

-

Jargon: bench warrant (an order by a judge to arrest someone who didn't show up in court or comply with certain conditions)

-

Idiom: to hire a helping hand (meaning to hire an employee)

-

Expression: attack your least favourite task first (meaning do your least favourite task first)

-

If you must include jargon familiar to your target audience, be sure to:

-
    -
  • explain it using simple, familiar words or give an example to help non-specialists understand
    • -
  • never use jargon to explain jargon
    • -
-

Examples of statements that avoid the use of jargon

-

Write: You have to file your income tax return (T1) by April 30.
- Instead of: You have to file your T1 return by April 30.

-

Write: Learn about savings plans that can help you save enough money to retire.
- Instead of: Learn about different types of savings plans that will let you build up your retirement nest egg.

-

Identify keywords your audience is using to find your content

-

Tools you can use to see which search terms are most popular:

- -

Refer to your analytics to find out which search terms your audience uses to find related content.

+
+

Positive or negative form

+

Whenever possible, tell people what they may or must do instead of what they may not or must not do. Avoid negatives, double negatives and exceptions to exceptions.

+
Examples of positive and negative sentences
+

Positive: You're entitled to part of the deduction.
+ Negative: You're not entitled to the entire deduction.

+

Positive: The procedure will be effective.
+ Double negative: The procedure will not be ineffective.

+

Positive: You may claim a child born in 1972 or earlier as a dependent, if he or she has a mental or physical disability.
+ Double negative: You may not claim anything for a dependent child born in 1972 or earlier, unless the child has a mental or physical disability.

+

If something has serious consequences, you can use the negative form to explain that something isn't possible or should not be done.

+
Examples of using the negative form for something that has serious consequences
+

Write: Do not try to locate the source of carbon monoxide. Leave your home immediately and move to fresh air.

-

See how this rule applies to content in French

-

Share this rule by email

+

See how this rule applies to content in French

+

Share this rule by email

-
-

2.6 Use simple sentences

-

Keep sentence structure simple by putting the subject and the verb at the beginning of the sentence and by using the subject + verb + object construction. This structure helps the reader understand what the subject of the sentence is doing by placing the subject first, followed by the verb.

-

Avoid complex and compound sentences. They generally contain too much information for people to understand when they're scanning.

-

Examples of simple sentences

-

Write: Learn about Canada's transportation system. Find information about using paved roads, bike trails, airports and ports across the country.
- Instead of: Canada's vast transportation system enables millions of people each year to travel throughout the country, around the world, and to work and back. From this page you can access a wealth of transportation information related to travelling and commuting.

-

Replace complex sentence structures with direct statements.

-

Examples of direct statements

-

Write: You have until April 30 to file your tax return.
- Instead of: The period of time that you have to file your tax return ends on April 30.

-

Replace noun strings (a series of 2 or more nouns used to name something) with direct statements.

-

Examples of statements that avoid chains of nouns

-

Write: The evaluation team will submit its final report on the training program in September.
- Instead of: The training program evaluation team will submit its final report in September.

-

Surround a long sentence with shorter ones because it helps people understand the long sentence.

-
- -

See how this rule applies to content in French

-

Share this rule by email

-
+
+
+

2.4 Use verbs instead of nouns formed from verbs

+

Avoid using nouns that are formed from verbs. They can be vague. Verbs alone clearly express the action needed.

+

Examples of the use of verbs instead of nouns

+

Write: apply
+ Instead of: submit your application

+

Write: consider
+ Instead of: take into consideration

+

Write: modify
+ Instead of: make a modification

+

Write: needs
+ Instead of: is in need of

+

Always use the simplest form of a verb. When possible, use the present tense.

+
+ +

See how this rule applies to content in French

+

Share this rule by email

+
+
+
+

2.5 Avoid jargon, idioms and expressions

+

Where possible, avoid using jargon, idioms and expressions. Use the clearest, most popular term for your audience.

+

Legal and technical terms and "government-speak" confuse most people.

+

People who don't speak English or French might use online tools to translate text. These tools don't always translate idioms and expressions accurately.

+

Examples of jargon, idioms and expressions

+

Jargon: bench warrant (an order by a judge to arrest someone who didn't show up in court or comply with certain conditions)

+

Idiom: to hire a helping hand (meaning to hire an employee)

+

Expression: attack your least favourite task first (meaning do your least favourite task first)

+

If you must include jargon familiar to your target audience, be sure to:

+
    +
  • explain it using simple, familiar words or give an example to help non-specialists understand
    • +
  • never use jargon to explain jargon
    • +
+

Examples of statements that avoid the use of jargon

+

Write: You have to file your income tax return (T1) by April 30.
+ Instead of: You have to file your T1 return by April 30.

+

Write: Learn about savings plans that can help you save enough money to retire.
+ Instead of: Learn about different types of savings plans that will let you build up your retirement nest egg.

+

Identify keywords your audience is using to find your content

+

Tools you can use to see which search terms are most popular:

+ +

Refer to your analytics to find out which search terms your audience uses to find related content.

+
+ +

See how this rule applies to content in French

+

Share this rule by email

+
+
+
+

2.6 Use simple sentences

+

Keep sentence structure simple by putting the subject and the verb at the beginning of the sentence and by using the subject + verb + object construction. This structure helps the reader understand what the subject of the sentence is doing by placing the subject first, followed by the verb.

+

Avoid complex and compound sentences. They generally contain too much information for people to understand when they're scanning.

+

Examples of simple sentences

+

Write: Learn about Canada's transportation system. Find information about using paved roads, bike trails, airports and ports across the country.
+ Instead of: Canada's vast transportation system enables millions of people each year to travel throughout the country, around the world, and to work and back. From this page you can access a wealth of transportation information related to travelling and commuting.

+

Replace complex sentence structures with direct statements.

+

Examples of direct statements

+

Write: You have until April 30 to file your tax return.
+ Instead of: The period of time that you have to file your tax return ends on April 30.

+

Replace noun strings (a series of 2 or more nouns used to name something) with direct statements.

+

Examples of statements that avoid chains of nouns

+

Write: The evaluation team will submit its final report on the training program in September.
+ Instead of: The training program evaluation team will submit its final report in September.

+

Surround a long sentence with shorter ones because it helps people understand the long sentence.

+
+ +

See how this rule applies to content in French

+

Share this rule by email

+
+
+
+

2.7 Use short sentences and paragraphs

+

Be concise. Use as few words as possible to express an idea. By being concise, you'll help everyone, even specialists, complete the task they set out to do.

+

Keep sentences and paragraphs short to make them easier to scan on any screen size. People who have learning disabilities may find it difficult to scan and understand long sentences and paragraphs.

+

Try to keep sentences under 20 words. You can do this by: 

+
    +
  • breaking long sentences into shorter ones
    • +
  • limiting each sentence to 1 idea
    • +
  • removing unnecessary words
    • +
+

Examples of shortened sentences

+

Write: We received your request for funding and approved it.
+ Instead of: We received your request for funding, which we've thoroughly reviewed and approved in a timely manner.

+

Write: We'll consider any type of investment.
+ Instead of: Any type of investment will be taken into consideration.

+

Try to keep paragraphs to 3 sentences. You can do this by:

+
    +
  • developing 1 main idea per paragraph
    • +
  • presenting a series of more than 2 ideas or words as a vertical list
    • +
  • using a short form for a long title instead of repeating it
    • +
+
+ +

See how this rule applies to content in French

+

Share this rule by email

+
+
+
+

2.8 Explain references to legislation

+

When explaining a requirement that comes from an act or regulation, avoid mentioning the act or regulation by name. Include only the information people need to complete the task.

+

If you must include the name of the act or regulation, always give a plain-language description. First, explain what your audience needs to know and why they need to know more about the act or regulation. Then, you may add the reference to the act or regulation.

+

Examples of references to legislation

+

Write: You can apply for your child to become a Canadian citizen after they arrive in Canada as a permanent resident.

+

Related links

+ +

Instead of: After your child arrives in Canada as a permanent resident, you can apply for citizenship on the child's behalf under section 5.1 of the Citizenship Act.

+
+ +

See how this rule applies to content in French

+

Share this rule by email

+
+
+
+

2.9 Check the reading level of the content

+

Check the reading level of your text. Make sure that it meets the reading level you're targeting based on the literacy needs of your audience. Do this every so often while you're writing content. You can use various tools to do this.

+

Readability tools help you check if content is too wordy or complex. Writing content at a reading level above grade 8 can make it difficult for many people to understand or complete their task.

+
+

Use a readability tool

+

You can use a readability tool like Flesch-Kincaid to check the reading level of your English content. This tool is available as part of Microsoft Word. It generally reflects the years of education needed to understand the text.

+

To use Flesch-Kincaid:

+
    +
  1. in Word 2010 and later, click the File tab, and then click Options
    2. +
  2. click Proofing
    3. +
  3. under When correcting spelling and grammar in Word, make sure the Check grammar with spelling check box is selected
    4. +
  4. select Show readability statistics  
    5. +
+

You can check the reading level of a whole page or just part of a page. To check the reading level:

+
    +
  1. accept any tracked changes
    2. +
  2. place periods at the end of any bulleted items and headings (remove the periods before publishing)
    3. +
  3. highlight the text in your Word document
    4. +
  4. click the Review tab
    5. +
  5. click Spelling & Grammar
    6. +
  6. when Word has finished checking the text, it will ask whether you want to check the rest of the content
    7. +
  7. click No
    8. +
+

If your text contains technical terms that consist of long, multi-syllable words that you need to use for your specialized audience, remove these terms before you test the content for readability to see whether the surrounding text can be simplified. Reinsert the technical terms once you've simplified the surrounding text.

+

The Readability Statistics dialog box will appear and show the Flesch-Kincaid grade level.

+
+
Figure 2
+ Screen capture of a readability statistics dialog box in Microsoft Word. Text version below: +
+ Figure 2 - Text version +

A screen capture of Microsoft Word's readability statistics dialog box shows that a sample of text got a Flesch-Kincaid reading level of 5.8.

+
+
+

In newer versions of Microsoft Word, search for "Flesch-Kincaid" using the help feature.

-
-

2.7 Use short sentences and paragraphs

-

Be concise. Use as few words as possible to express an idea. By being concise, you'll help everyone, even specialists, complete the task they set out to do.

-

Keep sentences and paragraphs short to make them easier to scan on any screen size. People who have learning disabilities may find it difficult to scan and understand long sentences and paragraphs.

-

Try to keep sentences under 20 words. You can do this by: 

+
+

Follow the reading level requirements

+

Evaluate the reading level of content as follows for:

    -
  • breaking long sentences into shorter ones
    • -
  • limiting each sentence to 1 idea
    • -
  • removing unnecessary words
    • +
  • navigation content (home, theme and topic pages), aim for no higher than grade 8
    • +
  • all other content intended for general audiences, aim for grade 8 or lower
    • +
  • content intended for experts, determine the appropriate grade level and apply it across all content for this audience
-

Examples of shortened sentences

-

Write: We received your request for funding and approved it.
- Instead of: We received your request for funding, which we've thoroughly reviewed and approved in a timely manner.

-

Write: We'll consider any type of investment.
- Instead of: Any type of investment will be taken into consideration.

-

Try to keep paragraphs to 3 sentences. You can do this by:

+
+
+

Verify whether the content is easy to understand

+

Readability tools reveal the reading level of your content, but they can't tell you whether it makes sense.

+

To check whether your content is easy to read and understand, test it:

    -
  • developing 1 main idea per paragraph
    • -
  • presenting a series of more than 2 ideas or words as a vertical list
    • -
  • using a short form for a long title instead of repeating it
    • +
  • ask colleagues who aren't familiar with the subject to review the text for clarity and logic
    • +
  • work with your communications team to set up usability testing for your content
-
- -

See how this rule applies to content in French

-

Share this rule by email

-
-
-
-

2.8 Explain references to legislation

-

When explaining a requirement that comes from an act or regulation, avoid mentioning the act or regulation by name. Include only the information people need to complete the task.

-

If you must include the name of the act or regulation, always give a plain-language description. First, explain what your audience needs to know and why they need to know more about the act or regulation. Then, you may add the reference to the act or regulation.

-

Examples of references to legislation

-

Write: You can apply for your child to become a Canadian citizen after they arrive in Canada as a permanent resident.

-

Related links

+

If your content has a high reading level, or if usability testing shows low task completion, try to:

    -
  • Citizenship Act, section 5.1
    • +
  • shorten words, sentences or paragraphs, but keep words of 3 or more syllables if they're well known
    • +
  • replace technical jargon with terms that people will understand
    • +
  • remove details that people don't need to complete the task
    • +
  • replace secondary references to a program with "program" rather than using its full name or abbreviation
    • +
  • create numbered or bulleted lists for key tasks
-

Instead of: After your child arrives in Canada as a permanent resident, you can apply for citizenship on the child's behalf under section 5.1 of the Citizenship Act.

-
- -

See how this rule applies to content in French

-

Share this rule by email

-
-
-
-

2.9 Check the reading level of the content

-

Check the reading level of your text. Make sure that it meets the reading level you're targeting based on the literacy needs of your audience. Do this every so often while you're writing content. You can use various tools to do this.

-

Readability tools help you check if content is too wordy or complex. Writing content at a reading level above grade 8 can make it difficult for many people to understand or complete their task.

-
-

Use a readability tool

-

You can use a readability tool like Flesch-Kincaid to check the reading level of your English content. This tool is available as part of Microsoft Word. It generally reflects the years of education needed to understand the text.

-

To use Flesch-Kincaid:

-
    -
  1. in Word 2010 and later, click the File tab, and then click Options
    2. -
  2. click Proofing
    3. -
  3. under When correcting spelling and grammar in Word, make sure the Check grammar with spelling check box is selected
    4. -
  4. select Show readability statistics  
    5. -
-

You can check the reading level of a whole page or just part of a page. To check the reading level:

-
    -
  1. accept any tracked changes
    2. -
  2. place periods at the end of any bulleted items and headings (remove the periods before publishing)
    3. -
  3. highlight the text in your Word document
    4. -
  4. click the Review tab
    5. -
  5. click Spelling & Grammar
    6. -
  6. when Word has finished checking the text, it will ask whether you want to check the rest of the content
    7. -
  7. click No
    8. -
-

If your text contains technical terms that consist of long, multi-syllable words that you need to use for your specialized audience, remove these terms before you test the content for readability to see whether the surrounding text can be simplified. Reinsert the technical terms once you've simplified the surrounding text.

-

The Readability Statistics dialog box will appear and show the Flesch-Kincaid grade level.

-
-
Figure 2
- Screen capture of a readability statistics dialog box in Microsoft Word. Text version below: -
- Figure 2 - Text version -

A screen capture of Microsoft Word's readability statistics dialog box shows that a sample of text got a Flesch-Kincaid reading level of 5.8.

-
-
-

In newer versions of Microsoft Word, search for "Flesch-Kincaid" using the help feature.

-
-
-

Follow the reading level requirements

-

Evaluate the reading level of content as follows for:

-
    -
  • navigation content (home, theme and topic pages), aim for no higher than grade 8
    • -
  • all other content intended for general audiences, aim for grade 8 or lower
    • -
  • content intended for experts, determine the appropriate grade level and apply it across all content for this audience
    • -
-
-
-

Verify whether the content is easy to understand

-

Readability tools reveal the reading level of your content, but they can't tell you whether it makes sense.

-

To check whether your content is easy to read and understand, test it:

-
    -
  • ask colleagues who aren't familiar with the subject to review the text for clarity and logic
    • -
  • work with your communications team to set up usability testing for your content
    • -
-

If your content has a high reading level, or if usability testing shows low task completion, try to:

-
    -
  • shorten words, sentences or paragraphs, but keep words of 3 or more syllables if they're well known
    • -
  • replace technical jargon with terms that people will understand
    • -
  • remove details that people don't need to complete the task
    • -
  • replace secondary references to a program with "program" rather than using its full name or abbreviation
    • -
  • create numbered or bulleted lists for key tasks
    • -
-
-
- -

See how this rule applies to content in French

-

Share this rule by email

-
+
+ +

See how this rule applies to content in French

+

Share this rule by email

+
+

3.0 Tone

From 6dd54a26fb416003a21a858e962b904fffb52840 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 07:20:44 -0400 Subject: [PATCH 04/27] Update index.md --- style-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-guide/index.md b/style-guide/index.md index 8d2417229b..7df7dffae8 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -272,7 +272,7 @@ title: "Canada.ca Content Style Guide"
Example of direct statements

Write: Present your passport to the border officer.
Instead of: According to Canadian legislation, you're required to present your passport to the agent who will welcome you into the country.

-

See how this rule applies in French

+

See how the rule for the inverted pyramid structure applies in French

From f7d4a58ded3183ee87bcfcf7378cb9eafafc0260 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 07:27:33 -0400 Subject: [PATCH 05/27] Update index.md --- style-guide/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 7df7dffae8..6e945594ee 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -272,13 +272,13 @@ title: "Canada.ca Content Style Guide"
Example of direct statements

Write: Present your passport to the border officer.
Instead of: According to Canadian legislation, you're required to present your passport to the agent who will welcome you into the country.

-

See how the rule for the inverted pyramid structure applies in French

+

See how this rule applies in French

-
+
From d5113228e426ed475923532485a8a3cd27d9ecc3 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 07:30:13 -0400 Subject: [PATCH 06/27] Update index.md --- style-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-guide/index.md b/style-guide/index.md index 6e945594ee..00740f74d8 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -272,7 +272,7 @@ title: "Canada.ca Content Style Guide"
Example of direct statements

Write: Present your passport to the border officer.
Instead of: According to Canadian legislation, you're required to present your passport to the agent who will welcome you into the country.

-

See how this rule applies in French

+

See how rule for the inverted pyramid structure applies in French

From ee704bffb542e143cd98a07df4214eef3e029b93 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 08:00:58 -0400 Subject: [PATCH 07/27] Update index.md --- style-guide/index.md | 83 ++++++++++++++++++++++++++------------------ 1 file changed, 49 insertions(+), 34 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 00740f74d8..a0ad33a869 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -296,10 +296,12 @@ title: "Canada.ca Content Style Guide" Instead of: prior to

Write: get
Instead of: obtain

-
- -

See how this rule applies to content in French

-

Share this rule by email

+

See how the rule for using simple and common words applies to content in French

+ +
+
@@ -330,12 +332,14 @@ title: "Canada.ca Content Style Guide"

If something has serious consequences, you can use the negative form to explain that something isn't possible or should not be done.

Examples of using the negative form for something that has serious consequences

Write: Do not try to locate the source of carbon monoxide. Leave your home immediately and move to fresh air.

-
- -

See how this rule applies to content in French

-

Share this rule by email

-
+

See how the rule for active voice and positive form applies to content in French

+ +
+
+

2.4 Use verbs instead of nouns formed from verbs

@@ -350,10 +354,12 @@ title: "Canada.ca Content Style Guide"

Write: needs
Instead of: is in need of

Always use the simplest form of a verb. When possible, use the present tense.

-
- -

See how this rule applies to content in French

-

Share this rule by email

+

See how the rule for using verbs instead of nouns formed from verbs applies in French

+ +
+
@@ -384,10 +390,12 @@ title: "Canada.ca Content Style Guide"
  • Mozilla Firefox's Keywords Everywhere 

    • Refer to your analytics to find out which search terms your audience uses to find related content.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for jargon, idioms and expressions applies to content in French

    + +
    +
    @@ -406,10 +414,12 @@ title: "Canada.ca Content Style Guide"

    Write: The evaluation team will submit its final report on the training program in September.
    Instead of: The training program evaluation team will submit its final report in September.

    Surround a long sentence with shorter ones because it helps people understand the long sentence.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how this rule for using simple sentences applies in French

    + +
    +
    @@ -433,10 +443,12 @@ title: "Canada.ca Content Style Guide"
  • presenting a series of more than 2 ideas or words as a vertical list
  • using a short form for a long title instead of repeating it
    • -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how rule for using short sentences and paragraphs applies in French

    + +
    +
    @@ -450,10 +462,12 @@ title: "Canada.ca Content Style Guide"
  • Citizenship Act, section 5.1

    • Instead of: After your child arrives in Canada as a permanent resident, you can apply for citizenship on the child's behalf under section 5.1 of the Citizenship Act.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how rule for explaining references to legislation applies in French

    + +
    +
    @@ -518,13 +532,14 @@ title: "Canada.ca Content Style Guide"
  • create numbered or bulleted lists for key tasks
    • -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how rule for measuring content for readability applies in French

    + +
    +
    -

    3.0 Tone

    From f7e8ca167e4cb46377850bd5b6cf76f96ce0431d Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 08:11:38 -0400 Subject: [PATCH 08/27] Update index.md --- style-guide/index.md | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index a0ad33a869..5ad0193303 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -609,12 +609,14 @@ title: "Canada.ca Content Style Guide"

    Instead of: How do I renew my passport?

    Exception

    You may use "my" in content, page titles and links for proper names (such as My Service Canada Account).

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -
    +

    See how the rule for writing directly to the audience applies in French

    + +
    +
    +

    3.2 Use "we" to refer to the Government of Canada

    @@ -652,10 +654,12 @@ title: "Canada.ca Content Style Guide"

    Write: If you plan to travel to or transit through the United States, find out about the rules you need to follow from U.S. Customs and Border Protection.
    Instead of: If you plan to travel to or transit through the U.S., CBSA encourages you to visit the U.S. Customs and Border Protection website for information on the U.S. Western Hemisphere Travel Initiative, and the requirements for entering or returning to the U.S.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for referring to the Government of Canada applies in French

    + +
    +
    @@ -680,10 +684,12 @@ title: "Canada.ca Content Style Guide"
  • don't use "can" or "could" (expresses ability)
    • -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for expressing an obligation or a recommendation applies in French

    + +
    +
    From 0ce6dff41ea8158f7c8f287db2febc9b76dc86d4 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 09:40:33 -0400 Subject: [PATCH 09/27] Update index.md --- style-guide/index.md | 596 +++++++++++++++++++++++-------------------- 1 file changed, 315 insertions(+), 281 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 5ad0193303..43df2f2e1d 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -853,300 +853,334 @@ title: "Canada.ca Content Style Guide"

    See how this rule applies to content in French

    Share this rule by email

    - -
    -

    4.2 Underlining, bold and italics

    -

    Formatting must support the most important information on the page.

    -

    Don't combine styles, like underlining and bold formatting, unless it's part of the hyperlinked text found on a topic page.

    -

    Underlining

    -

    Use underlining for links only.

    -

    Bold

    -

    Use bold for emphasis, but use it sparingly: the more you use it, the less effective it is.

    -

    Italics

    -

    People with dyslexia or other reading disorders may find it difficult to read italicized text.

    -

    Don't use italics:

    -
      -
    • for design or decorative purposes
      • -
    • to emphasize a word or phrase (use bold sparingly instead)
      • -
    • for long passages of text, such as quotations
      • -
    • in page titles
      • -
    -

    Follow The Canadian Style's rules for applying italics for the following:

    -
      -
    • French and foreign words (article 6.03)
      • -
    • Latin terms and abbreviations (article 6.04)
      • -
    • titles of publications (including acts and legislation) and works of art (article 6.05)
      • -
    • legal references (article 6.06)
      • -
    • mathematical, statistical and scientific material (article 6.11)
      • -
    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -
    -
    -
    -

    4.3 Symbols

    -

    Some symbols make web content more difficult to read while others improve readability. Research whether they're understood by a wide audience before using them.

    -

    Ampersand

    -
      -
    • Spell out the word "and" instead of using an ampersand (&)
      • -
    • Use the ampersand only for proper names when it's part of a company name and in certain abbreviations, including: -
        -
      • R&D (research and development)
        • -
      • O&M (operating and maintenance)
        • -
      -
      • -
    -

    Percent

    -
      -
    • 20% (not 20 percent)
      • -
    • A quarter or one quarter (not ¼)
      • -
    • Half (not ½)
      • -
    -

    Currency

    -
      -
    • $100 per month
      • -
    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -
    -
    -
    -

    4.4 Abbreviations and acronyms

    -

    Don't use an abbreviation or acronym unless it's better known to the widest audience than its long-form equivalent. For example:

    -
      -
    • EI
      • -
    • RCMP
      • -
    • T4
      • -
    -

    Research common keywords

    -

    Check your analytics to find out what keywords your audiences are using to find your content.

    -

    If you have to use a multi-word term more than once on a web page, use the full term the first time you use it. For any further uses of the term:

    -
      -
    • use a short form such as "the program" or "the plan," in lower case instead of repeating the full term or using an abbreviation
      • -
    • only use an abbreviation for a secondary reference if analytics data or usability testing determines that people often use and search for the abbreviation
      • -
    -

    Always spell out an abbreviation the first time you use it on a page. 

    -

    Example of statements that avoid the use of abbreviations and acronyms

    -

    Write: There are 15 client contact centres across Canada.
    - Instead of: There are 15 CCCs across Canada.

    -

    Write: The act strengthens the Government of Canada's commitment to…
    - Instead of: The EEA strengthens the Government of Canada's commitment to…

    -

    Include abbreviations that your audience uses in your metadata (for example, in the description field) to help search engines find your page more easily.

    -

    Avoid abbreviations and acronyms by rethinking the content

    -

    If your content contains a lot of abbreviations and acronyms, rethink its structure. Consider placing related content under distinct headings and sections.

    -

    For example, when introducing legal requirements, use the title of the act once, if necessary, and then talk about what people "must" do. The context will make it clear that the things they "must" do are requirements under the act. Don't use the abbreviation for the act, because it makes the text harder to follow.

    -

    Close the topic before referring to other obligations under different legislation.

    -
    -

    Latin abbreviations

    -

    Avoid using e.g. and i.e. Use clearer alternatives instead, for example:

    -

    Write: for example, such as, or like
    - Instead of: e.g.

    -

    Write: that is, in other words
    - Instead of: i.e.

    -

    You may use these abbreviations when space is limited, for example, in a table or a figure.

    -
    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -
    -
    -
    -

    4.5 Contractions

    -

    Use contractions that people use when they speak. They're easier to scan than the full form.

    -

    Use most positive contractions of auxiliary verbs. For example:

    +

    See how the rule for capitalization and punctuation applies in French

      -
    • you've (you have), you're (you are), you'll (you will) or you'd (you would)
      • -
    • we've (we have), we're (we are), we'll (we will) or we'd (we would)
      • +
    • 4.1 Majuscules et ponctuation
    -

    Use some negative contractions of auxiliary verbs. For example:

    -
      -
    • can't (cannot)
      • -
    • don't (do not) or didn't (did not)
      • -
    • won't (will not)
      • -
    • isn't (is not)
      • -
    • weren't (were not) or wasn't (was not)
      • -
    • aren't (are not)
      • -
    -

    Use, but don't confuse:

    -
      -
    • its (possessive) and it's (it is)
      • -
    • they're (they are) and their (possessive)
      • -
    -

    Uncommon or more complex contractions can be harder for people with low literacy skills to understand.

    -

    Don't use:

    -
      -
    • should've (should have) or could've (could have)
      • -
    • shouldn't (should not), couldn't (could not) or wouldn't (would not)
      • -
    • mightn't (might not)
      • -
    • mustn't (must not)
      • -
    • it'll (it will)
      • -
    -

    Negative contractions: exceptions

    -

    Don't use contractions when there is a critical difference between two things, for example, between doing and not doing something.

    -
    Example of statements showing differences that are critical and not critical
    -

    Critical: Do not drive while taking this medicine.
    - Not critical: Most people don't have reactions to the flu vaccine.

    -
    - -

    This rule doesn't apply in French.

    -

    Share this rule by email

    -
    -
    -
    -

    4.6 Numbers

    -

    General

    -
      -
    • Write numbers as numerals (0, 1, 2, 3, etc.), except in: -
        -
      • proper names (First Baptist Church)
        • -
      • titles (Three Men in a Boat)
        • -
      • figurative expressions (one day, things will be better)
        • -
      -
      • -
    • Keep Roman numerals when used in proper names (Canada Gazette, Part II)
      • -
    • Place a non-breaking space (Ctrl+Shift+Spacebar) between all numeral and word combinations ($5 million, 20 years)
      • -
    • Write first, second, third, and so on, up to and including ninth
      • -
    • Use the ordinal indicator in the same text size (not in superscript) for numbers 10 and above (10th, 50th, 150th)
      • -
    • Use "to" instead of an en dash in number ranges (for example, $4,000 to $10,000, 4 to 10 years)
      • -
    -

    Ages

    -
      -
    • Adults aged 30 or more
      • -
    • People 30 to 65 years old
      • -
    • A 10-year-old child
      • -
    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -
    -
    -
    -

    4.7 Dates

    -
      -
    • Write dates without an ordinal indicator ("st," "nd," "rd," "th")
      • -
    -

    Write: July 31, 2016, or just July 31 if the year is already clear
    - Instead of: July 31st, 2016, or July 31st

    -
      -
    • Use non-breaking spaces between the month and the day
      • -
    • Use the numeric date format only when space is limited (for example, in a table) -
        -
      • write yyyy-mm-dd
        • -
      • explain the format in surrounding text (for example, notes, legends)
        • -
      -
      • -
    • Capitalize the first letter of the month (for example, January, February, March)
      • -
    • Abbreviate month names when space is limited (for example, Jan, Feb, Mar)
      • -
    -

    Date ranges

    -
      -
    • Use "to" instead of an en dash in date ranges. For example: -
        -
      • calendar year 2014
        • -
      • Monday to Friday
        • -
      • March 29 to April 4
        • -
      • fiscal year 2015 to 2016
        • -
      • January to March 2016 (instead of Q1, Q2, Q3 or Q4)
        • -
      -
      • -
    • For date ranges like fiscal years, explain what period the range covers in surrounding text. For example: -
        -
      • This report covers the 2015 to 2016 fiscal year. A fiscal year runs from April 1 to March 31.
        • -
      -
      • -
    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -
    -
    -
    -

    4.8 Times

    -
      -
    • 4:30 pm
      • -
    • 9 am to 5 pm
      • -
    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +
    +
    -
    -

    4.9 Phone numbers

    -

    Use non-breaking hyphens (Ctrl+Shift+Hyphen) in phone numbers. For example:

    -
      -
    • if you need help, call 1-800-622-6232
      • -
    • 613-999-9900 ext. 123
      • -
    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -
    +
    +
    +

    4.2 Underlining, bold and italics

    +

    Formatting must support the most important information on the page.

    +

    Don't combine styles, like underlining and bold formatting, unless it's part of the hyperlinked text found on a topic page.

    +

    Underlining

    +

    Use underlining for links only.

    +

    Bold

    +

    Use bold for emphasis, but use it sparingly: the more you use it, the less effective it is.

    +

    Italics

    +

    People with dyslexia or other reading disorders may find it difficult to read italicized text.

    +

    Don't use italics:

    +
      +
    • for design or decorative purposes
      • +
    • to emphasize a word or phrase (use bold sparingly instead)
      • +
    • for long passages of text, such as quotations
      • +
    • in page titles
      • +
    +

    Follow The Canadian Style's rules for applying italics for the following:

    +
      +
    • French and foreign words (article 6.03)
      • +
    • Latin terms and abbreviations (article 6.04)
      • +
    • titles of publications (including acts and legislation) and works of art (article 6.05)
      • +
    • legal references (article 6.06)
      • +
    • mathematical, statistical and scientific material (article 6.11)
      • +
    +

    See how the rule for bold, italics and underlining applies in French

    + +
    +
    +
    +
    +
    +

    4.3 Symbols

    +

    Some symbols make web content more difficult to read while others improve readability. Research whether they're understood by a wide audience before using them.

    +

    Ampersand

    +
      +
    • Spell out the word "and" instead of using an ampersand (&)
      • +
    • Use the ampersand only for proper names when it's part of a company name and in certain abbreviations, including: +
        +
      • R&D (research and development)
        • +
      • O&M (operating and maintenance)
        • +
      +
      • +
    +

    Percent

    +
      +
    • 20% (not 20 percent)
      • +
    • A quarter or one quarter (not ¼)
      • +
    • Half (not ½)
      • +
    +

    Currency

    +
      +
    • $100 per month
      • +
    +

    See how the rule for symbols applies to content in French

    + +
    +
    +
    +
    + +
    +

    4.4 Abbreviations and acronyms

    +

    Don't use an abbreviation or acronym unless it's better known to the widest audience than its long-form equivalent. For example:

    +
      +
    • EI
      • +
    • RCMP
      • +
    • T4
      • +
    +

    Research common keywords

    +

    Check your analytics to find out what keywords your audiences are using to find your content.

    +

    If you have to use a multi-word term more than once on a web page, use the full term the first time you use it. For any further uses of the term:

    +
      +
    • use a short form such as "the program" or "the plan," in lower case instead of repeating the full term or using an abbreviation
      • +
    • only use an abbreviation for a secondary reference if analytics data or usability testing determines that people often use and search for the abbreviation
      • +
    +

    Always spell out an abbreviation the first time you use it on a page. 

    +

    Example of statements that avoid the use of abbreviations and acronyms

    +

    Write: There are 15 client contact centres across Canada.
    + Instead of: There are 15 CCCs across Canada.

    +

    Write: The act strengthens the Government of Canada's commitment to…
    + Instead of: The EEA strengthens the Government of Canada's commitment to…

    +

    Include abbreviations that your audience uses in your metadata (for example, in the description field) to help search engines find your page more easily.

    +

    Avoid abbreviations and acronyms by rethinking the content

    +

    If your content contains a lot of abbreviations and acronyms, rethink its structure. Consider placing related content under distinct headings and sections.

    +

    For example, when introducing legal requirements, use the title of the act once, if necessary, and then talk about what people "must" do. The context will make it clear that the things they "must" do are requirements under the act. Don't use the abbreviation for the act, because it makes the text harder to follow.

    +

    Close the topic before referring to other obligations under different legislation.

    +
    +

    Latin abbreviations

    +

    Avoid using e.g. and i.e. Use clearer alternatives instead, for example:

    +

    Write: for example, such as, or like
    + Instead of: e.g.

    +

    Write: that is, in other words
    + Instead of: i.e.

    +

    You may use these abbreviations when space is limited, for example, in a table or a figure.

    -
    -

    4.10 Addresses

    -
    -

    Mailing addresses

    +

    See how the rule for abbreviations and acronyms applies in French

    + +
    +
    +
    +
    +
    +
    +

    4.5 Contractions

    +

    Use contractions that people use when they speak. They're easier to scan than the full form.

    +

    Use most positive contractions of auxiliary verbs. For example:

    +
      +
    • you've (you have), you're (you are), you'll (you will) or you'd (you would)
      • +
    • we've (we have), we're (we are), we'll (we will) or we'd (we would)
      • +
    +

    Use some negative contractions of auxiliary verbs. For example:

    +
      +
    • can't (cannot)
      • +
    • don't (do not) or didn't (did not)
      • +
    • won't (will not)
      • +
    • isn't (is not)
      • +
    • weren't (were not) or wasn't (was not)
      • +
    • aren't (are not)
      • +
    +

    Use, but don't confuse:

    +
      +
    • its (possessive) and it's (it is)
      • +
    • they're (they are) and their (possessive)
      • +
    +

    Uncommon or more complex contractions can be harder for people with low literacy skills to understand.

    +

    Don't use:

    +
      +
    • should've (should have) or could've (could have)
      • +
    • shouldn't (should not), couldn't (could not) or wouldn't (would not)
      • +
    • mightn't (might not)
      • +
    • mustn't (must not)
      • +
    • it'll (it will)
      • +
    +

    Negative contractions: exceptions

    +

    Don't use contractions when there is a critical difference between two things, for example, between doing and not doing something.

    +
    Example of statements showing differences that are critical and not critical
    +

    Critical: Do not drive while taking this medicine.
    + Not critical: Most people don't have reactions to the flu vaccine.

    +

    See how the rule for contractions applies in French

    + +
    +
    +
    +
    +
    +

    4.6 Numbers

    +

    General

    +
      +
    • Write numbers as numerals (0, 1, 2, 3, etc.), except in:
        -
      • Abbreviate street types, street direction and province or territory
        • -
      • Use the correct abbreviations for provinces and territories
        • -
      • Insert 2 spaces between the province or territory abbreviation and the postal code
        • -
      • Use uppercase to write the letters in the postal code
        • -
      • Don't use punctuation except for a hyphen between the unit designator and the civic number
        • +
      • proper names (First Baptist Church)
        • +
      • titles (Three Men in a Boat)
        • +
      • figurative expressions (one day, things will be better)
      -

      [Organization name or person name]
      - [Additional delivery information]
      - [Suite or office]-[Civic number] [Street name] [Abbreviated street type] [Abbreviated street direction]
      - [City] [Two-letter province or territory abbreviation] [Postal code]

      -

      Example of a mailing address.

      -

      Integrity Regime
      - Departmental Oversight Branch
      - Public Services and Procurement Canada
      - Portage III Tower A 10A1
      - 105-11 Laurier St
      - Gatineau QC  K1A 0S5

      -
    -
    -

    Email addresses

    -

    Spell out email addresses instead of embedding them within your text.

    -

    Write:

    + +
  • Keep Roman numerals when used in proper names (Canada Gazette, Part II)
    • +
  • Place a non-breaking space (Ctrl+Shift+Spacebar) between all numeral and word combinations ($5 million, 20 years)
    • +
  • Write first, second, third, and so on, up to and including ninth
    • +
  • Use the ordinal indicator in the same text size (not in superscript) for numbers 10 and above (10th, 50th, 150th)
    • +
  • Use "to" instead of an en dash in number ranges (for example, $4,000 to $10,000, 4 to 10 years)
    • + +

    Ages

    +
      +
    • Adults aged 30 or more
      • +
    • People 30 to 65 years old
      • +
    • A 10-year-old child
      • +
    +

    See how the rule for numbers applies in French

    + +
    +
    +
    +
    +
    +

    4.7 Dates

    +
      +
    • Write dates without an ordinal indicator ("st," "nd," "rd," "th")
      • +
    +

    Write: July 31, 2016, or just July 31 if the year is already clear
    + Instead of: July 31st, 2016, or July 31st

    +
      +
    • Use non-breaking spaces between the month and the day
      • +
    • Use the numeric date format only when space is limited (for example, in a table)
        -
      • Please submit your request by email to abcxyz@canada.ca.
        • -
      • Please submit your request by email: abcxyz@canada.ca.
        • +
      • write yyyy-mm-dd
        • +
      • explain the format in surrounding text (for example, notes, legends)
      -

      Instead of: Email us to submit a request.

      -
    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -
    + +
  • Capitalize the first letter of the month (for example, January, February, March)
    • +
  • Abbreviate month names when space is limited (for example, Jan, Feb, Mar)
    • + +

    Date ranges

    +
      +
    • Use "to" instead of an en dash in date ranges. For example: +
        +
      • calendar year 2014
        • +
      • Monday to Friday
        • +
      • March 29 to April 4
        • +
      • fiscal year 2015 to 2016
        • +
      • January to March 2016 (instead of Q1, Q2, Q3 or Q4)
        • +
      +
      • +
    • For date ranges like fiscal years, explain what period the range covers in surrounding text. For example: +
        +
      • This report covers the 2015 to 2016 fiscal year. A fiscal year runs from April 1 to March 31.
        • +
      +
      • +
    +

    See how the rule for dates applies in French

    + +
    +
    +
    +
    +
    +

    4.8 Times

    +
      +
    • 4:30 pm
      • +
    • 9 am to 5 pm
      • +
    +

    See how the rule for times applies in French

    + +
    +
    +
    +
    + +
    +

    4.9 Phone numbers

    +

    Use non-breaking hyphens (Ctrl+Shift+Hyphen) in phone numbers. For example:

    +
      +
    • if you need help, call 1-800-622-6232
      • +
    • 613-999-9900 ext. 123
      • +
    +

    See how the rule for phone numbers applies in French

    + +
    +
    +
    +
    + +
    +

    4.10 Addresses

    +
    +

    Mailing addresses

    +
      +
    • Abbreviate street types, street direction and province or territory
      • +
    • Use the correct abbreviations for provinces and territories
      • +
    • Insert 2 spaces between the province or territory abbreviation and the postal code
      • +
    • Use uppercase to write the letters in the postal code
      • +
    • Don't use punctuation except for a hyphen between the unit designator and the civic number
      • +
    +

    [Organization name or person name]
    + [Additional delivery information]
    + [Suite or office]-[Civic number] [Street name] [Abbreviated street type] [Abbreviated street direction]
    + [City] [Two-letter province or territory abbreviation] [Postal code]

    +

    Example of a mailing address.

    +

    Integrity Regime
    + Departmental Oversight Branch
    + Public Services and Procurement Canada
    + Portage III Tower A 10A1
    + 105-11 Laurier St
    + Gatineau QC  K1A 0S5

    -
    -

    4.11 Words and expressions in transition

    -

    Words and expressions in transition are those written commonly in 2 or more different ways. Reduce confusion by using the following spellings:

    +
    +

    Email addresses

    +

    Spell out email addresses instead of embedding them within your text.

    +

    Write:

      -
    • website (not "web site")
      • -
    • web page (not "webpage")
      • -
    • web (not "Web")
      • -
    • email (not "e-mail")
      • -
    • online (not "on line")
      • +
    • Please submit your request by email to abcxyz@canada.ca.
      • +
    • Please submit your request by email: abcxyz@canada.ca.
    -
    - -

    This rule doesn't apply to content in French.

    -

    Share this rule by email

    -
    +

    Instead of: Email us to submit a request.

    +
    + +

    See how this rule applies to content in French

    +

    Share this rule by email

    +
    +

    See how the rule for addresses applies in French

    + +
    +
    +
    +
    +
    +

    4.11 Words and expressions in transition

    +

    Words and expressions in transition are those written commonly in 2 or more different ways. Reduce confusion by using the following spellings:

    +
      +
    • website (not "web site")
      • +
    • web page (not "webpage")
      • +
    • web (not "Web")
      • +
    • email (not "e-mail")
      • +
    • online (not "on line")
      • +
    +

    See how the rule for words and expressions in transition applies in French

    +

    This rule doesn't apply to content in French.

    +
    +
    +

    5.0 Content structure

    From cfc86e864747bccedec3bdf27a41130bd4cdf6c7 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 09:59:40 -0400 Subject: [PATCH 10/27] Update index.md --- style-guide/index.md | 80 +++++++++++++++++++++++++------------------- 1 file changed, 45 insertions(+), 35 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 43df2f2e1d..f825c57574 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -848,11 +848,6 @@ title: "Canada.ca Content Style Guide"
  • simplify your sentence instead of using em dashes
    • -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -

    See how the rule for capitalization and punctuation applies in French

    -

    4.4 Abbreviations and acronyms

    Don't use an abbreviation or acronym unless it's better known to the widest audience than its long-form equivalent. For example:

    @@ -970,7 +964,6 @@ title: "Canada.ca Content Style Guide"
    -

    4.5 Contractions

    Use contractions that people use when they speak. They're easier to scan than the full form.

    @@ -1103,7 +1096,6 @@ title: "Canada.ca Content Style Guide"
    -

    4.9 Phone numbers

    Use non-breaking hyphens (Ctrl+Shift+Hyphen) in phone numbers. For example:

    @@ -1119,7 +1111,6 @@ title: "Canada.ca Content Style Guide"
    -

    4.10 Addresses

    @@ -1153,11 +1144,6 @@ title: "Canada.ca Content Style Guide"

    Instead of: Email us to submit a request.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -

    See how the rule for addresses applies in French

    • 4.10 Adresses
      • @@ -1322,10 +1308,12 @@ title: "Canada.ca Content Style Guide"

      Description metadata field: The description metatdata is the content you see under the blue hyperlinked text in search results. Avoid listing only keywords, because search engines might ignore these. Write 1 or 2 short sentences that summarize the page. Make sure they contain keywords that people use when searching for your content (for example, abbreviations familiar to your audience).

      Refer to the section on plain language for tips on using simple and common words as keywords.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for writing useful page titles and headings applies in French

    + +
    +
    @@ -1403,10 +1391,12 @@ title: "Canada.ca Content Style Guide"

    For example, listing provinces and territories in alphabetical order could be appropriate.

    If you present content in alphabetical order in English, also present it in alphabetical order in French to provide the same intuitive experience.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for using lists applies in French

    + +
    +
    @@ -1719,10 +1709,12 @@ title: "Canada.ca Content Style Guide"
  • "n/a" (not applicable)
    • -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for using tables to organize data applies in French

    + +
    +
    @@ -1997,12 +1989,14 @@ title: "Canada.ca Content Style Guide"
  • use the templates in the Canada.ca Content and Information Architecture Specification
  • see the Canada.ca page types on GitHub
    • -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -
    +

    See how the rule for using images applies in French

    + +
    +
    +

    6.2 Include alternative text for images

    @@ -2017,10 +2011,12 @@ title: "Canada.ca Content Style Guide"
  • don't use "image of..." or "graphic of..." to describe the image; screen readers do this already

    • Decorative images don't require additional information to make them accessible or visible to search engines. Use the null indicator as the alternative text (alt="").

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for alternative text for images applies in French

    + +
    +
    @@ -2128,6 +2124,13 @@ title: "Canada.ca Content Style Guide"

    See how this rule applies to content in French

    Share this rule by email

    +

    See how the rule for long descriptions applies in French

    + +
    +
    +

    6.4 Include transcripts to describe audio and video files

    @@ -2149,6 +2152,13 @@ title: "Canada.ca Content Style Guide"

    See how this rule applies to content in French

    Share this rule by email

    +

    See how the rule for transcripts applies in French

    + +
    +
    +

    7.0 Links

    From 9bfaa41f96cdfdb114f39f2521d5aef434567bca Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 10:07:30 -0400 Subject: [PATCH 11/27] Update index.md --- style-guide/index.md | 48 ++++++++++++++++++++++++++++---------------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index f825c57574..d126d6bf08 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -2209,10 +2209,12 @@ title: "Canada.ca Content Style Guide"

    Providing links to other relevant web pages can help people find related information quickly. Links to your pages from other pages may also help improve where your page ranks in search results.

    Be sure to select related links carefully. Too many links on a page can cause people to leave the page without reading important information or can discourage them from completing a task.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for using links strategically applies in French

    + +
    +
    @@ -2254,19 +2256,23 @@ title: "Canada.ca Content Style Guide"
    Instead of:

    To ensure that you are paid the maximum Employment Insurance (EI) benefit rate that you are entitled to, complete the Claimant Attestation - Highest Weeks of Insurable Earnings (Variable Best Weeks) form with the required information about your highest weeks of insurable earnings in the last 52 weeks of employment or since the start of your last claim, whichever is the shorter period of the two.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for writing descriptive links applies in French

    + +
    +

    7.3 Make sure that links work

    Make sure that your links work. Check that they take people to the correct page, which contains up-to-date information, in the appropriate official language. Links that don't work frustrate people and hurt the credibility of your content.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for verifying links applies in French

    + +
    +
    @@ -2286,16 +2292,24 @@ title: "Canada.ca Content Style Guide"

    See how this rule applies to content in French

    Share this rule by email

    +

    See how the rule for non-government content applies in French

    + +
    +
    +

    7.5 Linking to internal-to-government content

    In most cases, public-facing content should not link to content that is accessible only through internal government networks. Occasionally, the audience for content that is accessible to the public may be primarily internal.

    When a link leads to content available only on internal government networks, write "(accessible only on the Government of Canada network)."

    - -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    +

    See how the rule for internal-to-government contente applies in French

    + +
    +
    From 3def5c482fcaa26ae2d8388b9f571e41b40d60de Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 10:12:55 -0400 Subject: [PATCH 12/27] Update index.md --- style-guide/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index d126d6bf08..2283d32f64 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -918,7 +918,7 @@ title: "Canada.ca Content Style Guide"
  • 4.3 Symboles
    • -
    +
    @@ -1079,7 +1079,7 @@ title: "Canada.ca Content Style Guide"
  • 4.7 Dates
    • -
    +
    @@ -1093,7 +1093,7 @@ title: "Canada.ca Content Style Guide"
  • 4.8 Heures
    • -
    +
    @@ -1149,7 +1149,7 @@ title: "Canada.ca Content Style Guide"
  • 4.10 Adresses
    • -
    +
    From 8e56d80d2310ed038f5b11f52e5ee3f73b5f05d3 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 6 Oct 2023 10:19:16 -0400 Subject: [PATCH 13/27] Update index.md --- style-guide/index.md | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 2283d32f64..8af294941f 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -2119,11 +2119,6 @@ title: "Canada.ca Content Style Guide"

    Work with your web team to determine the best way to include the long description information. They'll guide you on how to make sure the image is accessible to people using assistive technology. They'll also ensure that your image meets the Canada.ca Content and Information Architecture Specification.

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -

    See how the rule for long descriptions applies in French

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -

    See how the rule for transcripts applies in French

    Example of a link that leads to content only available in French

    Write: Find out how to renew your French passport while abroad in Canada (French only).

    -
    - -

    See how this rule applies to content in French

    -

    Share this rule by email

    -

    See how the rule for non-government content applies in French

    • 7.4 Créer des liens vers du contenu externe
      • From 61d02195726a150bd5e05cfe45fda78c4fd90baa Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Tue, 10 Oct 2023 09:28:42 -0400 Subject: [PATCH 14/27] Update index.md --- style-guide/index.md | 3651 ++++++++++++++++++++---------------------- 1 file changed, 1760 insertions(+), 1891 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 8af294941f..a3d4180632 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -6,28 +6,28 @@ description: "These are the rules to create web content that can be easily found title: "Canada.ca Content Style Guide" ---
      -

      These are the rules to create web content that can be easily found, understood and used. They are based on writing principles and techniques that help make web content clear and adapted to the needs of all people. Use it with the Content and Information Architecture Specification when you're designing and organizing web content.

      +

      Les règles pour créer du contenu Web qui peut être trouvé, compris et utilisé facilement. Ces règles s'appuient sur des principes de rédaction et des techniques qui aident à fournir un contenu Web clair et adapté aux besoins de tous. Consultez les Spécifications du contenu et de l'architecture de l'information pour Canada.ca lorsque vous concevez et organisez du contenu Web.

      -

      Table of contents

      +

      Table des matières

      @@ -35,176 +35,176 @@ title: "Canada.ca Content Style Guide"
      -

      Summary of changes

      -

      Here are the changes we made to this version of the guide:

      +

      Sommaire des changements

      +

      Voici les changements que nous avons apportés à cette version du guide :

      -

      Refer to the listed section for details.

      +

      Reportez-vous à la section pour plus de détails.

      -

      Purpose

      -

      This guide establishes the rules you must use to develop and edit English web content that will be published on a Government of Canada website. The rules are different from practices adapted to print to support principles related to accessibility, readability and usability.

      -

      The purpose of these rules is to make web content easy to find, easy to understand and easy to use for everyone, including people who have physical or cognitive disabilities.

      -

      The techniques described in this guide complement the rules set out in The Canadian Style. If there are conflicts between this guide and The Canadian Style or any other resource, this guide takes priority for content published online.

      -

      As web and language trends evolve, we'll update this guide to meet the changing needs of our audiences.

      +

      But du document

      +

      Le présent guide fait état des règles de rédaction et de révision du contenu français qui sera publié sur un site du gouvernement du Canada. Elles diffèrent des pratiques adaptées à l'imprimé afin d'appuyer les principes liés à l'accessibilité, à la lisibilité et à la facilité d'utilisation.

      +

      Les règles comprises dans ce guide ont pour but de rendre le contenu Web facile à trouver, à comprendre et à utiliser pour toute personne, y compris celles qui ont un handicap physique ou cognitif.

      +

      Les règles décrites dans ce guide complémentent celles du guide du rédacteur. S'il existe des divergences entre le présent guide, le guide du rédacteur ou toute autre ressource, le présent guide a préséance en ce qui concerne le contenu publié en ligne.

      +

      À mesure que les tendances du Web et de la langue évolueront, nous mettrons ce guide à jour pour répondre aux besoins changeants de nos publics cibles.

      -

      Use of the style guide

      -

      All departments and other portions of the federal public administration subject to the Directive on the Management of Communications must use the Canada.ca Style Guide. These organizations must follow this style guide's requirements for all public-facing websites and digital services, regardless of the technology, domain name or publishing platform used. This requirement is referenced in Appendix D: Mandatory Procedures for Social Media and Web Communications in the Directive on the Management of Communications.

      -

      Out-of-scope situations

      -

      Institutions that fall outside of the Directive on the Management of Communications do not have to follow this style guide. However, all institutions are encouraged to use it for both their internal and external web products. Following this guide's rules and techniques will make it easier for everyone to find, understand and use the government's digital content.

      +

      Application

      +

      Tous les ministères et les autres secteurs de l’administration publique fédérale qui sont assujettis à la Directive sur la gestion des communications doivent appliquer le Guide de rédaction du contenu du site Canada.ca. Ces organisations doivent respecter les normes décrites dans ce guide lorsqu’elles élaborent des sites Web ou des services numériques destinés au public, et ce, peu importe la technologie, le nom de domaine ou la plateforme qu’elles utilisent. Cette exigence est prévue à l’annexe D, Procédure obligatoire relative à l’utilisation des médias sociaux et aux communications sur le Web, de la Directive sur la gestion des communications.

      +

      Institutions non visées par le présent guide

      +

      Les institutions qui ne sont pas visées par la Directive sur la gestion des communications n’ont pas à suivre le présent guide. Toutefois, elles sont encouragées à le faire pour leurs produits Web internes et externes. Le fait de respecter les règles et les conseils décrits dans ce guide permettra de rendre le contenu Web du gouvernement facile à trouver, à comprendre et à utiliser pour toute personne.

      -

      Related policies, standards and procedures

      -

      Content must comply with:

      +

      Politiques, normes et procédures connexes

      +

      Votre contenu doit se conformer aux :

      -

      1.0 Writing principles for web content

      +

      1.0 Principes de rédaction pour le contenu Web

      -

      In this section

      +

      Dans cette section

      -

      The rules in this guide reflect how people read and use web content.

      +

      Les règles présentées dans ce guide tiennent compte de la façon dont les gens lisent et utilisent le contenu Web.

      -

      1.1 Help people complete tasks

      -

      Most people come to a government website to complete a task and expect us to provide information that will help them. Tasks can be:

      +

      1.1 Aider les gens à accomplir des tâches

      +

      La plupart des gens consultent les sites gouvernementaux pour accomplir une tâche et s'attendent à ce qu'on leur fournisse des renseignements qui les aideront dans leurs démarches. Leur tâche s'inscrit dans l'une ou l'autre des catégories suivantes :

        -
      • transactional (submit a form or download a report)
        • -
      • informational (find out how to collect a benefit or find a phone number)
        • +
      • transaction (soumettre un formulaire ou télécharger un rapport);
        • +
      • recherche d'information (savoir comment obtenir une subvention ou trouver un numéro de téléphone).
      -

      People trying to complete a task online usually don't read word by word. They scan quickly for words and links related to what they want to do.

      -

      Government of Canada web content must be:

      +

      Les gens qui tentent d'accomplir une tâche sur le Web ne lisent pas chaque mot. Ils survolent rapidement le texte pour trouver les termes et les liens associés à la tâche qu'ils veulent accomplir.

      +

      Le contenu Web du gouvernement du Canada doit être :

        -
      • intuitive: give people who have no previous knowledge of the topic or process just enough information to complete a task on their own
        • -
      • comprehensive: give the appropriate details to specialists who have more knowledge of a topic or process
        • -
      • targeted: present the most important information first, in a way that is tailored to the needs of the audience, instead of giving all the options and leaving people to figure out which ones apply to them
        • -
      • consistent: use a standardized approach so that people can scan content quickly and easily with a sense of confidence and trust
        • +
      • intuitif : fournissez aux personnes qui ne connaissent pas le sujet ou le processus juste assez d'information pour qu'elles puissent effectuer une tâche par elles-mêmes;
        • +
      • complet : donnez des renseignements utiles aux spécialistes qui ont une connaissance plus poussée du sujet ou du processus;
        • +
      • ciblé : présentez les renseignements les plus importants d'abord, adaptés aux besoins du public cible, au lieu de fournir toutes les options et de laisser les gens déterminer lesquelles s'appliquent à eux;
        • +
      • cohérent : présentez l'information de manière uniforme afin de permettre aux gens d'explorer le contenu rapidement, facilement et avec confiance.
      -

      1.2 Consider the needs of the audience

      -

      When planning web content, consider people's needs. Make sure that the content is accessible, clear and adapted to the widest audience.

      +

      1.2 Prendre en compte les besoins du public

      +

      Lorsque vous préparez du contenu Web, tenez compte des besoins des lecteurs.  Veillez à ce que votre contenu soit accessible, lisible et adapté à un large public.

      -

      Writing for accessibility

      -

      Making content accessible means a wide range of people can use it, including people with physical and cognitive disabilities (for example, reading disorders, attention deficit disorders, memory disorders).

      -

      To make your content accessible, consider how assistive technologies work and how some writing practices may impact people's ability to read or understand text. Remember to also refer to the Web Content Accessibility Guidelines (WCAG) 2.0.

      -
      -

      Writing for inclusivity

      -

      Make gender-inclusive writing your standard practice.

      -

      For more guidance on inclusive writing, see the Language Portal of Canada’s guidelines and resources:

      - -
      -
      -

      Writing for readability

      -

      Readability is the ease with which a person can read and understand a text. Readable content means better task completion and higher client satisfaction.

      -

      To make your content readable, consider your audience's reading level and literacy needs. Not everyone reads at the same level or understands content in the same way. Even when content is presented clearly and simply, people who have low literacy levels and other difficulties can find it hard to understand text.

      -

      According to Statistics Canada (2012) and Canadian literacy organizations, almost 50% of Canadians have literacy challenges. Research shows that people with literacy challenges:

      -
        -
      • spend a lot of time trying to understand words that contain more than two syllables
        • -
      • read word by word and slowly move their eyes across each line of text
        • -
      • skip over large amounts of information when it contains many multi-syllable words, uncommon terms and long sentences
        • -
      -

      Techniques for improving and measuring readability are in the section on plain language.

      -
      -
      -

      Writing for specialized audiences

      -

      Sometimes, your content targets people who have in-depth knowledge of a subject.

      -

      When writing for a specialized audience, you can use terms they're familiar with, even if those terms aren't familiar to a general audience.  Include a summary in plain language for:

      -
        -
      • people who aren't familiar with the subject
        • -
      • specialists who might be scanning the content to decide whether it's relevant to their task
        • -
      -
      -
      -

      Consider all screen sizes

      -

      People will view your content on different sizes of screens. Phone and tablet screens display less content than desktop and laptop screens. Readers who use small screens:

      - -
      +

      Rédiger pour assurer l'accessibilité

      +

      Faire en sorte que le contenu est accessible signifie qu'un large éventail de personnes peut l'utiliser, y compris les personnes ayant des handicaps physiques et cognitifs (par exemple, les problèmes de dyslexie ou de mémoire, troubles du déficit de l'attention et les troubles d'apprentissage).

      +

      Pour rendre votre contenu accessible, tenez compte du fonctionnement des technologies d'aide et de l'impact que certaines pratiques d'écriture peuvent avoir sur la capacité des gens à lire ou à comprendre le texte. De plus, n'oubliez pas de vous référer aux Règles pour l'accessibilité des contenus Web 2.0.

      +
      +
      +

      Rédiger pour assurer l'inclusion

      +

      La rédaction épicène devrait être votre pratique habituelle.

      +

      Pour plus de conseils sur l'écriture inclusive, consultez les lignes directrices et ressources du Portail linguistique du Canada :

      + +
      +
      +

      Rédiger pour assurer la lisibilité

      +

      La lisibilité est la mesure dans laquelle un texte est clair et facile à comprendre. Un texte lisible facilite la réalisation des tâches et rehausse le degré de satisfaction de la personne.

      +

      Pour assurer la lisibilité de votre contenu, tenez compte du niveau de lecture et des besoins en matière d'alphabétisation de votre public cible. La capacité de lire ou de comprendre un texte n'est pas la même pour tout le monde. Même si le contenu est présenté clairement et simplement, les gens qui ont un faible niveau d'alphabétisation peuvent éprouver des difficultés à saisir le texte.

      +

      Selon Statistique Canada (2012) et les organismes d'alphabétisation canadiens, près de 50 % des Canadiens éprouvent des difficultés à lire et à écrire. Les recherches démontrent que ceux dont le taux d'alphabétisation est faible :

      +
        +
      • passent beaucoup de temps à tenter de comprendre les mots qui ont plusieurs syllabes;
        • +
      • lisent un mot à la fois et déplacent leurs yeux lentement le long de chaque ligne de texte;
        • +
      • ignorent souvent de grandes quantités d'information si le texte comporte trop de longs mots, de termes inhabituels ou de longues phrases.
        • +
      +

      Des techniques pour améliorer et mesurer la lisibilité sont présentées à la section sur le langage clair et simple.

      +
      +
      +

      Rédiger pour un public spécialisé

      +

      Votre contenu Web vise parfois des gens qui ont une connaissance approfondie d'un sujet ou d'un domaine donné.

      +

      Lorsque vous rédigez du contenu pour un public spécialisé, vous pouvez utiliser des termes que ce public connaît bien même s'ils sont moins connus du grand public. Ajoutez un résumé en langage simple pour :

      +
        +
      • les personnes qui ne connaissent pas le sujet;
        • +
      • les spécialistes qui survolent le texte afin d'en déterminer la pertinence pour la tâche à effectuer.
        • +
      +
      +
      +

      Tenir compte de toutes les tailles d'écran

      +

      Votre contenu sera lu sur des écrans de toutes tailles. Les écrans de téléphone mobile et de tablettes électroniques affichent moins de contenu à la fois que les écrans d'ordinateur de bureau ou portatif. Les utilisateurs de petits écrans doivent donc :

      +
      -

      1.3 Provide equivalent content in both official languages

      +

      1.3 Fournir un contenu équivalent dans les 2 langues officielles

      -

      Official languages requirements

      -

      According to the Official Languages Act, you must publish communications and provide services to the public in both official languages.

      +

      Exigences en matière de langues officielles

      +

      Selon la Loi sur les langues officielles, nous devons publier simultanément les communications et fournir des services égaux dans les 2 langues officielles.

      -

      Government content must:

      +

      Le contenu du gouvernement doit :

        -
      • be professionally translated
        • -
      • reflect Canadian writing conventions in English and French
        • -
      • include fully bilingual images, multimedia files and transcripts, or contain equivalent information in both official languages
        • +
      • être traduit par des professionnels;
        • +
      • refléter les règles d'usage canadiennes du français et de l'anglais;
        • +
      • comprendre des images, des fichiers multimédias et des transcriptions entièrement bilingues ou procurer de l'information équivalente dans les 2 langues officielles.
      -

      Persons responsible for official languages

      -

      The person responsible for official languages in your institution can help answer questions about your obligations and about exceptions.

      -

      Your communications team can help determine whether it's appropriate to communicate with audiences in other languages, in addition to Canada's official languages.

      +

      Personnes responsables des langues officielles

      +

      Une personne responsable des langues officielles dans votre institution peut aider à répondre à vos questions concernant vos obligations et les exceptions.

      +

      Votre équipe des communications peut vous aider à déterminer s'il convient et quand il convient de communiquer avec vos publics cibles dans d'autres langues, en plus des langues officielles du Canada.

      -

      2.0 Plain language

      +

      2.0 Langage clair et simple

      -

      In this section

      +

      Dans cette section

      @@ -213,989 +213,881 @@ title: "Canada.ca Content Style Guide"
      -

      Plain language requirements

      -

      The use of plain language is a requirement of the Directive on the Management of Communications.

      +

      Exigences en matière de langage clair et simple

      +

      L'utilisation d'un langage clair et simple est une exigence de la Directive sur la gestion des communications.

      -

      Writing in plain language doesn't mean over-simplifying or leaving out critical information. Using plain language actually makes critical information accessible and readable for everyone.

      -

      By writing plainly and simply, you:

      +

      Rédiger en langage clair et simple ne veut pas dire simplifier outre mesure ou omettre des renseignements essentiels. Le recours à un langage simple rend l'information essentielle lisible et accessible à tous.

      +

      Écrire en langage clair et simple :

        -
      • increase the chances that people will find, read and understand your information from any device
        • -
      • make your information more accessible to people with disabilities
        • -
      • allow people who are reading your information on a small screen to see essential information first
        • -
      • save resources when editing and translating your text
        • -
      • improve task completion and cuts costs by, for example, reducing enquiries
        • +
      • augmente les chances que les gens trouvent, lisent et comprennent votre information sur n'importe quel appareil;
        • +
      • rend votre information plus accessible aux personnes handicapées;
        • +
      • permet à ceux qui se servent de petits écrans de voir l'information essentielle en premier;
        • +
      • maximise vos ressources à l'étape de la traduction et de la révision de votre texte;
        • +
      • facilite la réalisation des tâches en ligne et contribue à réduire les coûts, par exemple, en diminuant le nombre de demandes de renseignements.
      -

      2.1 Start with the most important information

      -

      Start your content with the most important information, and be direct. When people scan web pages, they tend to start in the top left hand corner and scan to the right and down. As they move down the page, they scan less and less to the right.

      -

      Organize your content using an inverted pyramid structure to:

      +

      2.1 Commencer par les renseignements les plus importants

      +

      Introduisez les renseignements les plus importants au début de votre texte et allez droit au but. Lorsqu'ils survolent les pages Web, les gens ont tendance à débuter dans le coin supérieur gauche en déplaçant leur regard vers la droite. À mesure qu'ils font défiler la page vers le bas, ils survolent de moins en moins le texte à droite.

      +

      Organisez votre contenu selon le modèle de la pyramide inversée afin :

        -
      • guide your audience to the information they need to complete their task
        • -
      • place supporting and relevant details toward the end of the text
        • +
      • d'orienter la personne vers les renseignements dont elle a besoin pour accomplir une tâche;
        • +
      • de placer les renseignements complémentaires à la fin du texte.
      Figure 1
      - Pyramid upside down showing how to start a web page with key information first. Text version below: + Pyramide inversée illustrant comment créer une page Web en indiquant tout d'abord les renseignements clés.
      - Figure 1 - Text version -

      Inverted pyramid divided into four sections, from top to bottom. The image shows the order of information on a web page.

      + Figure 1 - Version textuelle +

      Pyramide inversée illustrant comment créer une page Web en indiquant tout d'abord les renseignements clés.

        -
      • First: +
      • Premièrement :
          -
        • start with the most important idea, step or information
          • +
        • commencer chaque page Web par l'idée, l'étape ou l'information la plus importante.
        • -
      • Second: +
      • Deuxièmement :
          -
        • add details and tasks in order of importance
          • -
        • keep all task related content in the centre of the page
          • -
        • use links to direct people to key information and tasks
          • +
        • ajouter les détails et les tâches par ordre d'importance;
          • +
        • mettre tout le contenu lié à la tâche au centre de la page;
          • +
        • utiliser des liens pour orienter les gens vers les renseignements et les tâches essentielles.
        • -
      • Third: +
      • Troisièmement :
          -
        • include information for audiences who want to learn more or have more knowledge of the topic or service, but only if it makes sense
          • +
        • inclure des renseignements pertinents à l'intention des publics cibles qui désirent en apprendre davantage ou qui ont une connaissance approfondie du sujet ou du service.
        • -
      • Fourth: +
      • Quatrièmement :
          -
        • add links only if they relate to content that supports completion of the task on the web page (for example, laws or publications)
          • +
        • ajouter des liens seulement s'ils concernent le contenu et appuient la tâche.
      -

      Get to the point

      -

      Omit background information and messages that welcome people to your program or site. These kinds of messages get in people's way when they're trying to accomplish a task.

      -

      Write direct statements.

      -
      Example of direct statements
      -

      Write: Present your passport to the border officer.
      - Instead of: According to Canadian legislation, you're required to present your passport to the agent who will welcome you into the country.

      -

      See how rule for the inverted pyramid structure applies in French

      - +

      Aller droit au but

      +

      Évitez les renseignements généraux et les messages d'accueil (par exemple, « bienvenue sur notre site »). Ces messages relèguent au second plan le contenu dont la personne a besoin pour accomplir sa tâche.

      +

      Écrivez des énoncés directs.

      +
      Exemple d'énoncé direct
      +

      Écrivez : Présentez votre passeport à l'agent à l'aéroport.
      + Au lieu de : Selon la loi canadienne, vous devez présenter votre passeport à l'agent qui vous accueille à l'aéroport.

      +

      Voyez comment la règle sur la pyramide inversée s'applique à un contenu de langue anglaise

      +
      -
      +
      -
      -
      -

      2.2 Use simple and common words

      -

      Replace long words with short, simple and everyday words that most people understand and use. Simple words have 2 syllables or less. They're easier to scan than long, complex words.

      -

      Example of simple and common words

      -

      Write: ask
      - Instead of: make a request

      -

      Write: you must
      - Instead of: you shall

      -

      Write: to
      - Instead of: in order to

      -

      Write: before
      - Instead of: prior to

      -

      Write: get
      - Instead of: obtain

      -

      See how the rule for using simple and common words applies to content in French

      - -
      -
      -
      -
      -
      -

      2.3 Use active voice and positive form

      -

      Whenever possible use the:

      -
        -
      • active voice instead of the passive voice
        • -
      • positive form instead of the negative form
        • -
      -
      -

      Active or passive voice

      -

      In an active sentence, the subject does the action. The sentence is clear and direct.

      -

      In a passive sentence, it may not be clear who or what is doing the action.

      -
      Example of passive and active sentences
      -

      Active: We may ask you to provide proof of citizenship.
      - Passive: You may be asked to provide proof of citizenship.

      +
      +

      2.2 Utiliser des mots simples et courants

      +

      Remplacez les mots longs par des mots courts, simples et de tous les jours que la plupart des gens comprennent et utilisent. Les mots simples ont 2 syllabes ou moins. Ils sont plus faciles à lire en survolant le texte que les mots longs et complexes.

      +

      Exemples d'utilisation de mots simples et courants

      +

      Écrivez : demander
      + Au lieu de : faire une requête

      +

      Écrivez : assez de
      + Au lieu de : un nombre suffisant de

      +

      Écrivez : si
      + Au lieu de : dans la mesure où

      +

      Écrivez : avant
      + Au lieu de : préalablement

      +

      Écrivez : tous les 2 ans
      + Au lieu de : bisannuellement

      +

      Voyez comment la règle sur l'utilisation des mots simples et courants s'applique à un contenu de langue anglaise

      + +
      +
      +
      -
      -

      Positive or negative form

      -

      Whenever possible, tell people what they may or must do instead of what they may not or must not do. Avoid negatives, double negatives and exceptions to exceptions.

      -
      Examples of positive and negative sentences
      -

      Positive: You're entitled to part of the deduction.
      - Negative: You're not entitled to the entire deduction.

      -

      Positive: The procedure will be effective.
      - Double negative: The procedure will not be ineffective.

      -

      Positive: You may claim a child born in 1972 or earlier as a dependent, if he or she has a mental or physical disability.
      - Double negative: You may not claim anything for a dependent child born in 1972 or earlier, unless the child has a mental or physical disability.

      -

      If something has serious consequences, you can use the negative form to explain that something isn't possible or should not be done.

      -
      Examples of using the negative form for something that has serious consequences
      -

      Write: Do not try to locate the source of carbon monoxide. Leave your home immediately and move to fresh air.

      +
      +

      2.3 Utiliser la voix active et la forme positive

      +

      Lorsque c'est possible, utilisez la :

      +
        +
      • voix active plutôt que la voix passive;
        • +
      • forme positive plutôt que la forme négative.
        • +
      +
      +

      Voix active ou passive

      +

      Dans une phrase à la voix active, le sujet fait l'action. La phrase est claire et directe.

      +

      Dans une phrase à la voix passive, il n'est pas toujours facile de savoir qui (ou quoi) fait l'action.

      +
      Exemples de constructions active et passive
      +

      Construction active : Vous devrez peut-être fournir une preuve de citoyenneté.
      + Construction passive : Une preuve de citoyenneté sera peut-être exigée.

      +
      +
      +

      Forme positive ou négative

      +

      Lorsque c'est possible, dites ce que la personne peut ou doit faire plutôt que ce qu'elle ne peut ou ne doit pas faire. Évitez la forme négative, les doubles négations et les exceptions aux exceptions.

      +
      Exemples de formes positives et négatives
      +

      Forme positive : Vous pouvez déduire une partie du montant à la ligne 147 de votre déclaration de revenus.
      + Forme négative : Vous ne pouvez déduire qu'une partie du montant de la ligne 147 de votre déclaration de revenus.

      +

      Forme positive : La procédure sera efficace.
      + Double négation : La procédure ne sera pas inefficace.

      +

      Forme positive : Vous pouvez demander une déduction pour un enfant à charge né en 1972 ou avant si cet enfant a une déficience mentale ou physique.
      + Double négation : Vous ne pouvez pas demander une déduction pour un enfant à charge né en 1972 ou avant, à moins que cet enfant n'ait une déficience mentale ou physique.

      +

      Lorsqu'une action risque d'entraîner de graves conséquences, vous pouvez utiliser la forme négative pour expliquer que l'action est impossible ou doit être évitée.

      +
      Exemples d'utilisation de la forme négative pour quelque chose pouvant avoir des conséquences graves
      +

      Écrivez : N'essayez pas de trouver la source de monoxyde de carbone. Sortez immédiatement pour respirer de l'air frais.

      +
      +

      Voyez comment la règle sur l'utilisation de la voix active et de la forme positive s'applique à un contenu de langue anglaise

      + +
      +
      +
      -

      See how the rule for active voice and positive form applies to content in French

      - -
      -
      -
      -
      -
      -

      2.4 Use verbs instead of nouns formed from verbs

      -

      Avoid using nouns that are formed from verbs. They can be vague. Verbs alone clearly express the action needed.

      -

      Examples of the use of verbs instead of nouns

      -

      Write: apply
      - Instead of: submit your application

      -

      Write: consider
      - Instead of: take into consideration

      -

      Write: modify
      - Instead of: make a modification

      -

      Write: needs
      - Instead of: is in need of

      -

      Always use the simplest form of a verb. When possible, use the present tense.

      -

      See how the rule for using verbs instead of nouns formed from verbs applies in French

      - -
      -
      -
      -
      -
      -

      2.5 Avoid jargon, idioms and expressions

      -

      Where possible, avoid using jargon, idioms and expressions. Use the clearest, most popular term for your audience.

      -

      Legal and technical terms and "government-speak" confuse most people.

      -

      People who don't speak English or French might use online tools to translate text. These tools don't always translate idioms and expressions accurately.

      -

      Examples of jargon, idioms and expressions

      -

      Jargon: bench warrant (an order by a judge to arrest someone who didn't show up in court or comply with certain conditions)

      -

      Idiom: to hire a helping hand (meaning to hire an employee)

      -

      Expression: attack your least favourite task first (meaning do your least favourite task first)

      -

      If you must include jargon familiar to your target audience, be sure to:

      -
        -
      • explain it using simple, familiar words or give an example to help non-specialists understand
        • -
      • never use jargon to explain jargon
        • -
      -

      Examples of statements that avoid the use of jargon

      -

      Write: You have to file your income tax return (T1) by April 30.
      - Instead of: You have to file your T1 return by April 30.

      -

      Write: Learn about savings plans that can help you save enough money to retire.
      - Instead of: Learn about different types of savings plans that will let you build up your retirement nest egg.

      -

      Identify keywords your audience is using to find your content

      -

      Tools you can use to see which search terms are most popular:

      - -

      Refer to your analytics to find out which search terms your audience uses to find related content.

      -

      See how the rule for jargon, idioms and expressions applies to content in French

      - -
      -
      -
      -
      -
      -

      2.6 Use simple sentences

      -

      Keep sentence structure simple by putting the subject and the verb at the beginning of the sentence and by using the subject + verb + object construction. This structure helps the reader understand what the subject of the sentence is doing by placing the subject first, followed by the verb.

      -

      Avoid complex and compound sentences. They generally contain too much information for people to understand when they're scanning.

      -

      Examples of simple sentences

      -

      Write: Learn about Canada's transportation system. Find information about using paved roads, bike trails, airports and ports across the country.
      - Instead of: Canada's vast transportation system enables millions of people each year to travel throughout the country, around the world, and to work and back. From this page you can access a wealth of transportation information related to travelling and commuting.

      -

      Replace complex sentence structures with direct statements.

      -

      Examples of direct statements

      -

      Write: You have until April 30 to file your tax return.
      - Instead of: The period of time that you have to file your tax return ends on April 30.

      -

      Replace noun strings (a series of 2 or more nouns used to name something) with direct statements.

      -

      Examples of statements that avoid chains of nouns

      -

      Write: The evaluation team will submit its final report on the training program in September.
      - Instead of: The training program evaluation team will submit its final report in September.

      -

      Surround a long sentence with shorter ones because it helps people understand the long sentence.

      -

      See how this rule for using simple sentences applies in French

      - -
      -
      -
      -
      -
      -

      2.7 Use short sentences and paragraphs

      -

      Be concise. Use as few words as possible to express an idea. By being concise, you'll help everyone, even specialists, complete the task they set out to do.

      -

      Keep sentences and paragraphs short to make them easier to scan on any screen size. People who have learning disabilities may find it difficult to scan and understand long sentences and paragraphs.

      -

      Try to keep sentences under 20 words. You can do this by: 

      -
        -
      • breaking long sentences into shorter ones
        • -
      • limiting each sentence to 1 idea
        • -
      • removing unnecessary words
        • -
      -

      Examples of shortened sentences

      -

      Write: We received your request for funding and approved it.
      - Instead of: We received your request for funding, which we've thoroughly reviewed and approved in a timely manner.

      -

      Write: We'll consider any type of investment.
      - Instead of: Any type of investment will be taken into consideration.

      -

      Try to keep paragraphs to 3 sentences. You can do this by:

      -
        -
      • developing 1 main idea per paragraph
        • -
      • presenting a series of more than 2 ideas or words as a vertical list
        • -
      • using a short form for a long title instead of repeating it
        • -
      -

      See how rule for using short sentences and paragraphs applies in French

      - -
      -
      -
      -
      -
      -

      2.8 Explain references to legislation

      -

      When explaining a requirement that comes from an act or regulation, avoid mentioning the act or regulation by name. Include only the information people need to complete the task.

      -

      If you must include the name of the act or regulation, always give a plain-language description. First, explain what your audience needs to know and why they need to know more about the act or regulation. Then, you may add the reference to the act or regulation.

      -

      Examples of references to legislation

      -

      Write: You can apply for your child to become a Canadian citizen after they arrive in Canada as a permanent resident.

      -

      Related links

      - -

      Instead of: After your child arrives in Canada as a permanent resident, you can apply for citizenship on the child's behalf under section 5.1 of the Citizenship Act.

      -

      See how rule for explaining references to legislation applies in French

      - -
      -
      -
      -
      -
      -

      2.9 Check the reading level of the content

      -

      Check the reading level of your text. Make sure that it meets the reading level you're targeting based on the literacy needs of your audience. Do this every so often while you're writing content. You can use various tools to do this.

      -

      Readability tools help you check if content is too wordy or complex. Writing content at a reading level above grade 8 can make it difficult for many people to understand or complete their task.

      -
      -

      Use a readability tool

      -

      You can use a readability tool like Flesch-Kincaid to check the reading level of your English content. This tool is available as part of Microsoft Word. It generally reflects the years of education needed to understand the text.

      -

      To use Flesch-Kincaid:

      -
        -
      1. in Word 2010 and later, click the File tab, and then click Options
        2. -
      2. click Proofing
        3. -
      3. under When correcting spelling and grammar in Word, make sure the Check grammar with spelling check box is selected
        4. -
      4. select Show readability statistics  
        5. -
      -

      You can check the reading level of a whole page or just part of a page. To check the reading level:

      -
        -
      1. accept any tracked changes
        2. -
      2. place periods at the end of any bulleted items and headings (remove the periods before publishing)
        3. -
      3. highlight the text in your Word document
        4. -
      4. click the Review tab
        5. -
      5. click Spelling & Grammar
        6. -
      6. when Word has finished checking the text, it will ask whether you want to check the rest of the content
        7. -
      7. click No
        8. -
      -

      If your text contains technical terms that consist of long, multi-syllable words that you need to use for your specialized audience, remove these terms before you test the content for readability to see whether the surrounding text can be simplified. Reinsert the technical terms once you've simplified the surrounding text.

      -

      The Readability Statistics dialog box will appear and show the Flesch-Kincaid grade level.

      -
      -
      Figure 2
      - Screen capture of a readability statistics dialog box in Microsoft Word. Text version below: -
      - Figure 2 - Text version -

      A screen capture of Microsoft Word's readability statistics dialog box shows that a sample of text got a Flesch-Kincaid reading level of 5.8.

      -
      -
      -

      In newer versions of Microsoft Word, search for "Flesch-Kincaid" using the help feature.

      +
      +

      2.4 Utiliser des verbes plutôt que des noms formés à partir de verbes

      +

      Privilégiez le verbe (forme verbale) plutôt que le nom formé à partir du verbe (forme nominale) pour exprimer clairement une action.

      +

      Exemples d'énoncés qui contiennent des verbes plutôt que des noms

      +

      Écrivez : recommander une mesure
      + Au lieu de : formuler une recommandation d'une mesure

      +

      Écrivez : distribuer le courrier
      + Au lieu de : faire la distribution du courrier

      +

      Écrivez : modifier la page
      + Au lieu de : apporter une modification à la page

      +

      Utilisez le verbe dans sa forme la plus simple. Si possible, utilisez le présent.

      +

      Voyez comment la règle sur l'utilisation de la forme verbale s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      2.5 Éviter le jargon et les expressions familières ou imagées

      +

      Évitez d'utiliser du jargon, un langage spécialisé ou des expressions familières, imagées ou régionales. Choisissez le terme le plus simple ou le plus courant pour votre public cible.

      +

      Pour la plupart des gens, les termes juridiques et techniques et le jargon administratif portent à confusion.

      +

      Ceux et celles qui ne parlent ni français ni anglais peuvent recourir à des outils en ligne pour traduire du texte. Les traductions produites par ces outils ne sont pas toujours exactes, surtout lorsqu'il est question d'expressions familières, imagées ou régionales.

      +

      Exemples de jargon, d'idiotisme et d'expression

      +

      Jargon : mandat d'arrêt décerné sur le siège (ordre émis par un juge d'arrêter une personne qui ne s'est pas présentée en cour ou qui n'a pas respecté certaines conditions)

      +

      Idiotisme : pour faire court (pour résumer, en un mot, bref)

      +

      Expression : ne pas avoir la langue dans sa poche (personne qui n'a pas peur de dire ce qu'elle pense)

      +

      Si vous devez utiliser un jargon bien connu de votre public cible :

      +
        +
      • expliquez le terme en employant des mots simples et courants ou donnez un exemple pour aider les non-spécialistes à comprendre;
        • +
      • n'utilisez pas de jargon pour expliquer le jargon.
        • +
      +

      Exemples d'énoncés qui évitent le recours au jargon

      +

      Écrivez : Vous devez nous envoyer votre déclaration de revenus (T1) d'ici le 30 avril.
      + Au lieu de : Vous devez nous envoyer votre T1 d'ici le 30 avril.

      +

      Écrivez : Apprenez-en plus sur les régimes d'épargne qui peuvent vous aider à épargner assez d'argent pour la retraite.
      + Au lieu de : Apprenez-en plus sur les régimes d'épargne qui peuvent vous aider à vous constituer un bas de laine pour votre retraite.

      +

      Voyez comment la règle sur le jargon et les expressions familières ou imagées s'applique à un contenu de langue anglaise

      + +
      +
      +
      +

      Identifiez les mots-clés que votre public utilise pour trouver votre contenu

      +

      Voici des outils pour vous aider à identifier les termes de recherche les plus populaires :

      + +

      Certains de ces outils ne sont offerts qu'en anglais, et d'autres sont offerts en français si votre navigateur est configuré en français.

      +

      Consultez vos données d'analyse Web pour savoir quels termes votre public utilise pour chercher du contenu connexe.

      -
      -

      Follow the reading level requirements

      -

      Evaluate the reading level of content as follows for:

      +
      +

      2.6 Utiliser des phrases simples

      +

      Privilégiez des structures syntaxiques simples en plaçant le sujet et le verbe en début de phrase et en utilisant des constructions de type sujet + verbe + complément. Cette structure aide le lecteur à comprendre ce que fait le sujet de la phrase en plaçant le sujet tout juste devant le verbe.

      +

      Évitez les phrases complexes composées de plusieurs énoncés. Elles rassemblent généralement trop d'informations pour que les gens puissent les comprendre en survolant le texte.

      +

      Exemples de phrase simple

      +

      Écrivez : Renseignez-vous au sujet du réseau de transport du Canada. Trouvez des renseignements au sujet des routes, les pistes cyclables, les ports et les aéroports partout au pays.
      + Au lieu de : Le réseau de transport du Canada, avec ses routes, ses pistes cyclables, ses ports et ses aéroports, est vaste, et ce site vous fournira une foule d'information au sujet du réseau d'un bout à l'autre du pays.

      +

      Remplacez les structures de phrase complexes par des énoncés directs.

      +

      Exemples d'énoncé direct

      +

      Écrivez : Vous avez jusqu'au 30 avril pour soumettre votre déclaration de revenus.
      + Au lieu de : La période de temps dont les contribuables disposent pour soumettre leurs déclarations de revenus se termine le 30 avril.

      +

      Pour aider les gens à comprendre le sens d'une phrase longue, entourez-la de phrases courtes.

      +

      Voyez comment la règle sur les phrases simples s'applique à un contenu de langue anglaise

        -
      • navigation content (home, theme and topic pages), aim for no higher than grade 8
        • -
      • all other content intended for general audiences, aim for grade 8 or lower
        • -
      • content intended for experts, determine the appropriate grade level and apply it across all content for this audience
        • +
      • 2.6 Use simple sentences
      +
      +
      +
      -
      -

      Verify whether the content is easy to understand

      -

      Readability tools reveal the reading level of your content, but they can't tell you whether it makes sense.

      -

      To check whether your content is easy to read and understand, test it:

      +
      +

      2.7 Utiliser des phrases et des paragraphes courts

      +

      Soyez concis. Utilisez un minimum de mots pour exprimer une idée. Vous aidez ainsi les gens, même les experts, à exécuter une tâche.

      +

      Raccourcissez vos phrases et vos paragraphes pour faciliter le survol d'un texte sur n'importe quelle taille d'écran.

      +

      Les personnes qui ont des troubles d'apprentissage risquent d'avoir de la difficulté à comprendre des phrases longues ou des paragraphes longs.

      +

      Essayez d'écrire des phrases de moins de 24 mots à l'aide des techniques suivantes :

        -
      • ask colleagues who aren't familiar with the subject to review the text for clarity and logic
        • -
      • work with your communications team to set up usability testing for your content
        • +
      • découpez les phrases longues en phrases plus courtes;
        • +
      • limitez-vous à une (1) idée par phrase;
        • +
      • enlevez les mots inutiles.
      -

      If your content has a high reading level, or if usability testing shows low task completion, try to:

      +

      Exemple de phrases simplifiées

      +

      Écrivez : Nous avons reçu et approuvé votre demande de financement.
      + Au lieu de : Nous avons reçu votre demande de financement, que nous avons soigneusement examinée et approuvée en temps opportun.

      +

      Écrivez : Nous examinerons tout type d'investissement.
      + Au lieu de : Tout type d'investissement fera l'objet d'un examen de notre part.

      +

      Essayez d'écrire des paragraphes de 3 phrases ou moins à l'aide des techniques suivantes :

        -
      • shorten words, sentences or paragraphs, but keep words of 3 or more syllables if they're well known
        • -
      • replace technical jargon with terms that people will understand
        • -
      • remove details that people don't need to complete the task
        • -
      • replace secondary references to a program with "program" rather than using its full name or abbreviation
        • -
      • create numbered or bulleted lists for key tasks
        • +
      • développez une (1) idée principale par paragraphe;
        • +
      • utilisez des listes d'éléments pour présenter une série de plus de 2 idées ou de mots;
        • +
      • utilisez une forme plus courte au lieu de répéter un titre long.
      +

      Voyez comment la règle sur les phrases et paragraphes courts s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      2.8 Expliquer les références aux lois

      +

      Lorsque vous expliquez une exigence qui découle d'un article de loi ou d'un règlement, évitez de spécifier le nom de la loi ou du règlement. Donnez simplement les renseignements dont les gens ont besoin pour accomplir la tâche.

      +

      Si vous devez inclure le nom de la loi ou du règlement, fournissez-en toujours une description en langage clair. Expliquez d'abord ce que votre public cible a besoin de savoir et pourquoi il doit en savoir plus sur cette loi ou ce règlement. Puis, vous pouvez ajouter la référence à la loi ou au règlement.

      +

      Exemples de phrase faisant référence à une loi

      +

      Écrivez : Vous pouvez faire une demande de citoyenneté pour votre enfant après son arrivée au Canada à titre de résident permanent.

      +

      Lien connexe

      + +

      Au lieu de : Après l'arrivée de votre enfant au Canada à titre de résident permanent, vous pouvez faire une demande de citoyenneté au nom de l'enfant en vertu de l'article 5.1 de la Loi sur la citoyenneté.

      +

      Voyez comment la règle sur les références aux lois s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      2.9 Vérifier la lisibilité de votre contenu

      +

      Vérifiez le niveau de lisibilité de votre texte. Assurez-vous de rédiger au niveau de lisibilité approprié en tenant compte de la compétence en lecture de votre public cible. Testez votre contenu pendant que vous rédigez votre texte. Vous pouvez utiliser divers outils pour le faire.

      +

      Certains outils permettent de vérifier si le contenu est trop verbeux ou complexe. Un texte qui correspond à un niveau de compétence en lecture supérieur à la 8e année peut empêcher plusieurs personnes de comprendre la tâche qu'elles doivent effectuer.

      +
      +

      Utiliser un outil d'analyse de la lisibilité

      +

      Vous pouvez utiliser gratuitement l'outil en ligne Scolarius pour vérifier le niveau de lisibilité du contenu rédigé en français. L'outil cote le texte au moyen d'un système de points fondé sur des groupes de niveau de scolarité. Consultez le site de Scolarius pour connaître les pointages associés au niveau de scolarité.

      +

      Si le texte que vous mettez à l'essai renferme des éléments sous forme de puces, ajoutez un point à la fin de chaque puce pour que l'outil évalue le texte correctement. Vous devrez supprimer ces points avant de publier le texte.

      +

      Pour utiliser cet outil :

      +
        +
      • acceptez tous les changements dans votre document pour éliminer le suivi des modifications;
        • +
      • ouvrez www.scolarius.com;
        • +
      • sélectionnez le texte à partir de votre document Word ou d'une page Web existante;
        • +
      • copiez et collez le texte dans la zone prévue;
        • +
      • cliquez sur Soumettre.
        • +
      +

      Votre texte comprend peut-être des termes techniques contenant plusieurs syllabes et qui sont importants pour un public spécialisé. Retirez ces mots du texte avant d'évaluer la lisibilité du contenu pour déterminer si le texte qui entoure ces mots peut être simplifié.

      +

      Une seule note apparaîtra pour votre contenu. Le texte devrait se trouver dans les rangs supérieurs de « primaire » ou dans les rangs inférieurs de « secondaire ».

      +
      +
      Figure 2
      + Cette saisie d'écran d'une boîte de dialogue sur les statistiques de lisibilité de Scolarius indique que le niveau de lisibilité d'un échantillon de texte est de « 94 secondaire ». +
      + Figure 2 - Version textuelle +

      Cette saisie d'écran d'une boîte de dialogue sur les statistiques de lisibilité de Scolarius indique que le niveau de lisibilité d'un échantillon de texte est de « 94 secondaire ».

      +
      +
      +
      +
      +

      Exigences de niveau de compétence en lecture

      +

      Visez le niveau de compétence en lecture suivant pour le contenu :

      +
        +
      • de navigation (pages d'accueil, de thème et de sujet) : un niveau de scolarité secondaire (pointage de 100 ou moins);
        • +
      • conçu pour le grand public : visez un niveau de scolarité secondaire (pointage de 100 ou moins);
        • +
      • conçu pour des spécialistes : établir le niveau de scolarité approprié et l'appliquer à l'ensemble du contenu.
        • +
      +
      +
      +

      Vérifier si le contenu est facile à comprendre

      +

      Les outils d'analyse de la lisibilité révèlent le niveau de compétence requis en lecture pour comprendre le texte. Ils ne vous disent pas si le texte est facile à lire et comprendre.

      +

      Pour vérifier si votre contenu est facile à lire et comprendre :

      +
        +
      • demandez à des personnes qui ont peu ou pas de connaissances sur le sujet d'examiner le texte pour voir si le message est clair et logique;
        • +
      • collaborez avec l'équipe des communications pour mettre en œuvre un test d'utilisation.
        • +
      +

      Si votre contenu correspond à un niveau de compréhension trop élevé ou si le test d'utilisation donne lieu à un faible taux de réalisation des tâches, essayez de :

      +
        +
      • réduire la taille des mots, des phrases ou des paragraphes, tout en conservant les mots de 3 syllabes ou plus qui sont bien connus de votre public cible;
        • +
      • remplacer le jargon par des termes que votre public cible comprendra;
        • +
      • éliminer les détails dont les gens n'ont pas besoin pour accomplir la tâche;
        • +
      • remplacer le nom d'un programme déjà cité par un terme court comme « le programme » au lieu d'utiliser son nom au long ou son abréviation;
        • +
      • présenter les tâches principales sous forme de listes à puces ou numérotées.
        • +
      +
      +

      Voyez comment la règle sur l'évaluation de la lisibilité du contenu s'applique à un contenu de langue anglaise

      + +
      +
      +
      -

      See how rule for measuring content for readability applies in French

      - -
      -
      -
      -

      3.0 Tone

      -
      -
      -
      -
      -

      In this section

      - -
      +

      3.0 Ton

      +
      +
      +
      +
      +

      Dans cette section

      +
      -

      The tone of the government's web content should be:

      -
        -
      • direct
        • -
      • informative
        • -
      • conversational
        • -
      • professional
        • -
      -

      Write as if you were talking to your audience in person, but with the authority of an institution that provides information as part of its mandate.

      -
      -

      3.1 Write directly to the person

      -

      Use an informal tone, and speak directly to people by using the second person ("you," "your").

      -

      Examples of statements that use the second person

      -
        -
      • Send your application to…
        • -
      • To get this benefit you must…
        • -
      -
      +
      +

      Le contenu Web du gouvernement du Canada.ca doit emprunter un ton :

      +
        +
      • direct
        • +
      • informatif
        • +
      • conversationnel
        • +
      • professionnel
        • +
      +

      Rédigez comme si vous parliez aux représentants de vos publics cibles, mais avec l'autorité d'un organisme qui fournit des renseignements dans le cadre de son mandat.

      +
      +

      3.1 Écrire directement à la personne

      +

      Adoptez un ton informel qui s'adresse aux gens directement en utilisant la deuxième personne du pluriel (vous).

      +

      Exemples d'énoncés qui utilisent la deuxième personne du pluriel pour désigner les utilisateurs

      +
        +
      • Envoyez votre demande à…
        • +
      • Pour obtenir cette prestation, vous devez…
        • +
      +

      Exception

      +

      Vous pouvez utiliser la deuxième personne du singulier (tu) si vous vous adressez à un jeune public dans le cadre d'une campagne promotionnelle.

      -

      Address the person in page titles, links and navigation labels

      -

      For page titles, links and navigation labels, use the possessive adjective "your" when the audience might consider the item being referred to as belonging to them.

      -
      Examples of navigation labels that address the person
      +

      S'adresser à la personne dans les titres de page, les liens et les rubriques de navigation

      +

      Dans le cas des titres de page, des liens et du texte des éléments de navigation, utilisez le pronom « votre » ou « vos » lorsqu'on peut considérer que l'objet du texte appartient aux représentants de votre public cible.

      +
      Exemples de rubriques de navigation qui s'adressent directement au public cible à l'aide de l'adjectif possessif
        -
      • Change your address
        • -
      • Replace your card
        • +
      • Modifiez votre adresse
        • +
      • Remplacez vos cartes
      -

      If the subject of the title, link or label refers to general information, use the indefinite article ("a" or "an") or no article at all.

      -
      Examples of navigation labels that don't use a possessive adjective
      +

      Si l'objet du titre de page, du lien ou de la rubrique de navigation fait référence à un renseignement général, utilisez « le », « la », « les », « un » ou « une ».

      +
      Exemples d'énoncés où l'adjectif possessif n'est pas utilisé
        -
      • Start a new business
        • -
      • Pay application fees
        • +
      • Financer une nouvelle entreprise
        • +
      • Payer les frais d'inscription
      -

      Don't use the first person

      -

      Don't switch from speaking to people to speaking on their behalf. Don't use "I" or "my" statements.

      -
      Example of statements that don't use "I" or "my"
      -

      Write:

      +

      N'employez pas la première personne

      +

      Ne passez pas d'une voix directe, qui s'adresse aux gens, à une voix indirecte (comme si vous parliez en leur nom). N'utilisez pas les énoncés formulés avec le pronom « je ».

      +
      Exemple d'énoncés formulés autrement qu'avec « je »
      +

      Écrivez :

        -
      • How to renew your passport
        • -
      • Renew your passport
        • +
      • Comment renouveler votre passeport
        • +
      • Renouvelez votre passeport
      -

      Instead of: How do I renew my passport?

      +

      Au lieu de : Comment dois-je renouveler mon passeport?

      Exception
      -

      You may use "my" in content, page titles and links for proper names (such as My Service Canada Account).

      +

      Vous pouvez utiliser « mon », « ma », « mes » dans le contenu, les titres de page et les liens lorsqu'il s'agit de noms propres (par exemple, Mon dossier Service Canada).

      +

      Voyez comment la règle sur la manière de s'adresser directement à la personne s'applique à un contenu de langue anglaise

      + +
      +
      +
      -

      See how the rule for writing directly to the audience applies in French

      - -
      -
      -
      -

      3.2 Use "we" to refer to the Government of Canada

      -

      We generally provide information to people from the perspective of the government as a whole rather than from a specific institution.

      -

      Use "we" and "our" when writing on behalf of the Government of Canada.

      -

      Examples of statements that use "we" or "our" to refer to the Government of Canada

      -

      Write: If you started a new claim within the last 52 weeks and there are still weeks payable on that claim, we will automatically renew your existing claim.
      - Instead of: If you started a new claim within the last 52 weeks and there are still weeks payable on that claim, Service Canada will automatically renew your existing claim.

      -

      Use "Government of Canada" when:

      +

      3.2 Utiliser le pronom « nous » pour désigner le gouvernement du Canada

      +

      Nous fournissons généralement des renseignements du point de vue de l'ensemble du gouvernement plutôt que de celui d'une institution en particulier.

      +

      Utilisez la première personne du pluriel (nous, notre et nos) lorsque vous rédigez au nom du gouvernement du Canada.

      +

      Exemples d'énoncé formulé avec « nous » ou « notre » pour faire référence au gouvernement du Canada

      +

      Écrivez: Si vous avez déposé une nouvelle demande de prestations au cours des 52 dernières semaines et qu'il y a des semaines payables restantes sur cette demande, nous renouvellerons automatiquement votre demande existante.
      + Au lieu de : Si vous avez déposé une nouvelle demande de prestations au cours des 52 dernières semaines et qu'il y a des semaines payables restantes sur cette demande, Service Canada renouvellera automatiquement votre demande existante.

      +

      Utilisez « gouvernement du Canada » pour :

        -
      • describing Canada's stance on a topic relative to another named jurisdiction (country, province, territory city, etc.)
        • -
      • explaining Canada's role with respect to a topic or issue
        • +
      • décrire la position du Canada sur un sujet lié à une autre administration (pays, province, territoire, ville, etc.) mentionnée dans le texte;
        • +
      • expliquer le rôle du Canada à l'égard d'un sujet ou d'une question.
      -

      Use the name of a specific institution in situations when the:

      +

      Utilisez le nom d'une institution en particulier seulement dans les situations suivantes :

        -
      • institution will be contacting the person
        • -
      • person needs to contact the institution by phone, mail or online process
        • -
      • role of the institution in a process is relevant to the task
        • +
      • l'institution contactera la personne;
        • +
      • la personne doit contacter l'institution par téléphone, par courrier ou en ligne;
        • +
      • le rôle de l'institution dans le contexte d'un processus est pertinent pour la tâche à accomplir.
      -

      Examples of statements that refer to specific institutions

      +

      Exemples d'énoncés qui mentionnent une institution en particulier

        -
      • The Canada Revenue Agency will inform you if you have to repay benefits.
        • -
      • The Canadian Food Inspection Agency gives permits for some meat products.
        • -
      • All restricted or controlled drugs need an import permit from Health Canada.
        • +
      • L'Agence du revenu du Canada vous indiquera si vous devez rembourser des prestations.
        • +
      • L'Agence canadienne d'inspection des aliments accorde des permis pour certains produits de la viande.
        • +
      • Toutes les drogues d'usage restreint et les drogues contrôlées nécessitent un permis d'importation de Santé Canada.
      -

      Don't include references to your website on your website.

      -

      Example of a statement that doesn't refer to Canada.ca on the Canada.ca site

      -

      Write: Determine whether you're eligible.
      -       Instead of: Get more information about eligibility on the Canada.ca website.

      +

      Ne faites pas référence à votre site Web sur les pages de votre site.

      +

      Exemples d'énoncé qui omet la référence à Canada.ca sur le site Canada.ca

      +

      Écrivez : Déterminez si vous êtes admissible.
      + Au lieu de : Obtenez des renseignements relatifs à l'admissibilité sur le site Canada.ca.

      -

      Third parties

      -

      Don't provide information on behalf of another organization. Don't duplicate information provided on another organization's website. Instead, direct people to that website to get the information.

      -

      Name the other organization when your content refers to it.

      -
      Example of a reference to a third party
      -

      Write: If you plan to travel to or transit through the United States, find out about the rules you need to follow from U.S. Customs and Border Protection.
      - Instead of: If you plan to travel to or transit through the U.S., CBSA encourages you to visit the U.S. Customs and Border Protection website for information on the U.S. Western Hemisphere Travel Initiative, and the requirements for entering or returning to the U.S.

      +

      Désigner les tierces parties

      +

      Ne donnez pas de renseignements au nom d'une autre organisation. Ne reproduisez pas les renseignements fournis sur le site Web d'une autre organisation. Dirigez plutôt les gens vers son site Web pour obtenir ces renseignements.

      +

      Nommez l'autre organisation par son nom lorsque votre contenu y fait référence.

      +
      Exemple d'énoncé faisant référence à une tierce partie
      +

      Écrivez : Si vous prévoyez vous rendre aux États-Unis ou transiter par les États-Unis, (en anglais seulement), renseignez-vous sur les règles édictées par l'organisme U.S. Customs and Border Protection.
      + Au lieu de : Si vous prévoyez vous rendre aux États Unis, travailler, étudier, mener des activités commerciales, immigrer ou transiter par les États Unis, vous pourriez faire l'objet d'une inspection ou être tenus de soumettre des documents de voyage. Visitez le site Web de U.S. Customs and Border Protection (en anglais seulement) pour des renseignements sur la U.S. Western Hemisphere Travel Initiative et les exigences pour entrer aux États Unis.

      -

      See how the rule for referring to the Government of Canada applies in French

      +

      Voyez comment la règle sur la manière de désigner le gouvernement du Canada s'applique à un contenu de langue anglaise

      -
      +
      -

      3.3 Expressing an obligation or a recommendation

      -

      As a government organization, we often publish rules, information and instructions that are set out in law. We also provide advice on how to follow them.

      +

      3.3 Exprimer une obligation ou une recommandation

      +

      Le gouvernement publie des règles, des renseignements et des instructions qui relèvent d'une loi. Nous fournissons également des conseils sur la façon de les suivre.

      -

      Express an obligation

      -

      When telling people about:

      -
        -
      • what the law requires them to do, use "must" instead of "legally required to" or similar language
        • -
      • an administrative requirement, use "need to"
        • -
      -
      Example of statements that express legal and administrative requirements
      -

      Legal: To be eligible for compassionate care benefits, you must be able to show that…
      - Administrative: After you apply online, you'll need to provide us with the following documents before we can finalize your claim.

      +

      Exprimer une obligation

      +

      Lorsque vous informez les gens de ce que la loi exige d'eux, mentionnez ce qu'ils doivent faire au lieu de préciser ce qu'ils sont « légalement tenus de faire ».

      +

      Utilisez un vocabulaire directif pour exprimer une obligation.

      +
      Exemple d'énoncé exprimant une obligation
      +

      Écrivez : Vous devez remplir le questionnaire.
      + Au lieu de : La Loi sur la statistique exige que vous remplissiez le présent questionnaire.

      -

      Express a recommendation

      -

      When telling people that they're allowed to perform an action:

      +

      Exprimer une recommandation

      +

      Lorsque vous dites aux gens qu'une chose est permise sans être obligatoire, utilisez un vocabulaire qui dénote la permission ou la possibilité, tel que « pourriez » ou « pouvez ».

      +

      Voyez comment la règle sur la manière d'exprimer une obligation ou une recommandation s'applique à un contenu de langue anglaise

      +
      +
      +
      -

      See how the rule for expressing an obligation or a recommendation applies in French

      - -
      -
      -
      -

      4.0 Style

      +

      4.0 Style de présentation

      -

      In this section

      +

      Dans cette section

      -

      On the web, less is more. Keep style and punctuation simple. Formatting (such as bold, italics and underlining) and complex punctuation can be distracting and make reading difficult for many people.

      +

      Sur le Web, un style de présentation du contenu allégé est plus facile à lire. Simplifiez la présentation et évitez la ponctuation excessive ou complexe. Le formatage (tel que les caractères gras, l'italique ou le soulignement) et la ponctuation complexe peuvent distraire les lecteurs et nuire à la compréhension.

      -

      4.1 Capitalization and punctuation

      -

      Use these styles for capitalization and punctuation of content in text, links and applications.

      -

      Capitalize the main words of:

      -
        -
      • titles of official publications (such as reports, frameworks, strategies and plans)
        • -
      • institution names
        • -
      • program names
        • -
      • titles of policy instruments
        • -
      • titles of legislation (in other words, acts and regulations)
        • -
      • Government of Canada
        • -
      -

      Lowercase the short form of proper names.

      -

      Example of proper names and their short forms

      -

      Full names: Agriculture and Agri-Food Canada, Canada Pension Plan, the Public Service of Canada
      - Short form: the department, the plan, the public service

      -
      All caps
      -

      Don't capitalize all the letters in a word.

      -

      Exceptions

      -
        -
      • Abbreviations (although avoid them unless they're necessary)
        • -
      • Military exercise or operation names (for example, Operation PROVISION)
        • -
      +

      4.1 Majuscules et ponctuation

      +

      Ayez recours aux styles décrits ci-après pour les majuscules et la ponctuation dans les textes, les liens et les applications.

      -

      Titles, headings and subheadings

      +

      Mot tout en majuscules

      +

      Évitez d'écrire toutes les lettres d'un mot en majuscules.

      +
      Exceptions
        -
      • Capitalize the first letter of the first word (sentence case) of all page titles, headings, subheadings, table captions and table headers
        • -
      • Capitalize proper nouns in page titles, headings and subheadings
        • -
      • Don't use punctuation at the end of page titles, headings and subheadings
        • +
      • Abréviations (à utiliser seulement si nécessaire)
        • +
      • Noms d'exercices ou d'opérations militaires (par exemple, l'opération PROVISION)
        • +
      • Le nom de famille de l’auteur dans une notice bibliographique (NOM DE FAMILLE, Prénom.)
      +
      +
      +

      Titres et sous-titres

      +

      Omettez la ponctuation à la fin des titres, titres de sections, sous-titres, légendes et en-têtes de tableaux.

      Exceptions
        -
      • You may use punctuation at the end of page titles, headings and subheadings for campaign slogans
        • -
      • Only use question marks when asking for information in a form, wizard, survey or quiz
        • +
      • Cette règle ne s'applique pas aux slogans.
        • +
      • Utilisez le point d'interrogation uniquement lorsqu'on demande aux gens de fournir des renseignements dans un formulaire, un questionnaire ou un sondage.
      -
      Example of question marks being used in forms, wizards, surveys or quizzes
      +
      Exemple de point d'interrogation dans un formulaire, un questionnaire ou un sondage
      -
      Figure 3
      - A web page containing a heading with a question mark. Text version below: +
      Figure 3
      + Une page Web contenant un sous-titre écrit sous forme de question.
      - Figure 3 - Text version -

      A web page containing a heading with a question mark.

      + Figure 3 - Version textuelle +

      Une page Web contenant un sous-titre écrit sous forme de question.

        -
      • Title of page +
      • Titre de page
          -
        • Find out if you need to charge GST/HST
          • +
        • Déterminez si vous devez facturer la TPS/TVH
        • -
      • Plain language summary of page +
      • Résumé de la page en langage clair et simple
          -
        • Answer a few questions to find out if you need to charge or collect the tax and register to get a GST/HST account number. Businesses with lower revenue and those that deal in certain goods and services might not need to charge tax.
          • +
        • Répondez à quelques questions afin de savoir si vous devez facturer ou percevoir la taxe et vous inscrire pour obtenir un numéro de compte de TPS/TVH. Les entreprises à faible revenu et celles qui offrent certains biens et services pourraient ne pas avoir à facturer la TPS/TVH.
        • -
      • Heading +
      • Sous-titre
          -
        • Do you or your organization already have a GST/HST account?
          • +
        • Est-ce que vous ou votre organisation avez déjà un compte de TPS/TVH?
        • -
      • 2 clickable options +
      • 2 choix de réponse à sélectionner
          -
        • Yes
          • -
        • No
          • +
        • Oui
          • +
        • Non
        • -
      • Action button to continue process +
      • Bouton pour poursuivre la tâche
          -
        • Next
          • +
        • Suivant
      -
      -

      Lists

      -
        -
      • Avoid having more than 1 sentence in a single list item
        • -
      • Don't end the list items with any punctuation
        • -
      -

      When list items are grammatically independent of each other or follow a heading, capitalize the first letter of each list item.

      -
      Example of punctuation in independent list items
      -

      Most requested

      +
      +

      Listes d'éléments

      -

      When the meaning of list items depends on a lead-in phrase, don't capitalize the first letter of each unless it's a proper name.

      -
      Example of punctuation in interdependent list items preceded by a colon
      -

      Representatives can be:

      +

      Lorsque les listes à puces forment des éléments distincts sur le plan grammatical ou si elles sont introduites par un sous-titre, mettez la première lettre de chaque élément en majuscule.

      +
      Exemples de listes à puces indépendantes
      +

      En demande

      -
      -
      -

      Links

      -

      Use lower case for a link in a sentence, unless the link contains a proper name.

      -
      -
      -

      Commas

      -

      Remove unnecessary commas to make web content easier to read:

      +

      Lorsque le sens des éléments d'une liste à puces dépend d'une phrase d'introduction, mettez la première lettre de chaque élément en minuscule, sauf s'il s'agit d'un nom propre.

      +
      Exemples d'une liste à puces dont le sens dépend d'une phrase d'introduction
      +

      Les représentants peuvent être :

        -
      • avoid multiple commas in a sentence by breaking it up into a few shorter sentences
        • -
      • place a comma before "and" and "or" only if it will help people understand a list of items in a sentence
        • +
      • des consultants en citoyenneté ou en immigration;
        • +
      • des avocats;
        • +
      • d'autres représentants.
      -
      -

      Hyphen and dashes

      -

      Hyphens and dashes have different uses. They aren't interchangeable. Avoid using dashes:

      -
        -
      • use a hyphen (-) to join words together
        • -
      • use "to" instead of the en dash (–) in a span or range of numbers, dates or time
        • -
      • use a comma (,) to emphasize or frame an idea instead of an em dash (—)
        • -
      • simplify your sentence instead of using em dashes
        • -
      +

      Voyez comment la règle sur les majuscules et la ponctuation s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      4.2 Soulignement, caractères gras et italique

      +

      Le style de présentation doit faire ressortir les renseignements les plus importants sur la page Web.

      +

      Ne combinez pas les styles, comme le soulignement et les caractères gras, sauf s'il s'agit du texte en hyperlien sur une page de sujet.

      +

      Soulignement

      +

      Utilisez le soulignement seulement pour les liens.

      +

      Caractères gras

      +

      Utilisez les caractères gras pour mettre du texte en évidence, mais utilisez-les avec modération: plus vous faites usage de cette mise en forme, moins elle est efficace.

      +

      Italique

      +

      Les personnes qui ont une dyslexie ou d'autres troubles de lecture pourraient avoir de la difficulté à lire un texte en italique.

      +

      N'utilisez pas l'italique :

      +
        +
      • à des fins de mise en page ou de décoration;
        • +
      • pour faire ressortir un mot ou une phrase (utilisez plutôt les caractères gras avec modération);
        • +
      • pour de longs passages, des citations, par exemple;
        • +
      • dans les titres de page.
        • +
      +

      Consultez Le guide du rédacteur dans les cas suivants :

      +
        +
      • les titres de livres, de journaux, de revues et d'œuvres d'art (article 5.2.1);
        • +
      • les titres de lois (article 5.2.2);
        • +
      • les mots ou abréviations en latin (article 5.3.3);
        • +
      • les mots en langue étrangère (article 5.3.4);
        • +
      • les lettres de l'alphabet (article 5.4.1).
        • +
      +

      Voyez comment la règle sur les caractères gras, l'italique et le soulignement s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      4.3 Symboles

      +

      Certains symboles rendent le contenu Web difficile à lire tandis que d'autres améliorent la lisibilité du texte. Faites vos recherches pour déterminer si un large public peut comprendre le symbole avant de l'utiliser.

      +

      Perluète

      +

      Utilisez l'esperluette (&) seulement pour des noms propres lorsqu'elle fait partie du nom de la société

      +

      Pourcentage

      +
        +
      • 20 % (et non 20 pour cent, 20 p. 100 ou 20 pour cent)
        • +
      • un quart (et non ¼)
        • +
      • la moitié (et non ½)
        • +
      +

      Unité monétaire

      +
        +
      • 100 $ par mois
        • +
      +

      Voyez comment la règle sur les symboles s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      4.4 Abréviations, acronymes et référence

      +

      N'utilisez pas une abréviation, un acronyme ou un sigle, sauf s'il est mieux connu du grand public que le mot dans sa forme au long. Par exemple :

      +
        +
      • REER
        • +
      • CELI
        • +
      • T4
        • +
      +

      Cherchez des mots-clés courants

      +

      Consultez vos données d'analyse pour savoir quels mots-clés votre public cible utilise pour trouver votre contenu.

      +

      Si un terme formé de plusieurs mots revient plus d'une fois dans une page Web, écrivez-le au long la première fois qu'il figure sur la page. Lorsque vous y faites référence par la suite :

      +
        +
      • écrivez « le programme », « le plan », « le fonds », etc., avec une lettre initiale minuscule, au lieu de répéter le terme en toutes lettres ou d'utiliser son acronyme ou une abréviation;
        • +
      • employez une abréviation comme référence secondaire seulement si les données d'analyse ou les tests d'utilisation révèlent qu'elle est bien connue et couramment utilisée comme mot-clé dans les moteurs de recherche.
        • +
      +

      Il faut toujours écrire une abréviation au long la première fois que vous l'utilisez sur une page Web.

      +

      Exemples d'énoncés sans abréviation ni acronyme

      +

      Écrivez : Il y a 15 centres de contact avec la clientèle dans l'ensemble du Canada.
      + Au lieu de : Il y a 15 CCC dans l'ensemble du Canada.

      +

      Écrivez : La loi consolide l'engagement du gouvernement du Canada…
      + Au lieu de : La LCALE consolide l'engagement du gouvernement du Canada...

      +

      Ajoutez les abréviations connus de vos publics cibles dans vos métadonnées (comme dans le champ de la métabalise Description) pour que les moteurs de recherche repèrent plus facilement votre page Web.

      +

      Évitez les abréviations et acronymes en repensant le contenu

      +

      Si votre texte compte de nombreuses abréviations ou plusieurs acronymes, repensez la structure du contenu. Envisagez de grouper les parties du contenu liées entre elles sous des rubriques et des sections distinctes.

      +

      Par exemple, lorsque vous énoncez des obligations juridiques, citez la loi une fois (au besoin), puis expliquez ce que la personne doit faire pour se conformer à cette loi. En raison du contexte, la personne saura que si elle doit faire quelque chose, c'est que la loi l'exige. N'utilisez pas l'acronyme de la loi. Il rend le texte plus difficile à lire.

      +

      Assurez-vous que le sujet est clos avant de mention d'autres lois et obligations juridiques.

      +
      +

      Citer des exemples

      +

      Évitez d'utiliser les abréviations « p. ex. » et « c.-à-d. ». Choisissez des options plus claires :

      +

      Écrivez : par exemple, tel que ou comme
      + Au lieu de : p. ex. 

      +

      Écrivez : c'est-à-dire
      + Au lieu de : c.-à-d. 

      +

      Vous pouvez utiliser ces abréviations quand l'espace est restreint (par exemple, dans un tableau ou dans un schéma).

      -

      See how the rule for capitalization and punctuation applies in French

      +

      Voyez comment la règle sur les abréviations et les acronymes s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      4.5 Forme contractée

      +

      Cette règle s’applique en anglais plutôt qu’en français. La forme contractée en français s’applique par défaut. En anglais, elle est facultative, mais elle est recommandée pour simplifier la lecture.

      +

      Voyez comment la règle de Forme contractée s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      4.6 Nombres

      +

      Principes généraux

      +
        +
      • Écrivez les nombres en chiffres arabes (0, 1, 2, 3), sauf s'ils se trouvent dans : +
          +
        • un nom propre (la ville de Trois-Rivières);
          • +
        • un titre (Trois Hommes dans un bateau);
          • +
        • une expression (un jour, tout ira mieux).
          • +
        +
        • +
      • Conservez les chiffres romains pour les noms propres (la partie II de la Loi sur la pension dans la fonction publique).
        • +
      • Jumelez le chiffre et le mot qui désigne un grand nombre, et insérez une espace insécable (Ctrl+Shift+barre Espace) entre les deux (5 millions, 20 ans).
        • +
      • Écrivez « premier », « deuxième », « troisième » et ainsi de suite jusqu'à « neuvième ».
        • +
      • Écrivez l'exposant dans la même taille de police pour : +
          +
        • le premier jour du mois (1er décembre);
          • +
        • les adjectifs numéraux au-delà de 10 (10e, 50e, 150e).
          • +
        +
        • +
      • Utilisez « de… à… » et « entre… et… » plutôt qu'un tiret pour désigner une échelle de chiffres (par exemple, de 4 000 $ à 10 000 $ ou entre 4 et 10 ans).
        • +
      • Il n'est pas nécessaire de répéter l'abréviation ou le symbole si une espace le sépare du chiffre (par exemple, de 3 à 6 ml, de 10 à 12 %).
        • +
      +

      Âges

      +
        +
      • Adultes âgés de 30 ans et plus
        • +
      • Les enfants âgés de 0 à 10 ans (et non « 0–10 ans »)
        • +
      • Les participants ont entre 0 et 10 ans
        • +
      +

      Voyez comment la règle sur le style de présentation des nombres s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      4.7 Dates

      +
        +
      • Écrivez « 31 juillet 2016 » ou « 31 juillet » si l'année est déjà clairement indiquée; +
          +
        • ne mettez pas de virgule entre la date et l'année (par exemple, 31 juillet 2016).
          • +
        +
        • +
      • Insérez une espace insécable entre le jour et le mois.
        • +
      • Utilisez le format numérique pour les dates seulement si l'espace est restreint (par exemple, dans un tableau); +
          +
        • écrivez aaaa-mm-jj;
          • +
        • clarifiez ce que le format représente dans le texte qui l'accompagne (par exemple, dans les notes ou la légende).
          • +
        +
        • +
      • Abrégez les noms de mois uniquement si l'espace est restreint (par exemple, janv., févr., avr.).
        • +
      +

      Périodes de temps

      +
        +
      • Utilisez « de… à… », « du… au… » et « entre… et… » plutôt qu'un tiret pour désigner une période de temps. Par exemple : +
          +
        • année civile 2014;
          • +
        • du lundi au vendredi;
          • +
        • du 29 mars au 4 avril;
          • +
        • de janvier à mars 2016 (au lieu de T1, T2, T3, T4);
          • +
        • exercice 2015 à 2016.
          • +
        +
        • +
      • Pour les périodes de temps comme les exercices financiers, expliquez dans le texte qui l'accompagne à quoi correspond cette période. Par exemple : +
          +
        • Ce rapport couvre l'exercice 2015 à 2016. Un exercice financier s'étend du 1er avril au 31 mars.
          • +
        +
        • +
      +

      Voyez comment la règle sur style de présentation des dates s'applique à un contenu de langue anglaise

      + +
      +
      +
      +
      +
      +

      4.8 Heures

      +

      Voyez comment la règle sur le style de présentation des heures s'applique à un contenu de langue anglaise

      +
      -
      +
      -
      -
      -

      4.2 Underlining, bold and italics

      -

      Formatting must support the most important information on the page.

      -

      Don't combine styles, like underlining and bold formatting, unless it's part of the hyperlinked text found on a topic page.

      -

      Underlining

      -

      Use underlining for links only.

      -

      Bold

      -

      Use bold for emphasis, but use it sparingly: the more you use it, the less effective it is.

      -

      Italics

      -

      People with dyslexia or other reading disorders may find it difficult to read italicized text.

      -

      Don't use italics:

      -
        -
      • for design or decorative purposes
        • -
      • to emphasize a word or phrase (use bold sparingly instead)
        • -
      • for long passages of text, such as quotations
        • -
      • in page titles
        • -
      -

      Follow The Canadian Style's rules for applying italics for the following:

      -
        -
      • French and foreign words (article 6.03)
        • -
      • Latin terms and abbreviations (article 6.04)
        • -
      • titles of publications (including acts and legislation) and works of art (article 6.05)
        • -
      • legal references (article 6.06)
        • -
      • mathematical, statistical and scientific material (article 6.11)
        • -
      -

      See how the rule for bold, italics and underlining applies in French

      - -
      -
      -
      -
      -
      -

      4.3 Symbols

      -

      Some symbols make web content more difficult to read while others improve readability. Research whether they're understood by a wide audience before using them.

      -

      Ampersand

      -
        -
      • Spell out the word "and" instead of using an ampersand (&)
        • -
      • Use the ampersand only for proper names when it's part of a company name and in certain abbreviations, including: -
          -
        • R&D (research and development)
          • -
        • O&M (operating and maintenance)
          • -
        -
        • -
      -

      Percent

      -
        -
      • 20% (not 20 percent)
        • -
      • A quarter or one quarter (not ¼)
        • -
      • Half (not ½)
        • -
      -

      Currency

      -
        -
      • $100 per month
        • -
      -

      See how the rule for symbols applies to content in French

      - -
      -
      -
      -
      -
      -

      4.4 Abbreviations and acronyms

      -

      Don't use an abbreviation or acronym unless it's better known to the widest audience than its long-form equivalent. For example:

      -
        -
      • EI
        • -
      • RCMP
        • -
      • T4
        • -
      -

      Research common keywords

      -

      Check your analytics to find out what keywords your audiences are using to find your content.

      -

      If you have to use a multi-word term more than once on a web page, use the full term the first time you use it. For any further uses of the term:

      -
        -
      • use a short form such as "the program" or "the plan," in lower case instead of repeating the full term or using an abbreviation
        • -
      • only use an abbreviation for a secondary reference if analytics data or usability testing determines that people often use and search for the abbreviation
        • -
      -

      Always spell out an abbreviation the first time you use it on a page. 

      -

      Example of statements that avoid the use of abbreviations and acronyms

      -

      Write: There are 15 client contact centres across Canada.
      - Instead of: There are 15 CCCs across Canada.

      -

      Write: The act strengthens the Government of Canada's commitment to…
      - Instead of: The EEA strengthens the Government of Canada's commitment to…

      -

      Include abbreviations that your audience uses in your metadata (for example, in the description field) to help search engines find your page more easily.

      -

      Avoid abbreviations and acronyms by rethinking the content

      -

      If your content contains a lot of abbreviations and acronyms, rethink its structure. Consider placing related content under distinct headings and sections.

      -

      For example, when introducing legal requirements, use the title of the act once, if necessary, and then talk about what people "must" do. The context will make it clear that the things they "must" do are requirements under the act. Don't use the abbreviation for the act, because it makes the text harder to follow.

      -

      Close the topic before referring to other obligations under different legislation.

      -
      -

      Latin abbreviations

      -

      Avoid using e.g. and i.e. Use clearer alternatives instead, for example:

      -

      Write: for example, such as, or like
      - Instead of: e.g.

      -

      Write: that is, in other words
      - Instead of: i.e.

      -

      You may use these abbreviations when space is limited, for example, in a table or a figure.

      +
      +

      4.9 Numéros de téléphone

      +

      Utilisez des tirets insécables (Ctrl+Shift+Tiret) pour les numéros de téléphone. Par exemple :

      +
        +
      • pour obtenir de l'aide, composez le 1-800-622-6232
        • +
      • vous pouvez nous joindre au 819-123-4567
        • +
      • 613-999-9900 poste 123
        • +
      +

      Voyez comment la règle sur le style de présentation numéros de téléphone s'applique à un contenu de langue anglaise

      + +
      +
      +
      -

      See how the rule for abbreviations and acronyms applies in French

      - -
      -
      -
      -
      -
      -

      4.5 Contractions

      -

      Use contractions that people use when they speak. They're easier to scan than the full form.

      -

      Use most positive contractions of auxiliary verbs. For example:

      -
        -
      • you've (you have), you're (you are), you'll (you will) or you'd (you would)
        • -
      • we've (we have), we're (we are), we'll (we will) or we'd (we would)
        • -
      -

      Use some negative contractions of auxiliary verbs. For example:

      -
        -
      • can't (cannot)
        • -
      • don't (do not) or didn't (did not)
        • -
      • won't (will not)
        • -
      • isn't (is not)
        • -
      • weren't (were not) or wasn't (was not)
        • -
      • aren't (are not)
        • -
      -

      Use, but don't confuse:

      -
        -
      • its (possessive) and it's (it is)
        • -
      • they're (they are) and their (possessive)
        • -
      -

      Uncommon or more complex contractions can be harder for people with low literacy skills to understand.

      -

      Don't use:

      -
        -
      • should've (should have) or could've (could have)
        • -
      • shouldn't (should not), couldn't (could not) or wouldn't (would not)
        • -
      • mightn't (might not)
        • -
      • mustn't (must not)
        • -
      • it'll (it will)
        • -
      -

      Negative contractions: exceptions

      -

      Don't use contractions when there is a critical difference between two things, for example, between doing and not doing something.

      -
      Example of statements showing differences that are critical and not critical
      -

      Critical: Do not drive while taking this medicine.
      - Not critical: Most people don't have reactions to the flu vaccine.

      -

      See how the rule for contractions applies in French

      - -
      -
      -
      -
      -
      -

      4.6 Numbers

      -

      General

      -
        -
      • Write numbers as numerals (0, 1, 2, 3, etc.), except in: -
          -
        • proper names (First Baptist Church)
          • -
        • titles (Three Men in a Boat)
          • -
        • figurative expressions (one day, things will be better)
          • -
        -
        • -
      • Keep Roman numerals when used in proper names (Canada Gazette, Part II)
        • -
      • Place a non-breaking space (Ctrl+Shift+Spacebar) between all numeral and word combinations ($5 million, 20 years)
        • -
      • Write first, second, third, and so on, up to and including ninth
        • -
      • Use the ordinal indicator in the same text size (not in superscript) for numbers 10 and above (10th, 50th, 150th)
        • -
      • Use "to" instead of an en dash in number ranges (for example, $4,000 to $10,000, 4 to 10 years)
        • -
      -

      Ages

      -
        -
      • Adults aged 30 or more
        • -
      • People 30 to 65 years old
        • -
      • A 10-year-old child
        • -
      -

      See how the rule for numbers applies in French

      - -
      -
      -
      -
      -
      -

      4.7 Dates

      -
        -
      • Write dates without an ordinal indicator ("st," "nd," "rd," "th")
        • -
      -

      Write: July 31, 2016, or just July 31 if the year is already clear
      - Instead of: July 31st, 2016, or July 31st

      -
        -
      • Use non-breaking spaces between the month and the day
        • -
      • Use the numeric date format only when space is limited (for example, in a table) -
          -
        • write yyyy-mm-dd
          • -
        • explain the format in surrounding text (for example, notes, legends)
          • -
        -
        • -
      • Capitalize the first letter of the month (for example, January, February, March)
        • -
      • Abbreviate month names when space is limited (for example, Jan, Feb, Mar)
        • -
      -

      Date ranges

      -
        -
      • Use "to" instead of an en dash in date ranges. For example: +
        +

        4.10 Adresses

        +
        +

        Adresses postales

          -
        • calendar year 2014
          • -
        • Monday to Friday
          • -
        • March 29 to April 4
          • -
        • fiscal year 2015 to 2016
          • -
        • January to March 2016 (instead of Q1, Q2, Q3 or Q4)
          • +
        • Abrégez le type de rue et l'orientation de la rue.
          • +
        • Utilisez l'indicatif à deux lettres pour désigner la province ou le territoire.
          • +
        • Insérez 2 espaces entre l'abréviation de la province ou du territoire et le code postal.
          • +
        • Écrivez le code postal avec des lettres en majuscules.
          • +
        • N'utilisez aucune ponctuation, sauf un trait d'union entre le numéro d'unité ou de bureau et le numéro municipal.
        -
        • -
      • For date ranges like fiscal years, explain what period the range covers in surrounding text. For example: +

        [Nom de l'organisation ou de la personne]
        + [Renseignements supplémentaires]
        + [Unité ou bureau]-[Numéro municipal] [Type de rue abrégé] [Nom de la rue] [Orientation de la rue abrégée]
        + [Ville] [Indicatif à deux lettres de la province ou territoire]  [Code postal]

        +
        Exemple d'une adresse postale
        +

        Intégrité
        + Direction générale de la surveillance
        + Services publics et approvisionnement Canada
        + Portage III Tour A 10A1
        + 105-11 rue Laurier
        + Gatineau QC  K1A 0S5

        +
      +
      +

      Adresses de courriel

      +

      Écrivez les adresses de courriel au long au lieu de les intégrer dans le contenu.

      +

      Écrivez :

        -
      • This report covers the 2015 to 2016 fiscal year. A fiscal year runs from April 1 to March 31.
        • +
      • Veuillez soumettre votre demande par courriel à abcxyz@canada.ca.
        • +
      • Pour soumettre votre demande par courriel : abcxyz@canada.ca.
      - -
    -

    See how the rule for dates applies in French

    - -
    -
    -
    -
    -
    -

    4.8 Times

    -
      -
    • 4:30 pm
      • -
    • 9 am to 5 pm
      • -
    -

    See how the rule for times applies in French

    - -
    -
    -
    -
    -
    -

    4.9 Phone numbers

    -

    Use non-breaking hyphens (Ctrl+Shift+Hyphen) in phone numbers. For example:

    -
      -
    • if you need help, call 1-800-622-6232
      • -
    • 613-999-9900 ext. 123
      • -
    -

    See how the rule for phone numbers applies in French

    - -
    -
    -
    -
    -
    -

    4.10 Addresses

    -
    -

    Mailing addresses

    -
      -
    • Abbreviate street types, street direction and province or territory
      • -
    • Use the correct abbreviations for provinces and territories
      • -
    • Insert 2 spaces between the province or territory abbreviation and the postal code
      • -
    • Use uppercase to write the letters in the postal code
      • -
    • Don't use punctuation except for a hyphen between the unit designator and the civic number
      • -
    -

    [Organization name or person name]
    - [Additional delivery information]
    - [Suite or office]-[Civic number] [Street name] [Abbreviated street type] [Abbreviated street direction]
    - [City] [Two-letter province or territory abbreviation] [Postal code]

    -

    Example of a mailing address.

    -

    Integrity Regime
    - Departmental Oversight Branch
    - Public Services and Procurement Canada
    - Portage III Tower A 10A1
    - 105-11 Laurier St
    - Gatineau QC  K1A 0S5

    -
    -
    -

    Email addresses

    -

    Spell out email addresses instead of embedding them within your text.

    -

    Write:

    - -

    Instead of: Email us to submit a request.

    +

    Au lieu de : Contactez-nous par courriel pour soumettre votre demande.

    +
    -

    See how the rule for addresses applies in French

    - -
    -
    -
    - -
    -

    4.11 Words and expressions in transition

    -

    Words and expressions in transition are those written commonly in 2 or more different ways. Reduce confusion by using the following spellings:

    +

    Voyez comment la règle sur le style de présentation de Adresses s'applique à un contenu de langue anglaise

      -
    • website (not "web site")
      • -
    • web page (not "webpage")
      • -
    • web (not "Web")
      • -
    • email (not "e-mail")
      • -
    • online (not "on line")
      • +
    • 4.10 Addresses
    -

    See how the rule for words and expressions in transition applies in French

    -

    This rule doesn't apply to content in French.

    -
    +
    -

    5.0 Content structure

    +

    5.0 Structure du contenu

    -

    In this section

    -
    -

    The structure and layout of content components help people find what they need quickly. Content components include:

    +

    La structure et la disposition des éléments du contenu aident les gens à trouver rapidement ce qu'ils cherchent. Les éléments de contenu comprennent :

      -
    • page title  
      • -
    • headings
      • -
    • lists
      • -
    • tables
      • +
    • le titre de la page;
      • +
    • les titres de sections;
      • +
    • les listes verticales;
      • +
    • les tableaux.
    -

    On a web page

    -

    Make sure you:

    +

    Structurer le contenu dans une page Web

    +

    Assurez-vous :

      -
    • divide the page into logical sections to give an overview of the information it contains
      • -
    • focus on the task and show only the information people need to complete the task
      • +
    • de subdiviser la page en sections logiques pour donner un aperçu de l'information qu'elle contient;
      • +
    • d'organiser la page en fonction d'une tâche en affichant seulement les renseignements dont les gens ont besoin pour accomplir cette tâche.
    -

    Structure the content components efficiently to make your page:

    +

    Structurez efficacement les éléments du contenu afin que votre page soit plus :

      -
    • more visible to search engines and easier to find
      • -
    • easier to view on mobile devices
      • +
    • visible pour les moteurs de recherche et plus facile à trouver;
      • +
    • facile à voir sur les appareils mobiles.
    -

    Across multiple web pages

    -

    Think about how a person will journey through the content. If:

    +

    Structurer le contenu sur plusieurs pages Web

    +

    Pensez à la démarche de la personne lorsqu'elle parcourt votre texte. Si :

      -
    • your web page content covers too many topics, you might need to divide it into several pages
      • -
    • several web pages contain pieces of content that relate to the same subject, consider combining them into a single page
      • +
    • votre page Web aborde trop de sujets, il est possible qu'il soit plus approprié de la diviser en plusieurs pages;
      • +
    • plusieurs de vos pages Web renferment du contenu lié au même sujet, envisagez de les combiner en une seule page.
    -

    5.1 Write useful page titles and headings

    -

    In your page title, accurately describe what's on the page. A descriptive page title is important because search engines often display the title without the context that the rest of the page provides.

    -

    Most people scan page titles and headings, looking for keywords that will confirm that they have found what they're looking for. People who use assistive technology may listen for keywords using software or may use keyboard shortcuts to access all the headings on a page.

    -

    When writing a page title, heading or subheading, make sure that it:

    +

    5.1 Rédiger des titres et sous-titres de page descriptifs

    +

    Assurez-vous que votre titre de page décrit bien ce que la page contient. Un titre descriptif est important parce que les moteurs de recherche affichent souvent le titre sans contexte dans la liste des résultats de recherche.

    +

    La plupart des gens survolent les titres de page et les sous-titres pour repérer des mots-clés qui confirment qu'ils ont trouvé le contenu recherché.

    +

    Les personnes qui utilisent les technologies d'aide peuvent se servir d'un logiciel pour entendre les mots clés ou utiliser les raccourcis du clavier pour accéder à tous les titres de la page.

    +

    Lorsque vous rédigez un titre de page ou un sous-titre, assurez-vous que le titre :

      -
    • gives a clear idea of what follows
      • -
    • is short and contains no unnecessary words
      • -
    • contains the most relevant terms at the beginning
      • -
    • makes sense on its own
      • -
    • is followed by text and not by another heading, unless the heading introduces a table of contents on the same page
      • -
    • has no punctuation at the end
      • -
    • contains no abbreviation unless the audience knows it better than it knows its long-form equivalent
      • -
    • contains no promotional messaging (boastful, subjective claims) because it might confuse and stop people from navigating to the page
      • +
    • décrit clairement le sujet traité dans le texte qui suit;
      • +
    • est bref, sans mots superflus (si possible, omettez l'article en début de titre ou de sous-titre);
      • +
    • introduit les termes les plus pertinents au début;
      • +
    • conserve son sens, même hors contexte;
      • +
    • est suivi d'un texte et non d'un autre titre de section, sauf s'il introduit une liste des sections de la page;
      • +
    • ne se termine pas par un signe de ponctuation;
      • +
    • n'inclut pas d'abréviation, sauf si elle est mieux connue du public cible que l'appellation au long;
      • +
    • n'inclut pas de message promotionnel (comme une affirmation subjective) puisqu'il pourrait être déroutant pour les gens et faire en sorte qu'ils cessent de naviguer jusqu'à la page.
    -

    Make the page title unique

    -

    Most search engines identify relevant search results based on:

    +

    Privilégier un ton et un temps de verbe neutre pour les titres et sous-titres

    +

    Privilégiez un ton neutre et l'utilisation de l'infinitif lorsque vous rédigez des titres et des sous-titres.

    +
    +
    +

    Donner un titre unique à votre page

    +

    La plupart des moteurs de recherche repèrent les résultats pertinents selon:

      -
    • page title
      • -
    • headings
      • -
    • subheadings
      • +
    • le titre de page;
      • +
    • les titres de sections;
      • +
    • les sous-titres.
    -

    They display the page title as a link on the results page.

    -

    Unique page titles help search engines tell the difference between similar pages. They also help ensure that people don't need to look at many pages with the same name to find the information they need.

    -

    Check whether your page title is unique by using a search engine. Search for the title of the page followed by "site:" and the domain extension (for example, "food safety site:gc.ca" or "food safety site:canada.ca").

    +

    Ils affichent le titre de page sous forme de lien dans la page de résultats.

    +

    Les titres de page uniques permettent aux moteurs de recherche de faire une distinction entre diverses pages similaires. Ils font également en sorte que les gens n'aient pas à examiner de nombreuses pages du même nom pour trouver l'information requise.

    +

    Vous pouvez utiliser un moteur de recherche pour vérifier si votre titre de page est unique en inscrivant le titre de la page, suivi de « site:» ainsi que du nom de domaine (par exemple, « salubrité des aliments site:gc.ca » ou, « salubrité des aliments site:canada.ca »).

    -
    -

    Use a page title, headings and subheadings to show structure

    -

    The page title, headings and subheadings help people find information on the screen easily. Use headings to divide text into logical sections approximately every 200 words.

    -

    Structuring headings clearly helps establish the authority of one heading over another.

    -

    For the page title:

    +
    +

    Utiliser le titre et les sous-titres de la page pour mettre sa structure en évidence

    +

    Le titre de page, les titres de sections et les sous-titres de votre contenu Web aident les gens à trouver facilement des renseignements à l'écran. Utilisez des titres pour diviser le texte en sections logiques à environ tous les 200 mots.

    +

    Structurer les titres clairement aide à établir l'autorité d'un titre par rapport à un autre.

    +

    Pour le titre de page:

      -
    • use this style: Heading 1
      • -
    • apply a Heading 1 only once per page
      • +
    • utilisez ce style de présentation : Titre 1
      • +
    • une seule fois dans une page
    -

    For the main sections:

    +

    Pour une section principale :

      -
    • use this style: Heading 2
      • -
    • can appear many times
      • +
    • utilisez ce style de présentation : Sous-titre 2
      • +
    • plusieurs fois dans une page
    -

    For subsections:

    +

    Pour une sous-section:

      -
    • use this style: Heading 3
      • -
    • can appear many times and in many main sections
      • +
    • utilisez ce style de présentation : Sous-titre 3
      • +
    • plusieurs fois et dans maintes sections principales
    -

    For sub-subsections:

    +

    Pour une sous-sous-section:

      -
    • use this style: Heading 4 (and so on)
      • -
    • can appear many times in many subsections
      • +
    • utilisez ce style de présentation : Sous-titre 4 (et ainsi de suite)
      • +
    • plusieurs fois et dans maintes sous-sections
    - Structure your content with automated style features -

    Having clear and consistently formatted headings helps your web team produce the web pages more quickly and with fewer errors.

    -

    Use the automated styles feature of your word processing software to structure headings. The styles feature clearly differentiates headings from content and helps you format headings consistently.

    -
    Table of contents
    -

    Use the table of contents feature from your Word processing software to automatically generate a table of contents based on the heading levels in your document. Then, check the table of contents to make sure you've correctly structured the page title, headings and subheadings.

    -

    Delete the table of contents before you send the document for approval if it isn't required for the final online version.

    -
    Navigation pane
    -

    Use the navigation pane feature in Microsoft Word. When you select Find (or press Control + F), a small window will display all the headings in your document.

    + Structurez votre texte grâce aux options de styles automatisées +

    Utilisez les options de style automatisées de votre logiciel de traitement de texte pour structurer vos titres. Elles permettent de bien distinguer les sous-titres du contenu et d'assurer l'uniformité.

    +

    Des sous-titres présentés de façon claire et cohérente aident votre équipe Web à produire la page plus rapidement en évitant les erreurs.

    +
    Table des matières
    +

    Utilisez la fonction de table des matières de votre logiciel de traitement de texte pour générer une table des matières en fonction des niveaux d'en-têtes du document. Vérifiez ensuite cette table des matières pour déterminer si vous avez organisé correctement le titre de page, les titres de sections et les sous-titres.

    +

    Supprimez la table des matières avant l'étape des approbations si elle n'est pas requise pour la version en ligne.

    +
    Volet de navigation
    +

    Utilisez le volet de navigation de Microsoft Word. Lorsque vous ouvrez l'outil de recherche (ou que vous tapez Control + F) et sélectionnez l'affichage des résultats par en têtes, une fenêtre contenant tous les titres de votre document apparaîtra.

    -
    Publication and program titles usually don't make good web page titles
    -

    Using the titles of reports, brochures, publications or programs as the web page title can make it difficult for people to find your content, even if it relates to their task.

    -

    The titles of publications are usually not written in plain language, short enough or descriptive enough.

    -

    To help make sure your page ranks high in search results, use page titles that:

    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    +
    +

    Les titres de publications et de programmes font rarement de bons titres de page Web

    +

    Reproduire les titres de rapports, de brochures, de publications ou de programmes dans les titres de page Web peut empêcher les gens de trouver votre contenu, même si le contenu est lié à leur tâche.

    +

    Les titres de publications ne sont pas toujours écrits en langage clair, ni assez courts ou assez descriptifs.

    +

    Pour maximiser les chances que votre contenu figure en haut de la liste des résultats de recherche, utilisez des titres de page :

      -
    • are short
      • -
    • describe the page accurately
      • -
    • are relevant to what people type into search engines
      • +
    • courts;
      • +
    • qui décrivent la page avec précision;
      • +
    • qui sont liés à ce que la personne indique dans la barre de recherche.
    -

    When you post a publication online, you must adapt it for the web. Here are some things you can do to get better results:

    -

    Write a title that describes the contents of the page

    -

    The web page title (Heading1) is the title you see at the top of the page when you're looking at it. Make sure that it accurately describes, in plain language, what your publication is about.

    -

    Use the first paragraph to introduce your publication

    -

    The first paragraph of your web page should introduce your publication in plain language. It helps people who've landed on the page decide whether they've found what they are looking for. You can include the title of your publication here.

    -

    Include keywords in the page's metadata

    -

    Use the title tag and the description metadata field to improve where your publication ranks in search results. Here's what you can do:

    -

    Title tag: The page title tag is the blue hyperlinked text you see when a search engine generates a list of results. Write an effective page title (Heading1), and use it as your title tag.

    -

    Description metadata field: The description metatdata is the content you see under the blue hyperlinked text in search results. Avoid listing only keywords, because search engines might ignore these. Write 1 or 2 short sentences that summarize the page. Make sure they contain keywords that people use when searching for your content (for example, abbreviations familiar to your audience).

    -

    Refer to the section on plain language for tips on using simple and common words as keywords.

    +

    Lorsque vous affichez une publication en ligne, vous devez l'adapter pour le Web. Voici quelques techniques de base qui vous aideront à obtenir les meilleurs résultats :

    +
    Utilisez un titre qui décrit le contenu de la page
    +

    Le titre principal (Titre 1) de la page est le texte que vous voyez en haut de la page lorsque vous la regardez. Assurez-vous qu'il décrit bien le sujet de votre publication en langage clair et simple.

    +
    Utilisez le premier paragraphe pour introduire votre publication
    +

    Le premier paragraphe de votre page Web doit introduire votre publication en langage clair et simple. Il aide les personnes qui consultent votre page à déterminer s'ils ont trouvé ce qu'ils cherchent. Vous pouvez inclure le titre de votre publication ici.

    +
    Incluez des mots-clés dans les métadonnées de la page
    +

    Utilisez les métabalises Titre et Description pour améliorer le classement de votre publication dans les résultats de recherche. Voici ce que vous pouvez faire :

    +

    Métabalise Titre : La métabalise Titre de la page est le texte en hyperlien bleu que vous voyez lorsque les moteurs de recherche génèrent une liste de résultats. Trouvez un titre principal (Titre 1) efficace pour votre page et utilisez-le aussi comme métabalise Titre.

    +

    Métabalise Description : La métabalise Description est le contenu que vous voyez sous le texte en hyperlien bleu dans la liste des résultats de recherche. Évitez d'énumérer seulement des mots-clés, car les moteurs de recherche tendent à ne pas les prendre en considération. Écrivez une (1) ou 2 phrases courtes qui décrivent le contenu de la page. Assurez-vous d'inclure les mots-clés que vos publics cibles utilisent lorsqu'ils cherchent votre contenu (par exemple, des abréviations qu'ils connaissent bien).

    +

    Reportez-vous à la section sur le langage clair et simple pour des conseils sur l'utilisation de mots-clés simples et courants.

    -

    See how the rule for writing useful page titles and headings applies in French

    - -
    -
    -
    -

    5.2 Use lists to help people scan

    -

    A short vertical list is easier for people to scan and remember than a long paragraph. If possible, aim for maximum of 7 items in your list.

    -

    When writing lists:

    +

    5.2 Utiliser des listes d'éléments pour aider les gens à survoler le texte

    +

    Il est plus facile de survoler une courte liste d'éléments verticaux et d'en retenir le contenu qu'un long paragraphe. Si c'est possible, visez un maximum de 7 éléments par liste.

    +

    Lorsque vous rédigez des listes d'éléments :

      -
    • use positive statements as much as possible
      • -
    • place negatively phrased items together, if you must use them
      • -
    • use consistent grammatical structure. For example, if you: +
    • utilisez autant que possible la forme positive;
      • +
    • regroupez les éléments rédigés à la forme négative, si vous devez l'utiliser;
      • +
    • utilisez une structure grammaticale cohérente. Par exemple, si :
        -
      • use the imperative mood (or command) for the first item of your list, use the same mood for each subsequent list item
        • -
      • start your first item with a noun, start the other list items with nouns
        • +
      • vous utilisez le mode impératif (commandement) dans le premier élément de votre liste, reprenez ce mode dans chaque élément subséquent;
        • +
      • votre premier élément commence par un nom, poursuivez la liste de la même façon;
      • -
    • if a list contains more than 7 items, consider breaking it up into categories
      • +
    • si votre liste contient plus de 7 éléments, songez à la séparer en différentes catégories.
    -

    Lead-in sentence

    -

    If you need to clarify the relationship between each element, start the list with a lead-in paragraph that:

    +

    Phrase d'introduction

    +

    S'il faut clarifier un lien entre les éléments d'une liste, commencez la liste par une introduction qui :

      -
    • introduces or applies to all the list items
      • -
    • emphasizes the common element between all the items
      • +
    • s'applique à tous les éléments;
      • +
    • met en relief le point commun entre les éléments.
    -

    If necessary, specify "all" or "or" in the introductory paragraph to clarify whether the list is comprehensive or conditional. For example, you can write:

    +

    Si c'est pertinent, précisez dans la phrase d'introduction s'il faut prendre en compte tous les éléments ou un ou l'autre des éléments de la liste. Par exemple, vous pouvez écrire :

      -
    • "You must meet all of the following requirements:"
      • -
    • "To be eligible, you must meet 1 or more of the following requirements:"
      • +
    • « Vous devez répondre à toutes les exigences ci-dessous : »
      • +
    • « Pour soumettre une demande, vous devez répondre à une (1) ou plusieurs des exigences ci-dessous : »
    -

    Numbered lists

    -

    Use numbered lists to show:

    +

    Listes numérotées

    +

    Utilisez des listes numérotées pour indiquer :

      -
    • ranking
      • -
    • order
      • -
    • priority
      • -
    • step-by-step instructions
      • +
    • le rang
      • +
    • l'ordre
      • +
    • la priorité
      • +
    • les détails d'une marche à suivre, étape par étape
    -

    Bulleted lists

    -

    Place only one idea in each bulleted item. If you need to include more information to explain an idea, use sub-bullets, but use them sparingly.

    -
    Example of bulleted list items
    -

    Write:
    - To draft a high-quality source document:

    +

    Listes à puces

    +

    Présentez une seule idée par puce. Si vous devez inclure plus de renseignements pour clarifier une idée, utilisez des listes en retrait, mais avec modération.

    +
    Exemple de listes à puces
    +

    Écrivez :

    +

    Pour rédiger un document source de qualité :

      -
    • organize your ideas +
    • organisez vos idées;
        -
      • arrange your ideas from most to least important to the task
        • -
      • test your order with a representative audience
        • +
      • ordonnez vos idées par ordre d'importance relativement à la tâche;
        • +
      • testez l'ordre de vos idées avec des représentants de votre public cible;
      • -
    • use the active voice
      • -
    • use the right words
      • -
    • write short sentences and paragraphs
      • -
    • follow the guidelines in the Canada.ca Content Style Guide
      • +
    • utilisez la voix active;
      • +
    • employez le mot juste;
      • +
    • rédigez des phrases brèves et des paragraphes courts;
      • +
    • suivez les lignes directrices du Guide de rédaction du contenu du site Canada.ca.
    -

    Instead of:
    - To draft a high-quality source document:

    +

    Au lieu de :

    +

    Pour rédiger un document source de qualité :

      -
    • organize your ideas
      • -
    • arrange your ideas from most to least important to the task
      • -
    • test your order with a representative audience
      • -
    • do not use the passive voice
      • -
    • it is important to use the right words
      • -
    • use only short sentences and paragraphs
      • -
    • use the Canada.ca Content Style Guide to ensure you have followed the guidelines
      • +
    • organisez vos idées;
      • +
    • ordonnez vos idées par ordre d'importance relativement à la tâche;
      • +
    • testez l'ordre de vos idées avec des représentants de votre public cible;
      • +
    • n'utilisez pas la voix passive;
      • +
    • il est important d'employer le mot juste;
      • +
    • n'utilisez que des phrases brèves et des paragraphes courts;
      • +
    • servez-vous du Guide de rédaction du contenu du site Canada.ca pour vous assurer d'avoir suivi les lignes directrices.
    -

    Take a look at the section on capitalization and punctuation rules that apply to lists.

    +

    Consultez la section sur l'utilisation des majuscules et de la ponctuation dans les listes d'éléments.

    -

    Alphabetical lists

    -

    Only present your web content in an alphabetical order if it's the most logical and intuitive approach for the audience.

    -

    For example, listing provinces and territories in alphabetical order could be appropriate.

    -

    If you present content in alphabetical order in English, also present it in alphabetical order in French to provide the same intuitive experience.

    +

    Listes alphabétiques

    +

    Présentez le contenu Web en ordre alphabétique seulement s'il s'agit de l'approche la plus logique et intuitive possible pour le public cible.

    +

    Cependant, il peut être approprié de présenter des éléments par ordre alphabétique, comme une liste de noms.

    +

    Si vous présentez du contenu français par ordre alphabétique, présentez aussi le contenu traduit en anglais par ordre alphabétique pour offrir la même expérience intuitive.

    -

    See how the rule for using lists applies in French

    - -
    -
    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    -

    5.3 Use tables to organize data

    -

    Use tables to organize and present data. Make sure that the:

    +

    5.3 Utiliser des tableaux pour organiser des données

    +

    Utilisez des tableaux pour organiser et présenter des données. Assurez-vous que :

      -
    • value of each cell relates to the column and row headers
      • -
    • entries in a column don't contain information that could be considered a subhead
      • -
    • value of each cell aligns with the column header that appears directly above it
      • +
    • la valeur de chaque cellule correspond aux en-têtes des colonnes et des rangées;
      • +
    • les entrées à l'intérieur d'une colonne n'incluent pas de renseignement qui pourrait être considéré comme un sous-titre;
      • +
    • la valeur de chaque cellule concorde avec l'en-tête de colonne qui figure directement au-dessus.
    -

    Give your table a clear title that describes the information in it.

    -

    Example of a table that organizes data

    - -
    - Comparison of net budgetary authorities and expenditures for Vote 1 as of December 31, for fiscal years 2011 to 2012 and 2012 to 2013 ($ millions) +

    Présentez votre tableau à l'aide d'un titre clair qui décrit les renseignements contenus dans le tableau.

    +

    Exemple d'utilisation d'un tableau pour organiser des données

    + + - + - - - + + + - - - - - + + + - - - + + +
    + Exemple d'utilisation d'un tableau pour organiser des données
    + Comparaison des autorisations budgétaires nettes et des dépenses pour le crédit du 1er au 31 décembre, pour les exercices financiers 2011 à 2012 et 2012 à 2013 (en millions de dollars)
    Vote 12011 to 20122012 to 2013Crédit 12011 à 20122012 à 2013
    Net budgetary authorities287.4252.4Autorisations budgétaires nettes287,4252,4
    Year-to-date expenditures ending December 31184.1154.6Dépenses cumulatives au 31 décembre184,1154,6
    -

    Use column and row headers

    -

    Each column and row of a table must have a header that describes the information in that column or row.

    -

    Column and row headers are different from headings and subheadings:

    +

    Inclure des en-têtes de colonne et de rangée

    +

    Chaque colonne et chaque rangée d'un tableau structuré doit comporter un en-tête qui décrit les renseignements se trouvant dans la colonne ou la rangée.

    +

    Les en-têtes de colonne et de rangée diffèrent des titres et sous-titres. Les :

      -
    • column and row headers appear in the cells at the top and on the far left of a table
      • -
    • headings and subheadings refer to the title of a table or a section of content that appears on a web page
      • +
    • en-têtes de colonne ou de rangée introduisent l'information contenue sous la colonne ou dans la rangée d'un tableau;
      • +
    • titres et sous-titres désignent le titre d'un tableau ou d'une section du contenu d'une page Web.
    -

    Check that there is a consistent relationship between the columns and rows.

    -

    For example, to check the table above, ask yourself whether you can align the information that appears in:

    +

    Vérifiez si la relation est cohérente entre les colonnes et les rangées d'un tableau.

    +

    Par exemple, dans le tableau ci-dessus, demandez-vous si les renseignements figurant dans une :

      -
    • the column, with the column header that appears directly above it ("Vote 1," "2011 to 2012" ($ millions) and "2012 to 2013" ($ millions))
      • -
    • a row, with the row header that defines it ("Net budgetary authorities" and "Year-to-date expenditures ending December 31")
      • +
    • colonne concordent avec l'en-tête de colonne directement au-dessus (« Crédit 1 », « 2011 à 2012 » (en millions de dollars) et « 2012 à 2013 » (en millions de dollars));
      • +
    • rangée concordent avec l'en-tête de rangée qui les décrit (« Autorisations budgétaires nettes » et « Dépenses cumulatives au 31 décembre »).
    -

    Your web team will use the information in the headers to code the table. Afterwards, screen readers will be able to correctly interpret the data within the table.

    -

    In the following example, all the cells in the first:

    +

    Votre équipe Web utilisera les renseignements contenus dans les en-têtes de colonne et de rangée pour coder le tableau.  Ainsi, les lecteurs d'écrans pourront en interpréter correctement les données.

    +
    Exemple de l'utilisation appropriée d'en-têtes de colonne et de rangée
    +

    Dans l'exemple suivant, toutes les cellules de la première :

      -
    • row are column headers and appear bolded and in grey 
      • -
    • column are row headers (except the top-left cell) and appear bolded
      • +
    • rangée sont des entêtes de colonne et sont identifiées par les caractères gras et la couleur grise;
      • +
    • colonne sont des entêtes de rangée (sauf pour la cellule du haut à gauche) et sont identifiées par les caractères gras.
    - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + +
    - Disclosure of contracts over $10,000 from January to March 2010table 2 note * + Divulgation de contrats de plus de 10 000 $ de janvier à mars 2010table 2 note *
    Date contract was awardedVendor nameDescription ValueDateNom du fournisseurDescriptionValeur
    2010-02-01table 2 note **ABC Business SolutionsRental of machinery office furniture and fixtures$227,703.22Solutions d'entreprises ABCLocation d'appareils, de meubles et d'accessoires de bureau227 703,22 $
    2010-02-20IT Consultants R UsOther professional services not elsewhere specified$227,956.64Consultants informatique sérénITAutres services professionnels uniques227 956,64 $
    2010-02-23Management Consulting Group LimitedManagement consulting$285,575.89Service-conseil gestion limitéeConseils en gestion285 575,89 $
    2010-03-01XYZ ConsultantsOther professional services not elsewhere specified $56,294.42Consultants XYZAutres services professionnels précisés nulle part ailleurs 56 294,42 $
    -
    Table 2 Notes
    +
    Notes du tableau 2
    -
    Table 2 Note *
    +
    Note * du tableau 2
    -

    Fourth quarter of the April 1, 2009, to March 31, 2010, fiscal year.

    -

    Return to table 2 note * referrer

    +

    Quatrième trimestre de l'exercice financier allant du 1er avril 2009 au 31 mars 2010.

    +

    Retour à la référence de la note * du tableau 2

    -
    Table 2 Note **
    +
    Note ** du tableau 2
    -

    Dates in this table represent the year, month and day (yyyy-mm-dd).

    -

    Return to table 2 note ** referrer

    +

    Les dates de ce tableau représentent l'année et le mois, suivis du jour (aaaa-mm-jj).

    +

    Retour à la référence de la note ** du tableau 2
    -

    By looking at the column headers "Date contract was awarded," "Vendor name" and "Value," people can understand that on February 23, 2010, Management Consulting Group Limited was awarded a contract valued at $285,575.89.

    +

    En examinant l'en-tête des colonnes « Date d'attribution du contrat », « Nom du fournisseur » et « Valeur », on comprend que le 23 février 2010, l'entreprise Service conseil gestion limitée a obtenu un contrat d'une valeur de 285 575,89 $.

    -

    Use the simplest structure possible

    -

    It can be difficult to make tables accessible and easy to read for people using screen readers or mobile devices.

    -

    To make information useful to the widest possible audience:

    +

    Utiliser la structure de tableau la plus simple possible

    +

    Il peut être difficile de faire en sorte que des tableaux soient accessibles et faciles à lire sur des appareils mobiles ou avec un lecteur d'écran.

    +

    Pour rendre l'information utile pour le plus vaste public possible :

      -
    • turn a complex table into one or more simple tables
      • -
    • convert a table to a list if the data is simple
      • +
    • divisez un tableau complexe en un ou plusieurs tableaux simples;
      • +
    • convertissez un tableau en texte sous forme de liste d'éléments si les données sont simples.
    -
    Before: complex table
    -

    The following table is complex and poorly designed. It would be difficult for someone using a screen reader or a mobile device to access and understand the information.

    -
    Example of a complex table
    +
    Avant : tableau complexe
    +

    Le tableau qui suit est complexe et mal conçu. Il serait difficile d'y accéder et d'en comprendre l'information à l'aide d'un lecteur d'écran ou d'un appareil mobile.

    +
    Exemple de tableau complexe
    - - + + - - - - - - - - - - + + + + + + + + + + - + - + - + - + - + - - - + + +
    - National Hockey League Stanley Cup Canadian winning teams (1927–2013) + Équipes canadiennes de la Ligue nationale de hockey gagnantes de la Coupe Stanley (1927-2013)
    Eastern ConferenceWestern ConferenceAssociation de l'EstAssociation de l'Ouest
    TeamWinsTeamWinsTeamWinsTeamWinsTeamWinsÉquipeParties gagnéesÉquipeParties gagnéesÉquipeParties gagnéesÉquipeParties gagnéesÉquipeParties gagnées
    Montréal CanadiensCanadiens de Montréal 22Toronto Maple LeafsMaple Leafs de Toronto 11Ottawa SenatorsSénateurs d'Ottawa 1Edmonton OilersOilers d'Edmonton 5Calgary FlamesFlames de Calgary 1

    Source : nhl.com

    Source : nhl.com
    -
    After: simple tables
    -

    The complex table easily converts into simple tables.

    -
    Example: one simple table
    +
    Après : tableaux simples
    +

    Le tableau complexe peut être facilement divisé en tableaux simples.

    +
    Exemple : un tableau simple
    - - - + + + - - + + - - + + - - + + - - + + - - + + - +
    - National Hockey League Stanley Cup Canadian winning teams (1927 to 2013) + Tableau 1 : Équipes canadiennes de la Ligue nationale de hockey gagnantes de la Coupe Stanley (de 1927 à 2013)
    TeamConference Wins ÉquipeAssociationParties gagnées
    Montreal CanadiensEastern Canadiens de MontréalEst 22
    Toronto Maple LeafsEastern Maple Leafs de TorontoEst 11
    Edmonton OilersWestern Oilers d'EdmontonOuest 5
    Calgary FlamesWestern Flames de CalgaryOuest 1
    Ottawa SenatorsEasternSénateurs d'OttawaEst 1

    Source : nhl.com

    Source : nhl.com
    -

    If it's important to highlight Stanley Cup championships by NHL conference (region), present the information using 2 simpler tables, and use table titles to clarify which conference the teams represent.

    -
    Example: multiple simple tables
    +

    S'il importe de mettre en relief les champions de la Coupe Stanley par association (région) de la Ligue nationale de hockey, présentez les renseignements à l'aide de 2 tableaux simples et utilisez des titres de tableau pour préciser l'association à laquelle les équipes appartiennent.

    +
    Exemple : plusieurs tableaux simples
    - - + + - + - + - + - +
    - Table 1: Eastern conference: National Hockey League Stanley Cup Canadian winning teams (1927 to 2013) + Tableau 1 : Équipes canadiennes de l'association de l'Est de la Ligue nationale de hockey gagnantes de la Coupe Stanley (de 1927 à 2013)
    Team Wins ÉquipeParties gagnées
    Montreal CanadiensCanadiens de Montréal 22
    Toronto Maple LeafsMaple Leafs de Toronto 11
    Ottawa SenatorsSénateurs d'Ottawa 1

    Source : nhl.com

    Source : nhl.com
    - - + + - + - + - +
    - Table 2: Western conference: National Hockey League Stanley Cup Canadian winning teams (1927 to 2013) + Tableau 2 : Équipes canadiennes de l'association de l'Ouest de la Ligue nationale de hockey gagnantes de la Coupe Stanley (de 1927 à 2013)
    Team WinsÉquipeParties gagnées
    Edmonton OilersOilers d'Edmonton 5
    Calgary FlamesFlames de Calgary 1

    Source : nhl.com

    Source : nhl.com
    -

    The complex table also easily converts into 2 lists.

    -
    Example: convert tables to text
    -

    Eastern conference National Hockey League:

    -

    The Stanley Cup Canadian winning teams from 1927 to 2013

    +

    Le tableau complexe peut aussi être facilement converti en 2 listes d'éléments.

    +
    Exemple: conversion de tableaux en texte
    +

    Association de l'Est de la Ligue nationale de hockey

    +

    Équipes canadiennes gagnantes de la Coupe Stanley de 1927 à 2013 :

      -
    • Montreal Canadiens: 22
      • -
    • Toronto Maple Leafs: 11
      • -
    • Ottawa Senators: 1
      • +
    • Canadiens de Montréal : 22
      • +
    • Maple Leafs de Toronto : 11
      • +
    • Sénateurs d'Ottawa : 1
    -

    Western conference National Hockey League:

    -

    The Stanley Cup Canadian winning teams from 1927 to 2013

    +

    Association de l'Ouest de la Ligue nationale de hockey

    +

    Équipes canadiennes gagnantes de la Coupe Stanley de 1927 à 2013 :

      -
    • Edmonton Oilers: 5
      • -
    • Calgary Flames: 1
      • +
    • Oilers d'Edmonton : 5
      • +
    • Flames de Calgary : 1
    -

    Limit the use of texture and colour

    -

    Avoid formatting cells with textures or colours, because it can make text difficult to read.

    -

    If you must use textures and colours in a table, explain what they mean (for example, in a table note or in a legend). Make sure you comply with the minimum colour contrast rules (1.4.3) from the Web Content Accessibility Guidelines (WCAG) 2.0.

    -

    Never rely on colour or texture alone to convey important information.

    +

    Éviter les cellules texturées ou colorées

    +

    Évitez de mettre de la texture ou des couleurs dans les cellules.

    +

    Si vous devez utiliser des textures et des couleurs dans un tableau, expliquez ce qu'elles signifient (par exemple, dans les notes du tableau ou dans une légende). Conformez-vous aux règles de rapport minimum de contraste des couleurs (1.4.3) des Règles pour l'accessibilité des contenus Web 2.0.

    +

    Ne vous fiez jamais uniquement à la couleur ou à la texture pour présenter des renseignements importants.

    -

    Avoid having blank cells

    -

    Assistive technologies like a screen reader will notify the person if the cell is blank. If a cell has no value, explain why in your table's:

    +

    Éviter les cellules vides

    +

    Si la cellule est vide, les outils d'aide, tels que les lecteurs d'écrans, en informent les utilisateurs. Si une cellule de tableau n'a aucune valeur, expliquez pourquoi dans :

      -
    • notes
      • -
    • legend
      • -
    • caption
      • -
    • surrounding content
      • +
    • une note en bas du tableau;
      • +
    • une légende;
      • +
    • un sous-titre;
      • +
    • le contenu qui accompagne le tableau.
    -

    You may also write one of the following in the cell, as long as it's clear and doesn't create visual noise that would distract your audience:

    +

    Si cela est plus clair et ne risque pas d'occasionner de « pollution visuelle » pouvant distraire les gens, vous pouvez ajouter le texte suivant dans la cellule :

      -
    • "no data"
      • -
    • "0" (zero)
      • -
    • "n/a" (not applicable)
      • +
    • « aucune donnée disponible »;
      • +
    • « 0 » (zéro);
      • +
    • « s/o » (sans objet).
    -

    See how the rule for using tables to organize data applies in French

    - -
    -
    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    -

    6.0 Images and videos

    +

    6.0 Images et vidéos

    -

    In this section

    +

    Dans cette section

    -

    You can use images and videos to:

    -
      -
    • enhance key messages
      • -
    • help people complete their task
      • -
    • make complicated information easier to understand
      • -
    • reflect Canada's diverse population as much as possible (including seniors, youth, Indigenous peoples, and people from a wide variety of ethnic origins)
      • -
    -

    When planning your content, weigh the benefits of using videos with the impact on people who will try to view them using mobile devices. Data plans and reliable network access vary.

    -

    Obtain permission to publish

    -

    Make sure that you have the appropriate permissions to publish images, audio files and videos online. You'll need to have the written proof of those rights. Refer to the Procedures for Publishing or contact your institution's authoring team for more details.

    -

    Help with images, audio files or videos on Canada.ca

    -

    For specific information about consent forms or licensing requirements related to Canada.ca, contact the Principal Publisher: na-web_support-soutien_du_web-gd@servicecanada.gc.ca.

    +

    Vous pouvez utiliser des images et des vidéos pour :

    +
      +
    • renforcer les messages clés;
      • +
    • aider les gens à accomplir leur tâche;
      • +
    • faciliter la compréhension de l'information complexe;
      • +
    • refléter le plus possible la population diversifiée du Canada (dont les personnes âgées, les jeunes, les peuples autochtones et les personnes de diverses origines ethniques).
      • +
    +

    Lorsque vous planifiez votre contenu, évaluez les avantages d'inclure des vidéos et leur incidence sur les gens qui tenteront de les visionner avec des appareils mobiles. Leur capacité à accéder à ces fichiers peut varier en fonction de leur service de données mobiles ou de leur réseau.

    +

    Obtenir la permission de publier

    +

    Assurez-vous que vous possédez les droits appropriés pour publier des images, des fichiers audio et des vidéos sur Canada.ca. Vous devrez avoir la preuve écrite que vous avez obtenu ces droits. Reportez-vous aux Procédures sur l'édition ou communiquez avec l'équipe d'édition de votre institution pour plus de détails.

    +

    Obtenir de l'aide concernant les images, les fichiers audio ou les vidéos sur le site Canada.ca

    +

    Si vous avez des questions précises concernant les exigences en matière de licence ou les formulaires de consentement liés à Canada.ca, contactez l'éditeur principal : na-web_support-soutien_du_web-gd@servicecanada.gc.ca.

    -

    6.1 Understand the purpose of images online

    -

    Images can distract people. They can also make the page take longer to load. Make sure your images add value to your content.

    -

    There are 2 main types of images:

    +

    6.1 Comprendre le but des images sur le Web

    +

    Les images peuvent distraire les gens. Elles peuvent aussi augmenter la durée de chargement de la page. Assurez-vous que vos images ajoutent une valeur réelle à votre contenu.

    +

    Il y a 2 principales catégories d'images:

      -
    • functional images
      • -
    • decorative images
      • +
    • fonctionnelles
      • +
    • décoratives
    -

    Functional images

    -

    Functional images:

    +

    Images fonctionnelles

    +

    Les images fonctionnelles :

      -
    • illustrate information or data to help people understand it
      • -
    • explain a complex concept
      • -
    • illustrate concrete things (such as a valid passport, species at risk, standard symbols)
      • -
    • convey branding (such as approved logos and campaign graphics)
      • +
    • illustrent de l'information ou des données pour aider les gens à les comprendre;
      • +
    • expliquent un concept complexe;
      • +
    • illustrent des objets concrets (par exemple, un passeport valide, des espèces vulnérables, des symboles types);
      • +
    • véhiculent une marque distinctive (par exemple, des logos approuvés et les éléments graphiques d'une campagne).
    -

    Functional images add value to the content because they provide more information than can be provided through text alone. Examples of functional images:

    +

    Les images fonctionnelles ajoutent de la valeur au contenu étant donné qu'elles communiquent l'information avec plus d'efficacité que le texte seul. Voici quelques types d'images fonctionnelles :

      -
    • infographics
      • -
    • charts
      • -
    • graphs
      • +
    • éléments infographiques
      • +
    • tableaux
      • +
    • graphiques
    -

    Include the appropriate alternative text to describe the image for people who are unable to view it.

    -
    Example of functional images
    +

    Ajoutez un texte alternatif approprié pour décrire l'image pour les personnes qui ne peuvent la voir.

    +
    Exemples d'images fonctionnelles
    Figure 4
    - Map of Canada: current conditions + Map of Canada: current conditions
    - Figure 4 - Text version + Figure 4 - Version textuelle - + - - - + + + - - - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + +
    CityConditionTemperatureVille Condition Température
    CalgaryMainly sunny0°CCalgary Généralement ensoleillé 12°C
    CharlottetownDrifting snow-11°CCharlottetown Généralement ensoleillé -8°C
    Edmonton(no data)0°CEdmonton (sans objet) 1°C
    FrederictonSunny-12°CFredericton Ensoleillé -9°C
    HalifaxMainly sunny-7°CHalifax Généralement ensoleillé -6°C
    IqaluitDrifting snow-22°CIqaluit Poudrerie basse -22°C
    MontréalSunny-16°CMontréal Ensoleillé -13°C
    Ottawa (Kanata - Orléans)Mainly sunny-15°COttawa Généralement ensoleillé -12°C
    Prince GeorgePartly cloudy2°CPrince George Généralement nuageux 3°C
    QuébecPartly cloudy-19°CQuébec Partiellement nuageux -16°C
    ReginaCloudy-4°CRegina Nuageux 0°C
    SaskatoonMist-8°CSaskatoon Généralement nuageux -5°C
    St. John'sMist2°CSt. John's Nuageux 4°C
    Thunder BayPartly cloudy-14°CThunder Bay Partiellement nuageux -3°C
    TorontoLight snow-6°CToronto Généralement nuageux -4°C
    VancouverMostly cloudy9°CVancouver Pluie 9°C
    VictoriaLight rain8°CVictoria Généralement nuageux 10°C
    WhitehorsePartly cloudy-19°CWhitehorse Partiellement nuageux -14°C
    WinnipegSunny-18°CWinnipeg Ensoleillé -11°C
    YellowknifeMainly sunny-28°CYellowknife Partiellement nuageux -22°C
    -
    Figure 5
    - Bar chart for number of pages by main purpose and audience +
    Figure 5
    + Nombre de page par objectif principal et par audience
    - Figure 5 - Text version + Figure 5 - Version textuelle - + - - - - - - - + + + + + + + - - - + @@ -1925,7 +1812,7 @@ title: "Canada.ca Content Style Guide" - + @@ -1934,7 +1821,7 @@ title: "Canada.ca Content Style Guide" - + @@ -1943,7 +1830,7 @@ title: "Canada.ca Content Style Guide" - + @@ -1952,7 +1839,7 @@ title: "Canada.ca Content Style Guide" - + @@ -1966,401 +1853,383 @@ title: "Canada.ca Content Style Guide"
    -

    Decorative images

    -

    Use decorative images only to provide visual context for the following templates:

    +

    Images décoratives

    +

    Utilisez des images décoratives uniquement pour fournir un contexte visuel pour les modèles de page suivants :

      -
    • a theme or topic page
      • -
    • the home page
      • -
    • campaign pages
      • -
    • promotional features on a topic page or home page (Government of Canada activities and initiatives)
      • +
    • page de thème ou de sujet;
      • +
    • page d'accueil;
      • +
    • pages d'une campagne publicitaire;
      • +
    • vignette promotionnelle d'une page de sujet ou de la page d'accueil (Activités et initiatives du gouvernement du Canada).
    -

    Don't place meaningful text, such as campaign or program titles, in decorative images.

    -

    Include the appropriate alternative text to describe the image for people who are unable to view it.

    -

    Get details about the templates above in the Canada.ca Content and Information Architecture Specification.

    -
    Example of a decorative image
    -

    A Royal Canadian Mounted Police officer on the Canada.ca web page related to jobs and the workplace.

    -

    Description of the image

    -

    A Royal Canadian Mounted Police officer on the Canada.ca web page related to jobs and the workplace.

    +

    N'insérez pas de texte important, comme des titres de campagne ou de programme, dans des images décoratives.

    +

    Ajoutez un texte alternatif pour décrire l'image pour les personnes qui ne peuvent la voir.

    +

    Vous trouverez plus de détails au sujet des modèles de page ci-dessus dans les Spécifications du contenu et de l'architecture de l'information pour Canada.ca..

    +
    Exemple d'une image décorative
    +

    Une membre de la Gendarmerie royale du Canada sur la page Web de Canada.ca axée sur les emplois et le milieu de travail.

    +

    Description de l'image

    +

    Une membre de la Gendarmerie royale du Canada sur la page Web de Canada.ca axée sur les emplois et le milieu de travail.

    -

    Image sizing and placement

    -

    Learn where to place images and videos on Canada.ca and what size they should be:

    +

    Taille et positionnement des images

    +

    Pour savoir où placer les images et les vidéos dans Canada.ca et quelle devrait être leur taille :

    -

    See how the rule for using images applies in French

    - -
    -
    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    -

    6.2 Include alternative text for images

    -

    Alternative text (or alt text) is text that describes an image. It makes it possible for people using assistive technologies to access the information conveyed by an image. It also helps search engines better understand the purpose of the image.

    -

    When you're writing alternative text for a functional image:

    -
      -
    • describe the image as if you were describing it to someone over the phone
      • -
    • use as few words as possible
      • -
    • limit the text to around 140 characters (including spaces)
      • -
    • use the text that is embedded in the image only if it provides enough context; otherwise, write different text that includes more information
      • -
    • use the null indicator as the alternative text (alt="") if the image doesn't provide any more information than what is already provided in the text on the page
      • -
    • don't use "image of..." or "graphic of..." to describe the image; screen readers do this already
      • -
    -

    Decorative images don't require additional information to make them accessible or visible to search engines. Use the null indicator as the alternative text (alt="").

    -

    See how the rule for alternative text for images applies in French

    - -
    -
    +

    6.2 Ajouter un texte alternatif aux images

    +

    Un texte alternatif (ou texte de remplacement ou texte Alt) est de l'information qui décrit une image. Il lui donne un sens lorsqu'une personne utilise des technologies d'aide pour l'interpréter. Il permet aussi aux moteurs de recherche de mieux déchiffrer l'intention des fichiers d'image.

    +

    Pour rédiger un texte alternatif pour des images fonctionnelles :

    +
      +
    • décrivez l'image comme si vous la décriviez à quelqu'un au téléphone;
      • +
    • utilisez le moins de mots possible;
      • +
    • tentez de limiter le texte à moins de 170 caractères (y compris les espaces);
      • +
    • utilisez le texte qui figure sur une image fonctionnelle comme texte alternatif seulement s'il fournit suffisamment de contexte, ou rédigez un autre texte en incluant plus d'information;
      • +
    • utilisez l'indicateur vide (alt="") comme texte alternatif si l'image ne donne pas davantage de renseignements que ce que fournit déjà le texte avoisinant;
      • +
    • ne décrivez pas une image ou un graphique par le même mot (par exemple, « image du... » ou « graphique des... »), car les lecteurs d'écran le font déjà.
      • +
    +

    Les images décoratives n'exigent pas de renseignements supplémentaires pour les rendre accessibles ou visibles aux moteurs de recherche. Utilisez l'indicateur vide (alt="") en guise de texte alternatif.

    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    -

    6.3 Include long descriptions for complex images

    -

    Long descriptions explain information that is presented in complex infographics or images. You must provide a long description if you can't describe the content and function of the image in less than 140 characters. If you can describe the image in less than 140 characters, use alternative text instead.

    -

    If a detailed and equivalent explanation of the image appears in the text immediately before or after a complex image, you don't have to provide a long description.

    -

    If you provide a long description for an image, you must also provide alternative text for the long description.

    -

    Figure 1 illustrates a number of concepts. It requires a long description.

    -

    Example: Long description for the balanced scorecard

    +

    6.3 Ajouter une description longue pour expliquer les images complexes

    +

    Les descriptions longues expliquent l'information qui est présentée dans un élément infographique ou une image complexe. Vous devez fournir une description longue s'il est impossible de décrire le contenu et la fonction de l'image en moins de 170 caractères. S'il est possible de décrire l'image en moins 170 caractères, fournissez un texte alternatif.

    +

    Si une explication détaillée d'une image complexe figure dans le texte qui précède ou qui suit immédiatement l'image, il n'est pas nécessaire de fournir une description longue.

    +

    Si vous fournissez une description longue pour une image, vous devez aussi fournir un texte alternatif qui renvoie à la description longue.

    +

    La figure 1 illustre un certain nombre de concepts. Elle nécessite une description longue.

    +

    Exemple : Description longue pour le tableau de bord

    -
    Figure 1: using a balanced scorecard approach to monitor key performance indicators
    - A balanced scorecard showing how business activities align with an organization's vision and strategy to monitor key performance indicators. Text version below. -
    Alternative text
    -

    You could write the following alternative text for the image shown in Figure 1:

    -

    A balanced scorecard showing how business activities align with an organization's vision and strategy to monitor key performance indicators. Text version below.

    -
    Long description
    -

    You could write the following long description for the image shown in Figure 1:

    -

    A balanced scorecard is a strategic planning and management system used worldwide to align business activities with an organization's vision and strategy.

    -

    Business activities are grouped into 4 perspectives, all of which are interdependent and come from the vision and strategy. These are learning and growth, internal business processes, financial, and customer. Each has a question associated with it.

    +
    Figure 1 : Utilisation d'un tableau de bord symétrique pour surveiller les principaux indicateurs de rendement
    + Figure 1 : Utilisation d'un tableau de bord symétrique pour surveiller les principaux indicateurs de rendement +
    Texte alternatif
    +

    Vous pourriez écrire le texte alternatif suivant pour décrire l'image présentée à la figure 1 :

    +

    Tableau de bord illustrant comment les activités opérationnelles s'associent à la vision et à la stratégie de l'organisation pour surveiller les indicateurs de rendement. La version textuelle suit.

    +
    Description longue
    +

    Vous pourriez écrire la description longue suivante pour décrire l'image présentée à la figure 1 :

    +

    Un tableau de bord équilibré est un outil de planification stratégique et de gestion utilisé partout dans le monde pour harmoniser les activités opérationnelles avec la vision et la stratégie d'une organisation.

    +

    Les activités opérationnelles sont regroupées dans 4 catégories, toutes interdépendantes, qui découlent de la vision et de la stratégie. Les catégories sont : l'apprentissage et la croissance, les processus opérationnels internes, la clientèle et les finances. Chacune est associée à une question.

      -
    • Learning and growth
      • +
    • Apprentissage et croissance
    -

    To achieve our vision, how will we sustain our ability to change and improve?

    +

    Pour concrétiser notre vision, comment devons-nous conserver notre capacité à changer et à nous améliorer?

      -
    • Internal business processes
      • +
    • Processus opérationnels internes
    -

    To satisfy our shareholders and customers, what business processes must we excel at?

    +

    Pour satisfaire nos actionnaires et nos clients, quels processus opérationnels devons-nous maîtriser à la perfection?

      -
    • Financial
      • +
    • Finances
    -

    To succeed financially, how should we appear to our shareholders?

    +

    Pour prospérer, quelle image devons-nous projeter à nos actionnaires?

      -
    • Customer
      • +
    • Clientèle
    -

    To achieve our vision, how should we appear to our customers?

    -

    Each perspective can be monitored using the following 4 components:

    +

    Pour concrétiser notre vision, quelle image devons-nous projeter à nos clients?

    +

    Chaque catégorie peut être évaluée à l'aide des 4 éléments suivants :

      -
    • objectives
      • +
    • objectifs
    • messages
      • -
    • targets
      • +
    • buts
    • initiatives
    -

    Figure 2 is a bar chart. The information in it came from a data table. You could therefore use the table as the long description for this image.

    -

    Example: Long description for the bar chart illustrating the proportion of men and women in the public service for selected years from 1983 to 2010

    +

    La figure 2 est un graphique à barres qui représente les données contenues dans le tableau de données. Vous pourriez donc utiliser le tableau comme description longue pour accompagner cette image.

    +

    Exemple : Description longue pour le graphique à barres illustrant le rapport hommes-femmes au sein de la fonction publique pour les années sélectionnées, entre 1983 et 2010

    -
    Figure 2: proportion of men and women in the public service for selected years from 1983 to 2010
    - Comparison of the ratio of women and men in the civil service between 1983 and 2010. Text version below. -

    Source: Office of the Chief Human Resources Officer, Treasury Board of Canada Secretariat
    - Note: Includes all tenures. Figures do not include employees on leave without pay.

    -
    Alternative text
    -

    You could write the following alternative text:

    -

    Comparison of the ratio of women and men in the civil service between 1983 and 2010. Text version below.

    -
    Long description
    -

    You could write the following long description text:

    +
    Figure 2: Rapport hommes-femmes au sein de la fonction publique pour les années sélectionnées, entre 1983 et 2010
    + Rapport hommes-femmes au sein de la fonction publique pour les années sélectionnées, entre 1983 et 2010 +

    Source : Bureau du dirigeant principal des ressources humaines, Secrétariat du Conseil du Trésor du Canada
    + Remarque : Comprend tous les types de postes. Les chiffres ne tiennent pas compte des employés en congé non payé.

    +
    Texte alternatif
    +

    Vous pourriez écrire le texte alternatif suivant :

    +

    Comparaison entre la proportion d'hommes et de femmes dans la fonction publique entre 1983 et 2010. La version textuelle suit.

    +
    Description longue
    +

    Vous pourriez écrire la description longue suivante :

    EducationTaskNavigationSupportInformationCorporate ÉducativeTâchesNavigationSoutienInformationEntreprise
    GeneralGénéral 2 0 2050
    StudentsÉtudiants 2 2 10
    BusinessEntreprises 60 10 208
    ProfessionalProfessionnels 46 26 5142
    LawyerAvocats 0 2 4
    - - - - - - - - + + + + + + + + - - - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - + + + + +
    - Figure 2: proportion of men and women in the public service for selected years 1983 to 2010 + Figure 2: Rapport hommes-femmes au sein de la fonction publique pour les années sélectionnées, entre 1983 et 2010
    Gender (by percentage)1983198819931998200320082010Sexe (en pourcentage) 1983198819931998200320082010
    Men58.255.752.949.646.745.144.8Hommes58,255,752,949,646,745,144,8
    Women41.844.347.150.453.354.955.2Femmes41,844,347,150,453,354,955,2

    Source: Office of the Chief Human Resources Officer, Treasury Board of Canada Secretariat
    - Note: Includes all tenures. Figures do not include employees on leave without pay.

    Source : Bureau du dirigeant principal des ressources humaines, Secrétariat du Conseil du Trésor du Canada
    + Remarque : Comprend tous les types de postes. Les chiffres ne tiennent pas compte des employés en congé sans solde.
    -

    Work with your web team to determine the best way to include the long description information. They'll guide you on how to make sure the image is accessible to people using assistive technology. They'll also ensure that your image meets the Canada.ca Content and Information Architecture Specification.

    -

    See how the rule for long descriptions applies in French

    - -
    -
    +

    Collaborez avec votre équipe Web pour déterminer la meilleure façon d'insérer la description longue. Elle vous conseillera sur la façon de s'assurer que l'information contenue dans l'image est accessible aux personnes qui utilisent les technologies d'aide. Votre équipe Web s'assurera également que l'image respecte les Spécifications du contenu et de l'architecture de l'information pour Canada.ca.

    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    -

    6.4 Include transcripts to describe audio and video files

    -

    A transcript is the text equivalent of an audio or video file. They make it easier for people who need to access information in audio or visual media but can't hear or see the content because:

    -
      -
    • they have a disability
      • -
    • don't have equipment such as speakers or headphones
      • -
    • don't want to download a large file
      • -
    -

    Make sure the transcript describes all pre-recorded information and action, including:

    +

    6.4 Ajouter une transcription pour décrire les fichiers audio et vidéo

    +

    Une transcription est le texte qui décrit un fichier audio ou vidéo. Les transcriptions facilitent l'accès à l'information contenue dans des fichiers multimédias audio ou visuels pour les personnes qui ne peuvent entendre ou voir le contenu en raison :

      -
    • on-screen text
      • -
    • dialogue and narration
      • -
    • important sounds (such as an explosion)
      • -
    • important action (for example, people running away from an explosion or characters wearing disguises)
      • +
    • d'un handicap;
      • +
    • d'un manque d'équipement comme des haut-parleurs ou des écouteurs;
      • +
    • de leur décision de ne pas télécharger un gros fichier vidéo.
    -

    See how the rule for transcripts applies in French

    +

    Assurez-vous que la transcription de texte décrit tout le contenu préenregistré (information et action), y compris :

    -
    -
    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    -

    7.0 Links

    +

    7.0 Liens

    -

    In this section

    +

    Dans cette section

    -

    A link (or hyperlink) is a word, phrase or image on a web page that people click on to move to another part of the same content or to access an entirely different web resource (such as a web page, video or downloadable file).

    -

    People who use assistive technology can navigate web content using links. For example, screen readers list all links on a page without the contextual content.

    -

    Your links should be descriptive and able to stand alone so that it's clear what people can expect if they click on them.

    +

    Un lien (ou hyperlien) est un mot, une phrase ou une image d'une page Web sur lequel la personne peut cliquer pour accéder à une autre partie du contenu de la page ou à une autre ressource Web (c'est-à-dire une page Web, une vidéo ou un fichier téléchargeable).

    +

    Les personnes qui utilisent les technologies d'aide peuvent naviguer dans le contenu Web à l'aide de liens. Par exemple, les lecteurs d'écran énumèrent tous les liens d'une page sans afficher le contenu contextuel.

    +

    Vos liens doivent être descriptifs et conserver leur sens, même hors contexte, de façon à indiquer à quoi les gens peuvent s'attendre lorsqu'ils les sélectionnent.

    -

    7.1 Use links strategically

    -

    Be strategic about how you place and create links on a web page and about how many links you provide:

    +

    7.1 Utiliser les liens de façon stratégique

    +

    Réfléchissez bien à la façon de créer vos liens. Choisissez stratégiquement la façon de présenter les liens dans une page Web ainsi que le nombre de liens :

      -
    • include links that directly support the topic or task on the current page
      • -
    • link to the original information posted by the authoritative source
      • -
    • don't include links to intranet sites unless the content targets government employees, in which case you should add "(accessible only on the Government of Canada network)"
      • -
    • don't bury links that are crucial to completing a task in the middle of a paragraph or at the bottom of the page
      • +
    • ajoutez des liens qui appuient directement le sujet ou la tâche de la page en question;
      • +
    • fournissez des liens menant au à l'information d'origine publiée par la source faisant autorité;
      • +
    • n'incluez pas de liens vers des sites intranet sauf si le contenu est destiné à des employés fédéraux, auquel cas il faudra ajouter la mention « (accessible uniquement sur le réseau du gouvernement du Canada) »;
      • +
    • ne mettez pas de liens essentiels à la tâche au milieu d'un paragraphe ou au bas d'une page.
    -

    Example of appropriate use of links

    -
    Write:
    -

    A Food Guide serving is how much food you should eat from each of the 4 food groups every day. In some cases, a serving is the amount of a given food group that you normally eat in one sitting, like an apple. In other cases, the daily amount is more than one serving, such as for rice or pasta.

    -

    Number of daily food servings for children, teens and adults

    -
    Instead of:
    -

    A Food Guide Serving is simply a reference amount. It helps you understand how much food is recommended every day from each of the four food groups. In some cases, a Food Guide Serving may be close to what you eat, such as an apple. In other cases, such as rice or pasta, you may serve yourself more than one Food Guide Serving.

    +

    Exemple d'une utilisation appropriée des hyperliens

    +
    Écrivez :
    +

    Une portion selon le Guide alimentaire est la quantité d'aliments de chacun des 4 groupes que l'on devrait manger chaque jour. Dans certains cas, une portion correspond à un aliment que l'on mange habituellement en une seule fois, comme une pomme. Dans d'autres, la quantité quotidienne correspond à plus d'une portion, comme pour du riz ou des pâtes.

    +

    Nombre de portions quotidiennes pour les enfants, les adolescents et les adultes

    +
    Au lieu de :
    +

    Une portion du Guide alimentaire est tout simplement une à titre de référence qui vous aide à comprendre la quantité d'aliments recommandée chaque jour dans chacun des groupes alimentaires. Dans certains cas, une portion du Guide alimentaire peut se rapprocher de ce que vous mangez, comme une pomme. Dans d'autres cas, comme lorsqu'il s'agit de riz ou de pâtes alimentaires, vous vous servez peut-être plus d'une portion du Guide alimentaire à la fois.

    +
    +

    Choisir le contenu connexe avec soin

    +

    Ajouter des liens vers d'autres pages Web pertinentes peut aider les gens à trouver rapidement des renseignements utiles. Les liens qui mènent à vos pages à partir d'autres pages Web peuvent aussi améliorer le classement de vos pages dans la liste des résultats générée par les moteurs de recherche.

    +

    Choisissez avec soin les liens connexes. Trop de liens dans une page Web pourraient inciter les gens à quitter la page sans avoir lu l'information importante ou les dissuader d'exécuter une tâche.

    +
    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    +
    -
    -

    Carefully select related content

    -

    Providing links to other relevant web pages can help people find related information quickly. Links to your pages from other pages may also help improve where your page ranks in search results.

    -

    Be sure to select related links carefully. Too many links on a page can cause people to leave the page without reading important information or can discourage them from completing a task.

    +
    +

    7.2 Rédiger des liens descriptifs

    +

    Le texte du lien doit décrire clairement le contenu auquel le lien donne accès. Il est plus facile pour une personne d'accomplir une tâche lorsque le contenu auquel renvoie le lien correspond à ce qu'elle s'attend à y trouver. Assurez-vous que le texte est assez descriptif pour indiquer vers quel contenu le lien permettra d'accéder.

    +

    Il n'est pas nécessaire que le texte du lien soit identique au titre de la page de destination pour se conformer aux Règles pour l'accessibilité des contenus Web. Il suffit que les principaux mots-clés du lien correspondent au titre de la page afin d'indiquer à la personne qu'elle est au bon endroit.

    +

    Pour rédiger des liens descriptifs et utiles :

    +
      +
    • utilisez les premiers mots du titre de la page de destination ou son titre complet s'il est assez descriptif;
      • +
    • commencez par des mots-clés qui décrivent bien la page de destination si le titre de page ne suffit pas;
      • +
    • utilisez un texte descriptif différent pour chaque lien se trouvant sur une même page;
      • +
    • utilisez un texte identique lorsque plusieurs liens sur une page Web renvoient à la même page de destination;
      • +
    • indiquez si le contenu doit être téléchargé et décrivez ce contenu;
      • +
    • écrivez les adresses de courriel au long, en hyperlien, avec des lettres minuscules (envoyez un courriel à questions@canada.ca)
      • +
    +

    N'utilisez pas :

    +
      +
    • le même texte pour des liens qui mènent à 2 pages différentes;
      • +
    • d'expressions vagues comme « cliquez ici » ou « pour en savoir plus »;
      • +
    • de message promotionnel qui risque d'être déroutant pour quelqu'un qui tente de décider s'il naviguera jusqu'à la page.
      • +
    +
    +

    Mettre l'accent sur la tâche

    +

    Lorsque vous rédigez des instructions sur la façon d'exécuter une tâche, vous devez parfois insérer un lien pour diriger la personne vers les formulaires ou d'autres documents. Créez ce lien en mettant l'accent sur l'action qu'elle doit accomplir.

    +

    Ne répétez pas le titre d'un formulaire ou d'un document dans les étapes à suivre si ce titre n'est pas assez descriptif.

    +

    Exemple de la façon d'utiliser des hyperliens en mettant l'accent sur la tâche

    +
    Écrivez :
    +

    Pour obtenir le taux maximal de prestations d'assurance-emploi auquel vous avez droit :

    + +
    Au lieu de :
    +

    Pour obtenir le taux maximal de prestations d'assurance-emploi auquel vous avez droit, remplissez le formulaire Attestation du prestataire – Semaines durant lesquelles la rémunération assurable était la plus élevée (Meilleures semaines variables). Inscrivez-y les renseignements requis concernant les semaines durant lesquelles vos revenus assurables étaient les plus élevés durant vos 52 dernières semaines d'emploi ou depuis le début de votre dernière demande, selon la plus courte période des deux.

    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    +
    +
    -

    See how the rule for using links strategically applies in French

    - -
    -
    -
    -
    -
    -

    7.2 Write descriptive links

    -

    A link must describe the content a person will find once they click on it. It's easier to complete a task when a link's destination matches a person's expectations. Make sure links are descriptive so that person will understand what they'll get when they click on them.

    -

    The text you hyperlink doesn't have to match the title of the destination page to be compliant with Web Content Accessibility Guidelines. Text in a link gets some context from the web page's content. Make sure the main keywords of the link text correspond to the page title so that people know they're in the right place.

    -

    Tips for providing useful links:

    -
      -
    • use the first words of the target page or its entire title if it's descriptive enough
      • -
    • start with keywords that accurately describe the target page if the page title isn't enough
      • -
    • make sure that all links on the same page use unique descriptive text if they link to different target pages
      • -
    • when more than one link on a web page links to the same destination page, use the same words for the hyperlink
      • -
    • describe any content that must be downloaded
      • -
    • write email addresses in full, in lower case and as active links (contact helpdesk@canada.ca)
      • -
    -

    Don't use:

    -
      -
    • the same link text to point to 2 different pages
      • -
    • vague statements such as "click here" or "read more"
      • -
    • promotional messaging that might confuse someone who is deciding whether to go to the page that is being linked to
      • -
    -
    -

    Focus on the task

    -

    When writing instructions for completing a task, sometimes you need to insert a link to guide the person to forms or other documents. Focus on the action they must perform when you create the link.

    -

    Don't repeat the name of a form or document in the steps to accomplish a task if the name isn't descriptive.

    -

    Example of the use of links that focus on the task

    -
    Write:
    -

    To get the highest Employment Insurance amount available to you:

    -
      -
    1. open the form you need to declare your income
      2. -
    2. identify your highest weeks of insurable income in the shortest period below: -
        -
      • the last 52 weeks of employment
        • -
      • since the start of your last claim
        • -
      -
      3. -
    3. return the completed form in person to the Service Canada office closest to you
      4. -
    -
    Instead of:
    -

    To ensure that you are paid the maximum Employment Insurance (EI) benefit rate that you are entitled to, complete the Claimant Attestation - Highest Weeks of Insurable Earnings (Variable Best Weeks) form with the required information about your highest weeks of insurable earnings in the last 52 weeks of employment or since the start of your last claim, whichever is the shorter period of the two.

    +
    +

    7.3 Vérifier que les liens fonctionnent

    +

    Vérifiez vos liens pour vous assurer qu'ils fonctionnent. Assurez-vous aussi qu'ils dirigent les gens vers la bonne page, soit celle qui contient des renseignements à jour, dans la langue officielle voulue. Des liens qui fonctionnent mal exaspèrent les gens et compromettent la crédibilité de votre contenu.

    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    +
    +
    +
    +

    7.4 Créer des liens vers du contenu externe

    +

    Certains contenus pour lesquels le gouvernement ne fait pas autorité ne sont pas disponibles dans les 2 langues officielles. Si vous créez un lien vers du contenu Web externe qui n'est pas disponible dans la langue de la page courante, précisez la ou les langues dans lesquelles le contenu est disponible.

    +

    Sur les pages en français, ajoutez le texte suivant après un lien qui renvoie à du contenu qui n'est pas en français : (en XXXX seulement).

    +

    Si le lien renvoie à du contenu seulement disponible en :

    +
      +
    • anglais, écrivez «  (en anglais seulement) »;
      • +
    • inuktitut, écrivez « (en inuktitut seulement) »;
      • +
    • espagnol et portugais, écrivez « (en espagnol et portugais seulement) ».
      • +
    +

    Exemple de l'utilisation d'un hyperlien qui renvoie à un contenu disponible en anglais seulement

    +

    Écrivez : Informez-vous au sujet des documents requis pour permettre aux citoyens canadiens d'entrer aux États-Unis (en anglais seulement).

    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    +
    +
    +
    +

    7.5 Créer des liens vers du contenu interne

    +

    En général, le contenu destiné au public ne devrait pas contenir de liens renvoyant vers du contenu accessible seulement sur les serveurs internes du gouvernement. Il arrive cependant qu'un contenu accessible au public s'adresse essentiellement aux employés de la fonction publique.

    +

    Si vous créez un lien vers du contenu qui est disponible seulement sur les serveurs internes du gouvernement, écrivez « (accessible uniquement sur le réseau du gouvernement du Canada) ».

    +
    + +

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    +

    Diffusez cette règle par courriel

    +
    -

    See how the rule for writing descriptive links applies in French

    - -
    -
    -
    -
    -
    -

    7.3 Make sure that links work

    -

    Make sure that your links work. Check that they take people to the correct page, which contains up-to-date information, in the appropriate official language. Links that don't work frustrate people and hurt the credibility of your content.

    -

    See how the rule for verifying links applies in French

    - -
    -
    -
    -
    -
    -

    7.4 Linking to non-government content

    -

    Some non-government web content isn't available in both official languages. If you're linking to external web content that isn't available in the language of the current page, say in which language(s) it is available after the link.

    -

    On English pages, write the following after a link that leads to content that isn't available in English: "(XXXX only)".

    -

    If the link leads to content only available in:

    -
      -
    • French, write "(French only)"
      • -
    • Inuktitut, write "(Inuktitut only)"
      • -
    • Spanish and Portuguese, write "(Spanish and Portuguese only)"
      • -
    -

    Example of a link that leads to content only available in French

    -

    Write: Find out how to renew your French passport while abroad in Canada (French only).

    -

    See how the rule for non-government content applies in French

    - -
    -
    -
    -
    -
    -

    7.5 Linking to internal-to-government content

    -

    In most cases, public-facing content should not link to content that is accessible only through internal government networks. Occasionally, the audience for content that is accessible to the public may be primarily internal.

    -

    When a link leads to content available only on internal government networks, write "(accessible only on the Government of Canada network)."

    -

    See how the rule for internal-to-government contente applies in French

    - -
    -
    -
    -

    Web content makeovers

    -

    Case study A: improve plain language and content structure

    -

    Before

    -

    The Employment Insurance (EI) program offers temporary financial assistance to Canadians and individuals who are legally entitled to work in Canada, have a valid Social Insurance Number and remain in Canada during their benefit period. One type of benefits that the EI program offers is regular benefits. EI regular benefits are offered to people who have lost their employment through no fault of their own (for example, because of a shortage of work or because they were employed in seasonal work) and who are ready, willing, and capable of working each day but unable to find work.

    -

    Flesch-Kincaid reading level: 17.2

    -

    After

    -

    The Employment Insurance (EI) program could give you temporary financial help if you lost your job.

    -

    To qualify for regular benefits, you must:

    -
      -
    • be Canadian or legally able to work in Canada
      • -
    • have a valid social insurance number
      • -
    • have lost your job through no fault of your own
      • -
    • be ready, willing and able to work each day but still can't find work
      • -
    • stay in Canada while you're getting EI help
      • -
    -

    Flesch-Kincaidreading level: 5.9

    -

    What we did

    -

    To improve this content, we:

    -
      -
    • created a list out of the items in the text 
      • -
    • replaced complex nouns with verbs and complex verbs with simpler forms
      • -
    -

    Case study B: improve and simplify tables

    -

    Before

    +

    Refonte de contenu Web

    +

    Étude de cas A : simplifier le langage et améliorer la structure du contenu

    +

    Avant

    +

    L'assurance-emploi est un programme qui offre un soutien de revenu temporaire aux Canadiens et aux personnes légalement autorisées à travailler au Canada qui ont un numéro d'assurance sociale valide et qui demeurent au Canada pendant la durée de leurs prestations. Le programme offre entre autres des prestations régulières aux personnes qui ont perdu leur emploi sans en être responsables (par exemple, à la suite d'un manque de travail ou parce qu'elles occupaient un emploi saisonnier) et qui sont prêtes et disposées à travailler et capables de le faire en tout temps, sans pouvoir trouver du travail.

    +

    Niveau de lecture Scolarius : 312 (initié)

    +

    Après

    +

    L'assurance-emploi peut offrir une aide financière si vous n'avez plus de travail. Vous pourriez recevoir de l'argent régulièrement, pendant un certain temps, pour vous permettre de vous concentrer sur vos recherches d'emploi.

    +

    Pour y avoir droit, vous devez :

    +
      +
    • être Canadien ou avoir le droit de travailler au Canada;
      • +
    • avoir un numéro d'assurance sociale;
      • +
    • avoir perdu votre emploi sans que ce soit de votre faute;
      • +
    • être prêt à travailler et capable de le faire en tout temps;
      • +
    • demeurer au Canada pendant que vous recevez des prestations.
      • +
    +

    Niveau de lecture Scolarius : 71 (primaire)

    +

    Ce que nous avons fait

    +

    Pour améliorer le contenu, nous avons :

    +
      +
    • subdivisé le paragraphe en liste d'éléments;
      • +
    • remplacé des noms et des verbes par des formes plus simples.
      • +
    +

    Étude de cas B : améliorer et simplifier les tableaux

    +

    Avant

    - - - - + + + + - + - + - + - + - + @@ -2372,91 +2241,91 @@ title: "Canada.ca Content Style Guide" - + - + - - + + - - + + - + - + - + - + - + - + - + - + - + - + - + @@ -2468,55 +2337,49 @@ title: "Canada.ca Content Style Guide" - + - + - - - - - - - + - + - + - + - + - + @@ -2528,55 +2391,55 @@ title: "Canada.ca Content Style Guide" - + - + - + - + - + - + - + - + - + @@ -2588,25 +2451,25 @@ title: "Canada.ca Content Style Guide" - + - - - - + + + + - - - - + + + + - + @@ -2614,63 +2477,63 @@ title: "Canada.ca Content Style Guide" - +
    - Table: supporting families and communities (in $ millions), Budget 2013 + Soutenir les familles et les collectivités, Budget 2013
    Supporting Families and Communities (in $ millions)2013 to 20142014 to 2015TotalSoutenir les familles et les collectivités (en millions de dollars)2013 à 142014 à 15Total
    Support for FamiliesSoutenir les familles      
    Expanding Tax Relief for Home Care ServicesÉlargir l'allègement fiscal à l'égard des services de soins à domicile 5 5 10
    Palliative and End-of-Life CareSoins palliatifs et soins de fin de vie 1 1 2
    Tariff Relief for Canadians ConsumersAllègements tarifaires pour les consommateurs canadiens 76 76 152
    Subtotal—Support for FamiliesTotal partiel : Soutenir les familles 82 82 164 
    Investing in CommunitiesInvestir dans les collectivités      
    Housing for Canadians in NeedLogements pour les Canadiens dans le besoin      
    Homelessness Partnering Strategy Stratégie des partenariats de lutte contre l'itinérance  119 119
    Investment in Affordable Housing Investissement dans le logement abordable  253 253
    Investment in Nunavut HousingInvestir dans le logement au Nunavut 30 70 100
    Supporting and Honouring VeteransSoutenir les anciens combattants et leur rendre hommage      
    Enhancing Veterans Affairs Canada's Funeral and Burial ProgramAméliorer le Programme de funérailles et d'inhumation d'Anciens Combattants Canada 63 2 65
    Road to 2017En route vers 2017 1 2 3
    Investments in Arts and CultureInvestir dans les arts et la culture      
    Massey Hall RevitalizationRevitalisation du Massey Hall 8   8
    Expanding Library Services for theÉtendre les services de bibliothèque pour les Canadiens aveugles ou atteints d'une déficience visuelle      
    Blind and Partially SightedSuper crédit pour premier don de bienfaisance 3   3
    First-Time Donor's Super CreditAppuyer la transition économique des collectivités associées à l'industrie de l'amiante chrysotile 25 25 50
    Supporting the Economic Transition of Communities Economically Linked to the Chrysotile Asbestos IndustryLogements pour les Canadiens dans le besoin 3 5 8
    Subtotal—Investing in CommunitiesTotal partiel : Investir dans les collectivités 133 476 609 
    Protecting Canada's Natural EnvironmentProtéger l'environnement naturel du Canada      
    Nature Conservancy of CanadaConservation de la nature Canada 20   20
    Improving the Conservation of Fisheries   
    Through Community PartnershipsAméliorer la conservation des aires de pêche grâce aux partenariats communautaires 5 5 10
    Salmon Conservation StampTimbre de conservation du saumon 1 1 2
    Enabling Responsible Marine ManagementFavoriser la gestion responsable des ressources marines 4   4
    Protecting Against Invasive SpeciesLutter contre les espèces envahissantes 2 2 3
    Expanding Tax Support for Clean Energy GenerationAccroître l'aide fiscale pour la production d'énergie propre   1 1
    Subtotal—Protecting Canada's Natural EnvironmentTotal partiel : Protéger l'environnement naturel du Canada 32 9 41 
    Building Strong Aboriginal CommunitiesCréer des collectivités autochtones vigoureuses      
    Resolving Specific ClaimsRégler les revendications particulières 27 27 54
    First Nations Land Management RegimeRégime de gestion des terres des Premières Nations 2 7 9
    First Nations Policing ProgramProgramme des services de police des Premières Nations 18 18 36
    Aboriginal Justice StrategyStratégie de la justice applicable aux Autochtones 11   11
    Renewal of the Family Violence Prevention ProgramRenouveler le Programme pour la prévention de la violence familiale 12 12 24
    Improving Health Services to First Nations CommunitiesAméliorer les services de santé dans les collectivités des Premières Nations 24 24 48
    Enhancing Mental Health Services in First Nations CommunitiesAméliorer les services en santé mentale dans les collectivités des Premières Nations 2 2 4
    Subtotal—Building Strong Aboriginal CommunitiesTotal partiel : Créer des collectivités autochtones vigoureuses 95 90 185 
    Total—Supporting Families and CommunitiesTotal : Soutenir les familles et les collectivités 342 657 999
    Less funds existing in the fiscal framework76422498Moins les fonds prévus dans le cadre financier actuel (76)(422)(498)
    Less funds sourced from internal reallocations11112Moins les fonds assurés au moyen de réaffectations internes (1)(11)(12)
    Net fiscal costCoût budgétaire net 265 224 489
    Note: Totals may not add due to rounding.

    Remarque : Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.
    -

    After

    +

    Après

    - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + @@ -2679,77 +2542,77 @@ title: "Canada.ca Content Style Guide"
    - Table 1: supporting families and communities for fiscal years 2013 to 2014 and 2014 to 2015, net fiscal costs (in $ millions)table 1 note 1 + Tableau 1 : Soutenir les familles et les collectivités pour les exercices financiers de 2013 à 2014 et de 2014 à 2015, coûts budgétaires nets (en millions de dollars)Voir la note 1 du tableau 1
    Cost breakdown 2013 to 20142014 to 2015TotalRépartition des coûts2013 à 20142014 à 2015Total
    Total: supporting families and communitiestable 1 note 2342657999Total : Soutenir les familles et les collectivitésVoir la note 2 du tableau 1342657999
    Less funds existing in the fiscal framework(76)(422)(498)Moins les fonds prévus dans le cadre financier actuel(76)(422)(498)
    Less funds sourced from internal reallocations(1)(11)(12)Moins les fonds assurés au moyen de réaffectations internes(1)(11)(12)
    Net fiscal costs265224489Coûts budgétaires nets265224489
    -
    Table 1 Notes
    +
    Notes du tableau 1
    -
    Table 1 Note 1
    +
    Note 1 du tableau 1
    -

    Totals may not add due to rounding.

    -

    Return to table 1 note 1 referrer

    +

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    +

    Retour à la référence de la note 1 du tableau 1

    -
    Table 1 Note 2
    +
    Note 2 du tableau 1
    -

    See Table 1B for detailed breakdown.

    -

    Return to table 1 note 2 referrer

    +

    Voir le tableau 1B pour une ventilation détaillée.

    +

    Retour à la référence de la note 2 du tableau 1

    - - - - + + + + - + - + - + - + - - - - + + + + @@ -2758,51 +2621,51 @@ title: "Canada.ca Content Style Guide"
    - Table 1A: supporting families and communities for fiscal years 2013 to 2014 and 2014 to 2015, total costs (in $ millions)table 2 note 1 + Tableau 1A : Soutenir les familles et les collectivités pour les exercices financiers de 2013 à 2014 et de 2014 à 2015, coûts totaux (en millions de dollars)Voir la note 1 du tableau 2
    Initiatives and programs2013 to 20142014 to 2015TotalInitiatives et programmes2013 à 20142014 à 2015Total
    Support for familiestable 2 note 2Soutenir les famillesVoir la note 2 du tableau 2 82 82 164
    Investing in communitiestable 2 note 3Investir dans les collectivitésVoir la note 3 du tableau 2 133 476 609
    Protecting Canada's natural environmenttable 2 note 4Protéger l'environnement naturel du CanadaVoir la note 4 du tableau 2 32 9 41
    Building strong Aboriginal communitiestable 2 note 5Créer des collectivités autochtones vigoureusesVoir la note 5 du tableau 2 95 90 185
    Total: supporting families and communities 342657999Total : Soutenir les familles et les collectivités342657999
    -
    Table 2 Notes
    +
    Notes du tableau 1
    -
    Table 2 Note 1
    +
    Note 1 du tableau 2
    -

    Totals may not add due to rounding.

    -

    Return to table 2 note 1 referrer

    +

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    +

    Retour à la référence de la note 1 du tableau 2

    -
    Table 2 Note 2
    +
    Note 2 du tableau 2
    -

    See Table 1B for detailed breakdown.

    -

    Return to table 2 note 2 referrer

    +

    Voir le tableau 1B pour une ventilation détaillée.

    +

    Retour à la référence de la note 2 du tableau 2

    -
    Table 2 Note 3
    +
    Note 3 du tableau 2
    -

    See Table 1C for detailed breakdown.

    -

    Return to table 2 note 3 referrer

    +

    Voir le tableau 1C pour une ventilation détaillée.

    +

    Retour à la référence de la note 3 du tableau 2

    -
    Table 2 Note 4
    +
    Note 4 du tableau 2
    -

    See Table 1D for detailed breakdown.

    -

    Return to table 2 note 4 referrer

    +

    Voir le tableau 1D pour une ventilation détaillée.

    +

    Retour à la référence de la note 4 du tableau 2

    -
    Table 2 Note 5
    +
    Note 5 du tableau 2
    -

    See Table 1E for detailed breakdown.

    -

    Return to table 2 note 5 referrer

    +

    Voir le tableau 1E pour une ventilation détaillée.

    +

    Retour à la référence de la note 5 du tableau 2

    - - - - + + + + - + - + - + - - - - + + + + @@ -2811,105 +2674,105 @@ title: "Canada.ca Content Style Guide"
    - Table 1B: support for families for fiscal years 2013 to 2014 and 2014 to 2015 (in $ millions)table 3 note 1 + Tableau 1B : Soutien aux familles pour les exercices financiers de 2013 à 2014 et de 2014 à 2015 (en millions de dollars)Voir la note 1 du tableau 3
    Initiatives and programs 2013 to 20142014 to 2015TotalInitiatives et programmes2013 à 20142014 à 2015Total
    Expanding tax relief for home care servicesAllègement fiscal à l'égard des services de soins à domicile 5 5 10
    Palliative and end-of-life careSoins palliatifs et soins de fin de vie 1 1 2
    Tariff relief for Canadian consumersAllègements tarifaires pour les consommateurs canadiens 76 76 152
    Subtotal: support for families8282164Total partiel : Soutenir les familles8282164
    -
    Table 3 Notes
    +
    Notes du tableau 3
    -
    Table 3 Note 1
    +
    Note 1 du tableau 3
    -

    Totals may not add due to rounding.

    -

    Return to table 3 note 1 referrer

    +

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    +

    Retour à la référence de la note 1 du tableau 3

    - - - - + + + + - + - + - + - + - + - + - + - + - + - + - + - + - - - - + + + + @@ -2918,69 +2781,69 @@ title: "Canada.ca Content Style Guide"
    - Table 1C: investing in communities for fiscal years 2013 to 2014 and 2014 to 2015 (in $ millions)table 4 note 1 + Tableau 1C : Investir dans les collectivités pour les exercices financiers de 2013 à 2014 et de 2014 à 2015 (en millions de dollars)Voir la note 1 du tableau 4
    Initiatives and programs 2013 to 20142014 to 2015TotalInitiatives et programmes2013 à 20142014 à 2015Total
    Housing for Canadians in needLogements pour les Canadiens dans le besoin 0 0 0
    Homelessness partnering strategyStratégie des partenariats de lutte contre l'itinérance 0 119 119
    Investment in affordable housingInvestissement dans le logement abordable 0 253 253
    Investment in Nunavut housingInvestissement dans le logement au Nunavut 30 70 100
    Supporting and Honouring veteransSoutient et hommage combattants et leur rendre hommage 0 0 0
    Enhancing Veterans Affairs Canada's Funeral and Burial Program Programme de funérailles et d'inhumation d'Anciens Combattants Canada 63 2 65
    Road to 2017En route vers 2017 1 2 3
    Investments in arts and cultureInvestissement dans les arts et la culture 0 0 0
    Massey Hall revitalizationRevitalisation du Massey Hall 8 0 8
    Expanding library services for the blind and partially sightedServices de bibliothèque pour les Canadiens aveugles ou atteints d'une déficience visuelle 3 0 3
    First-time Donor's Super CreditSuper crédit pour premier don de bienfaisance 25 25 50
    Supporting the economic transition of communities economically linked to the chrysotile asbestos industryAppui de transition économique des collectivités associées à l'industrie de l'amiante chrysotile 3 5 8
    Subtotal: investing in communities133476609Total partiel : Investir dans les collectivités133476609
    -
    Table 4 Notes
    +
    Notes du tableau 4
    -
    Table 4 Note 1
    +
    Note 1 du tableau 4
    -

    Totals may not add due to rounding.

    -

    Return to table 4 note 1 referrer

    +

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    +

    Retour à la référence de la note 1 du tableau 4

    - - - - + + + + - + - + - + - + - + - + - - - - + + + + @@ -2989,127 +2852,133 @@ title: "Canada.ca Content Style Guide"
    - Table 1D: protecting Canada's natural environment for fiscal years 2013 to 2014 and 2014 to 2015 (in $ millions)table 5 note 1 + Tableau 1D : Protéger l'environnement naturel du Canada pour les exercices financiers de 2013 à 2014 et de 2014 à 2015 (en millions de dollars)Voir la note 1 du tableau 5
    Initiatives and programs 2013 to 20142014 to 2015TotalInitiatives et programmes2013 à 20142014 à 2015Total
    Nature Conservancy of CanadaConservation de la nature Canada 20 0 20
    Improving the conservation of fisheries through community partnershipsConservation des aires de pêche grâce aux partenariats communautaires 5 5 10
    Salmon conservation stampTimbre de conservation du saumon 1 1 2
    Enabling responsible marine managementGestion responsable des ressources marines 4 0 4
    Protecting against invasive speciesLutte contre les espèces envahissantes 2 2 3
    Expanding tax support for clean energy generationAide fiscale pour la production d'énergie propre 0 1 1
    Subtotal: protecting Canada's natural environment32941Total partiel : Protéger l'environnement naturel du Canada32941
    -
    Table 5 Notes
    +
    Notes du tableau 5
    -
    Table 5 Note 1
    +
    Note 1 du tableau 5
    -

    Totals may not add due to rounding.

    -

    Return to table 5 note 1 referrer

    +

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    +

    Retour à la référence de la note 1 du tableau 5

    - - - - + + + + - + - + - + - + - + - + - + - - - - + + + +
    - Table 1E: building strong Aboriginal communities for fiscal years 2013 to 2014 and 2014 to 2015 (in $ millions)table 6 note 1 + Tableau 1E : Créer des collectivités autochtones vigoureuses pour les exercices financiers de 2013 à 2014 et de 2014 à 2015 (en millions de dollars)Voir la note 1 du tableau 6
    Initiatives and programs2013 to 20142014 to 2015TotalInitiatives et programmes2013 à 20142014 à 2015Total
    Resolving specific claimsRésolution des revendications particulières 27 27 54
    First Nations Land Management RegimeRégime de gestion des terres des Premières Nations 2 7 9
    First Nations Policing ProgramProgramme des services de police des Premières Nations 18 18 36
    Aboriginal Justice StrategyStratégie de la justice applicable aux Autochtones 11 0 11
    Renewal of the Family Violence Prevention Program Programme pour la prévention de la violence familiale 12 12 24
    Improving health services to First Nations CommunitiesServices de santé dans les collectivités des Premières Nations 24 24 48
    Enhancing mental health services in First Nations communitiesServices en santé mentale dans les collectivités des Premières Nations 2 2 4
    Subtotal: building strong Aboriginal communities9590185Total partiel : Créer des collectivités autochtones vigoureuses9590185
    -
    Table 6 Notes
    +
    Notes du tableau 6
    -
    Table 6 Note 1
    +
    Note 1 du tableau 6
    -

    Totals may not add due to rounding.

    -

    Return to table 6 note 1 referrer

    +

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    +

    Retour à la référence de la note 1 du tableau 6
    -

    What we did

    -

    To create these tables, we:

    +

    Ce que nous avons fait

    +

    Pour créer ces tableaux, nous avons :

      -
    • divided a complex table into several simple tables that are more accessible and can be viewed easily on mobile devices
      • -
    • applied the inverted pyramid approach to provide the summary or conclusion first, followed by increasingly detailed information
      • -
    • created a clear title for each table
      • -
    • updated titles to reflect capitalization requirements
      • -
    • used existing subheadings embedded in the original example to create table headers
      • -
    • made sure that the last 3 column headers reflect the unit value of the information in each column
      • -
    • added zeros to provide relevant information in otherwise empty cells
      • -
    • removed empty cells, rows and irrelevant information (underlining) and subheadings (such as those that were not aligned with the column headers)
      • +
    • divisé un tableau complexe en plusieurs tableaux simples et faciles à consulter à partir d'un appareil mobile;
      • +
    • utilisé l'approche de la pyramide inversée de façon à présenter le résumé ou la conclusion en premier, suivi de renseignements de plus en plus détaillés;
      • +
    • rédigé des titres clairs pour chaque tableau;
      • +
    • utilisé les sous-titres existants compris dans l'exemple initial pour créer les titres des différents tableaux;
      • +
    • veillé à ce que les en-têtes des 3 colonnes numériques correspondent à la valeur unitaire indiquée dans chaque colonne;
      • +
    • ajouté des zéros afin de fournir des renseignements pertinents dans les cellules qui auraient autrement été laissées vides;
      • +
    • supprimé les cellules et les rangées vides ainsi que les sous-titres non pertinents (c'est-à-dire, ceux qui ne correspondaient à aucune valeur sous les en-têtes de colonne).
    -

    Resources

    -
    From 97fa489ea5fee43a7642ee473b7f100a006ea277 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Tue, 10 Oct 2023 09:39:16 -0400 Subject: [PATCH 15/27] Update index.md From 8908e7438ba70ffd6a19d8c3e90f4214c5d9e953 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Tue, 10 Oct 2023 09:43:23 -0400 Subject: [PATCH 16/27] Update index.md From 659cfcaeef84f716b60fe783a2f9604ba13b9ee0 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Wed, 11 Oct 2023 07:31:17 -0400 Subject: [PATCH 17/27] Update index.md --- style-guide/index.md | 3651 ++++++++++++++++++++++-------------------- 1 file changed, 1891 insertions(+), 1760 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index a3d4180632..8af294941f 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -6,28 +6,28 @@ description: "These are the rules to create web content that can be easily found title: "Canada.ca Content Style Guide" ---
    -

    Les règles pour créer du contenu Web qui peut être trouvé, compris et utilisé facilement. Ces règles s'appuient sur des principes de rédaction et des techniques qui aident à fournir un contenu Web clair et adapté aux besoins de tous. Consultez les Spécifications du contenu et de l'architecture de l'information pour Canada.ca lorsque vous concevez et organisez du contenu Web.

    +

    These are the rules to create web content that can be easily found, understood and used. They are based on writing principles and techniques that help make web content clear and adapted to the needs of all people. Use it with the Content and Information Architecture Specification when you're designing and organizing web content.

    -

    Table des matières

    +

    Table of contents

    @@ -35,176 +35,176 @@ title: "Canada.ca Content Style Guide"
    -

    Sommaire des changements

    -

    Voici les changements que nous avons apportés à cette version du guide :

    +

    Summary of changes

    +

    Here are the changes we made to this version of the guide:

    -

    Reportez-vous à la section pour plus de détails.

    +

    Refer to the listed section for details.

    -

    But du document

    -

    Le présent guide fait état des règles de rédaction et de révision du contenu français qui sera publié sur un site du gouvernement du Canada. Elles diffèrent des pratiques adaptées à l'imprimé afin d'appuyer les principes liés à l'accessibilité, à la lisibilité et à la facilité d'utilisation.

    -

    Les règles comprises dans ce guide ont pour but de rendre le contenu Web facile à trouver, à comprendre et à utiliser pour toute personne, y compris celles qui ont un handicap physique ou cognitif.

    -

    Les règles décrites dans ce guide complémentent celles du guide du rédacteur. S'il existe des divergences entre le présent guide, le guide du rédacteur ou toute autre ressource, le présent guide a préséance en ce qui concerne le contenu publié en ligne.

    -

    À mesure que les tendances du Web et de la langue évolueront, nous mettrons ce guide à jour pour répondre aux besoins changeants de nos publics cibles.

    +

    Purpose

    +

    This guide establishes the rules you must use to develop and edit English web content that will be published on a Government of Canada website. The rules are different from practices adapted to print to support principles related to accessibility, readability and usability.

    +

    The purpose of these rules is to make web content easy to find, easy to understand and easy to use for everyone, including people who have physical or cognitive disabilities.

    +

    The techniques described in this guide complement the rules set out in The Canadian Style. If there are conflicts between this guide and The Canadian Style or any other resource, this guide takes priority for content published online.

    +

    As web and language trends evolve, we'll update this guide to meet the changing needs of our audiences.

    -

    Application

    -

    Tous les ministères et les autres secteurs de l’administration publique fédérale qui sont assujettis à la Directive sur la gestion des communications doivent appliquer le Guide de rédaction du contenu du site Canada.ca. Ces organisations doivent respecter les normes décrites dans ce guide lorsqu’elles élaborent des sites Web ou des services numériques destinés au public, et ce, peu importe la technologie, le nom de domaine ou la plateforme qu’elles utilisent. Cette exigence est prévue à l’annexe D, Procédure obligatoire relative à l’utilisation des médias sociaux et aux communications sur le Web, de la Directive sur la gestion des communications.

    -

    Institutions non visées par le présent guide

    -

    Les institutions qui ne sont pas visées par la Directive sur la gestion des communications n’ont pas à suivre le présent guide. Toutefois, elles sont encouragées à le faire pour leurs produits Web internes et externes. Le fait de respecter les règles et les conseils décrits dans ce guide permettra de rendre le contenu Web du gouvernement facile à trouver, à comprendre et à utiliser pour toute personne.

    +

    Use of the style guide

    +

    All departments and other portions of the federal public administration subject to the Directive on the Management of Communications must use the Canada.ca Style Guide. These organizations must follow this style guide's requirements for all public-facing websites and digital services, regardless of the technology, domain name or publishing platform used. This requirement is referenced in Appendix D: Mandatory Procedures for Social Media and Web Communications in the Directive on the Management of Communications.

    +

    Out-of-scope situations

    +

    Institutions that fall outside of the Directive on the Management of Communications do not have to follow this style guide. However, all institutions are encouraged to use it for both their internal and external web products. Following this guide's rules and techniques will make it easier for everyone to find, understand and use the government's digital content.

    -

    Politiques, normes et procédures connexes

    -

    Votre contenu doit se conformer aux :

    +

    Related policies, standards and procedures

    +

    Content must comply with:

    -

    1.0 Principes de rédaction pour le contenu Web

    +

    1.0 Writing principles for web content

    -

    Dans cette section

    +

    In this section

    -

    Les règles présentées dans ce guide tiennent compte de la façon dont les gens lisent et utilisent le contenu Web.

    +

    The rules in this guide reflect how people read and use web content.

    -

    1.1 Aider les gens à accomplir des tâches

    -

    La plupart des gens consultent les sites gouvernementaux pour accomplir une tâche et s'attendent à ce qu'on leur fournisse des renseignements qui les aideront dans leurs démarches. Leur tâche s'inscrit dans l'une ou l'autre des catégories suivantes :

    +

    1.1 Help people complete tasks

    +

    Most people come to a government website to complete a task and expect us to provide information that will help them. Tasks can be:

      -
    • transaction (soumettre un formulaire ou télécharger un rapport);
      • -
    • recherche d'information (savoir comment obtenir une subvention ou trouver un numéro de téléphone).
      • +
    • transactional (submit a form or download a report)
      • +
    • informational (find out how to collect a benefit or find a phone number)
    -

    Les gens qui tentent d'accomplir une tâche sur le Web ne lisent pas chaque mot. Ils survolent rapidement le texte pour trouver les termes et les liens associés à la tâche qu'ils veulent accomplir.

    -

    Le contenu Web du gouvernement du Canada doit être :

    +

    People trying to complete a task online usually don't read word by word. They scan quickly for words and links related to what they want to do.

    +

    Government of Canada web content must be:

      -
    • intuitif : fournissez aux personnes qui ne connaissent pas le sujet ou le processus juste assez d'information pour qu'elles puissent effectuer une tâche par elles-mêmes;
      • -
    • complet : donnez des renseignements utiles aux spécialistes qui ont une connaissance plus poussée du sujet ou du processus;
      • -
    • ciblé : présentez les renseignements les plus importants d'abord, adaptés aux besoins du public cible, au lieu de fournir toutes les options et de laisser les gens déterminer lesquelles s'appliquent à eux;
      • -
    • cohérent : présentez l'information de manière uniforme afin de permettre aux gens d'explorer le contenu rapidement, facilement et avec confiance.
      • +
    • intuitive: give people who have no previous knowledge of the topic or process just enough information to complete a task on their own
      • +
    • comprehensive: give the appropriate details to specialists who have more knowledge of a topic or process
      • +
    • targeted: present the most important information first, in a way that is tailored to the needs of the audience, instead of giving all the options and leaving people to figure out which ones apply to them
      • +
    • consistent: use a standardized approach so that people can scan content quickly and easily with a sense of confidence and trust
    -

    1.2 Prendre en compte les besoins du public

    -

    Lorsque vous préparez du contenu Web, tenez compte des besoins des lecteurs.  Veillez à ce que votre contenu soit accessible, lisible et adapté à un large public.

    +

    1.2 Consider the needs of the audience

    +

    When planning web content, consider people's needs. Make sure that the content is accessible, clear and adapted to the widest audience.

    -

    Rédiger pour assurer l'accessibilité

    -

    Faire en sorte que le contenu est accessible signifie qu'un large éventail de personnes peut l'utiliser, y compris les personnes ayant des handicaps physiques et cognitifs (par exemple, les problèmes de dyslexie ou de mémoire, troubles du déficit de l'attention et les troubles d'apprentissage).

    -

    Pour rendre votre contenu accessible, tenez compte du fonctionnement des technologies d'aide et de l'impact que certaines pratiques d'écriture peuvent avoir sur la capacité des gens à lire ou à comprendre le texte. De plus, n'oubliez pas de vous référer aux Règles pour l'accessibilité des contenus Web 2.0.

    -
    -
    -

    Rédiger pour assurer l'inclusion

    -

    La rédaction épicène devrait être votre pratique habituelle.

    -

    Pour plus de conseils sur l'écriture inclusive, consultez les lignes directrices et ressources du Portail linguistique du Canada :

    - -
    -
    -

    Rédiger pour assurer la lisibilité

    -

    La lisibilité est la mesure dans laquelle un texte est clair et facile à comprendre. Un texte lisible facilite la réalisation des tâches et rehausse le degré de satisfaction de la personne.

    -

    Pour assurer la lisibilité de votre contenu, tenez compte du niveau de lecture et des besoins en matière d'alphabétisation de votre public cible. La capacité de lire ou de comprendre un texte n'est pas la même pour tout le monde. Même si le contenu est présenté clairement et simplement, les gens qui ont un faible niveau d'alphabétisation peuvent éprouver des difficultés à saisir le texte.

    -

    Selon Statistique Canada (2012) et les organismes d'alphabétisation canadiens, près de 50 % des Canadiens éprouvent des difficultés à lire et à écrire. Les recherches démontrent que ceux dont le taux d'alphabétisation est faible :

    -
      -
    • passent beaucoup de temps à tenter de comprendre les mots qui ont plusieurs syllabes;
      • -
    • lisent un mot à la fois et déplacent leurs yeux lentement le long de chaque ligne de texte;
      • -
    • ignorent souvent de grandes quantités d'information si le texte comporte trop de longs mots, de termes inhabituels ou de longues phrases.
      • -
    -

    Des techniques pour améliorer et mesurer la lisibilité sont présentées à la section sur le langage clair et simple.

    -
    -
    -

    Rédiger pour un public spécialisé

    -

    Votre contenu Web vise parfois des gens qui ont une connaissance approfondie d'un sujet ou d'un domaine donné.

    -

    Lorsque vous rédigez du contenu pour un public spécialisé, vous pouvez utiliser des termes que ce public connaît bien même s'ils sont moins connus du grand public. Ajoutez un résumé en langage simple pour :

    -
      -
    • les personnes qui ne connaissent pas le sujet;
      • -
    • les spécialistes qui survolent le texte afin d'en déterminer la pertinence pour la tâche à effectuer.
      • -
    -
    -
    -

    Tenir compte de toutes les tailles d'écran

    -

    Votre contenu sera lu sur des écrans de toutes tailles. Les écrans de téléphone mobile et de tablettes électroniques affichent moins de contenu à la fois que les écrans d'ordinateur de bureau ou portatif. Les utilisateurs de petits écrans doivent donc :

    - +

    Writing for accessibility

    +

    Making content accessible means a wide range of people can use it, including people with physical and cognitive disabilities (for example, reading disorders, attention deficit disorders, memory disorders).

    +

    To make your content accessible, consider how assistive technologies work and how some writing practices may impact people's ability to read or understand text. Remember to also refer to the Web Content Accessibility Guidelines (WCAG) 2.0.

    +
    +

    Writing for inclusivity

    +

    Make gender-inclusive writing your standard practice.

    +

    For more guidance on inclusive writing, see the Language Portal of Canada’s guidelines and resources:

    + +
    +
    +

    Writing for readability

    +

    Readability is the ease with which a person can read and understand a text. Readable content means better task completion and higher client satisfaction.

    +

    To make your content readable, consider your audience's reading level and literacy needs. Not everyone reads at the same level or understands content in the same way. Even when content is presented clearly and simply, people who have low literacy levels and other difficulties can find it hard to understand text.

    +

    According to Statistics Canada (2012) and Canadian literacy organizations, almost 50% of Canadians have literacy challenges. Research shows that people with literacy challenges:

    +
      +
    • spend a lot of time trying to understand words that contain more than two syllables
      • +
    • read word by word and slowly move their eyes across each line of text
      • +
    • skip over large amounts of information when it contains many multi-syllable words, uncommon terms and long sentences
      • +
    +

    Techniques for improving and measuring readability are in the section on plain language.

    +
    +
    +

    Writing for specialized audiences

    +

    Sometimes, your content targets people who have in-depth knowledge of a subject.

    +

    When writing for a specialized audience, you can use terms they're familiar with, even if those terms aren't familiar to a general audience.  Include a summary in plain language for:

    +
      +
    • people who aren't familiar with the subject
      • +
    • specialists who might be scanning the content to decide whether it's relevant to their task
      • +
    +
    +
    +

    Consider all screen sizes

    +

    People will view your content on different sizes of screens. Phone and tablet screens display less content than desktop and laptop screens. Readers who use small screens:

    + +
    -

    1.3 Fournir un contenu équivalent dans les 2 langues officielles

    +

    1.3 Provide equivalent content in both official languages

    -

    Exigences en matière de langues officielles

    -

    Selon la Loi sur les langues officielles, nous devons publier simultanément les communications et fournir des services égaux dans les 2 langues officielles.

    +

    Official languages requirements

    +

    According to the Official Languages Act, you must publish communications and provide services to the public in both official languages.

    -

    Le contenu du gouvernement doit :

    +

    Government content must:

      -
    • être traduit par des professionnels;
      • -
    • refléter les règles d'usage canadiennes du français et de l'anglais;
      • -
    • comprendre des images, des fichiers multimédias et des transcriptions entièrement bilingues ou procurer de l'information équivalente dans les 2 langues officielles.
      • +
    • be professionally translated
      • +
    • reflect Canadian writing conventions in English and French
      • +
    • include fully bilingual images, multimedia files and transcripts, or contain equivalent information in both official languages
    -

    Personnes responsables des langues officielles

    -

    Une personne responsable des langues officielles dans votre institution peut aider à répondre à vos questions concernant vos obligations et les exceptions.

    -

    Votre équipe des communications peut vous aider à déterminer s'il convient et quand il convient de communiquer avec vos publics cibles dans d'autres langues, en plus des langues officielles du Canada.

    +

    Persons responsible for official languages

    +

    The person responsible for official languages in your institution can help answer questions about your obligations and about exceptions.

    +

    Your communications team can help determine whether it's appropriate to communicate with audiences in other languages, in addition to Canada's official languages.

    -

    2.0 Langage clair et simple

    +

    2.0 Plain language

    -

    Dans cette section

    +

    In this section

    @@ -213,881 +213,989 @@ title: "Canada.ca Content Style Guide"
    -

    Exigences en matière de langage clair et simple

    -

    L'utilisation d'un langage clair et simple est une exigence de la Directive sur la gestion des communications.

    +

    Plain language requirements

    +

    The use of plain language is a requirement of the Directive on the Management of Communications.

    -

    Rédiger en langage clair et simple ne veut pas dire simplifier outre mesure ou omettre des renseignements essentiels. Le recours à un langage simple rend l'information essentielle lisible et accessible à tous.

    -

    Écrire en langage clair et simple :

    +

    Writing in plain language doesn't mean over-simplifying or leaving out critical information. Using plain language actually makes critical information accessible and readable for everyone.

    +

    By writing plainly and simply, you:

      -
    • augmente les chances que les gens trouvent, lisent et comprennent votre information sur n'importe quel appareil;
      • -
    • rend votre information plus accessible aux personnes handicapées;
      • -
    • permet à ceux qui se servent de petits écrans de voir l'information essentielle en premier;
      • -
    • maximise vos ressources à l'étape de la traduction et de la révision de votre texte;
      • -
    • facilite la réalisation des tâches en ligne et contribue à réduire les coûts, par exemple, en diminuant le nombre de demandes de renseignements.
      • +
    • increase the chances that people will find, read and understand your information from any device
      • +
    • make your information more accessible to people with disabilities
      • +
    • allow people who are reading your information on a small screen to see essential information first
      • +
    • save resources when editing and translating your text
      • +
    • improve task completion and cuts costs by, for example, reducing enquiries
    -

    2.1 Commencer par les renseignements les plus importants

    -

    Introduisez les renseignements les plus importants au début de votre texte et allez droit au but. Lorsqu'ils survolent les pages Web, les gens ont tendance à débuter dans le coin supérieur gauche en déplaçant leur regard vers la droite. À mesure qu'ils font défiler la page vers le bas, ils survolent de moins en moins le texte à droite.

    -

    Organisez votre contenu selon le modèle de la pyramide inversée afin :

    +

    2.1 Start with the most important information

    +

    Start your content with the most important information, and be direct. When people scan web pages, they tend to start in the top left hand corner and scan to the right and down. As they move down the page, they scan less and less to the right.

    +

    Organize your content using an inverted pyramid structure to:

      -
    • d'orienter la personne vers les renseignements dont elle a besoin pour accomplir une tâche;
      • -
    • de placer les renseignements complémentaires à la fin du texte.
      • +
    • guide your audience to the information they need to complete their task
      • +
    • place supporting and relevant details toward the end of the text
    Figure 1
    - Pyramide inversée illustrant comment créer une page Web en indiquant tout d'abord les renseignements clés. + Pyramid upside down showing how to start a web page with key information first. Text version below:
    - Figure 1 - Version textuelle -

    Pyramide inversée illustrant comment créer une page Web en indiquant tout d'abord les renseignements clés.

    + Figure 1 - Text version +

    Inverted pyramid divided into four sections, from top to bottom. The image shows the order of information on a web page.

      -
    • Premièrement : +
    • First:
        -
      • commencer chaque page Web par l'idée, l'étape ou l'information la plus importante.
        • +
      • start with the most important idea, step or information
      • -
    • Deuxièmement : +
    • Second:
        -
      • ajouter les détails et les tâches par ordre d'importance;
        • -
      • mettre tout le contenu lié à la tâche au centre de la page;
        • -
      • utiliser des liens pour orienter les gens vers les renseignements et les tâches essentielles.
        • +
      • add details and tasks in order of importance
        • +
      • keep all task related content in the centre of the page
        • +
      • use links to direct people to key information and tasks
      • -
    • Troisièmement : +
    • Third:
        -
      • inclure des renseignements pertinents à l'intention des publics cibles qui désirent en apprendre davantage ou qui ont une connaissance approfondie du sujet ou du service.
        • +
      • include information for audiences who want to learn more or have more knowledge of the topic or service, but only if it makes sense
      • -
    • Quatrièmement : +
    • Fourth:
        -
      • ajouter des liens seulement s'ils concernent le contenu et appuient la tâche.
        • +
      • add links only if they relate to content that supports completion of the task on the web page (for example, laws or publications)
    -

    Aller droit au but

    -

    Évitez les renseignements généraux et les messages d'accueil (par exemple, « bienvenue sur notre site »). Ces messages relèguent au second plan le contenu dont la personne a besoin pour accomplir sa tâche.

    -

    Écrivez des énoncés directs.

    -
    Exemple d'énoncé direct
    -

    Écrivez : Présentez votre passeport à l'agent à l'aéroport.
    - Au lieu de : Selon la loi canadienne, vous devez présenter votre passeport à l'agent qui vous accueille à l'aéroport.

    -
    -

    Voyez comment la règle sur la pyramide inversée s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -
    -

    2.2 Utiliser des mots simples et courants

    -

    Remplacez les mots longs par des mots courts, simples et de tous les jours que la plupart des gens comprennent et utilisent. Les mots simples ont 2 syllabes ou moins. Ils sont plus faciles à lire en survolant le texte que les mots longs et complexes.

    -

    Exemples d'utilisation de mots simples et courants

    -

    Écrivez : demander
    - Au lieu de : faire une requête

    -

    Écrivez : assez de
    - Au lieu de : un nombre suffisant de

    -

    Écrivez : si
    - Au lieu de : dans la mesure où

    -

    Écrivez : avant
    - Au lieu de : préalablement

    -

    Écrivez : tous les 2 ans
    - Au lieu de : bisannuellement

    -

    Voyez comment la règle sur l'utilisation des mots simples et courants s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -
    -

    2.3 Utiliser la voix active et la forme positive

    -

    Lorsque c'est possible, utilisez la :

    -
      -
    • voix active plutôt que la voix passive;
      • -
    • forme positive plutôt que la forme négative.
      • -
    -
    -

    Voix active ou passive

    -

    Dans une phrase à la voix active, le sujet fait l'action. La phrase est claire et directe.

    -

    Dans une phrase à la voix passive, il n'est pas toujours facile de savoir qui (ou quoi) fait l'action.

    -
    Exemples de constructions active et passive
    -

    Construction active : Vous devrez peut-être fournir une preuve de citoyenneté.
    - Construction passive : Une preuve de citoyenneté sera peut-être exigée.

    -
    -
    -

    Forme positive ou négative

    -

    Lorsque c'est possible, dites ce que la personne peut ou doit faire plutôt que ce qu'elle ne peut ou ne doit pas faire. Évitez la forme négative, les doubles négations et les exceptions aux exceptions.

    -
    Exemples de formes positives et négatives
    -

    Forme positive : Vous pouvez déduire une partie du montant à la ligne 147 de votre déclaration de revenus.
    - Forme négative : Vous ne pouvez déduire qu'une partie du montant de la ligne 147 de votre déclaration de revenus.

    -

    Forme positive : La procédure sera efficace.
    - Double négation : La procédure ne sera pas inefficace.

    -

    Forme positive : Vous pouvez demander une déduction pour un enfant à charge né en 1972 ou avant si cet enfant a une déficience mentale ou physique.
    - Double négation : Vous ne pouvez pas demander une déduction pour un enfant à charge né en 1972 ou avant, à moins que cet enfant n'ait une déficience mentale ou physique.

    -

    Lorsqu'une action risque d'entraîner de graves conséquences, vous pouvez utiliser la forme négative pour expliquer que l'action est impossible ou doit être évitée.

    -
    Exemples d'utilisation de la forme négative pour quelque chose pouvant avoir des conséquences graves
    -

    Écrivez : N'essayez pas de trouver la source de monoxyde de carbone. Sortez immédiatement pour respirer de l'air frais.

    +

    Get to the point

    +

    Omit background information and messages that welcome people to your program or site. These kinds of messages get in people's way when they're trying to accomplish a task.

    +

    Write direct statements.

    +
    Example of direct statements
    +

    Write: Present your passport to the border officer.
    + Instead of: According to Canadian legislation, you're required to present your passport to the agent who will welcome you into the country.

    +

    See how rule for the inverted pyramid structure applies in French

    +
    -

    Voyez comment la règle sur l'utilisation de la voix active et de la forme positive s'applique à un contenu de langue anglaise

    -
    -
    +
    -
    -

    2.4 Utiliser des verbes plutôt que des noms formés à partir de verbes

    -

    Privilégiez le verbe (forme verbale) plutôt que le nom formé à partir du verbe (forme nominale) pour exprimer clairement une action.

    -

    Exemples d'énoncés qui contiennent des verbes plutôt que des noms

    -

    Écrivez : recommander une mesure
    - Au lieu de : formuler une recommandation d'une mesure

    -

    Écrivez : distribuer le courrier
    - Au lieu de : faire la distribution du courrier

    -

    Écrivez : modifier la page
    - Au lieu de : apporter une modification à la page

    -

    Utilisez le verbe dans sa forme la plus simple. Si possible, utilisez le présent.

    -

    Voyez comment la règle sur l'utilisation de la forme verbale s'applique à un contenu de langue anglaise

    - -
    -
    -
    +
    +
    +

    2.2 Use simple and common words

    +

    Replace long words with short, simple and everyday words that most people understand and use. Simple words have 2 syllables or less. They're easier to scan than long, complex words.

    +

    Example of simple and common words

    +

    Write: ask
    + Instead of: make a request

    +

    Write: you must
    + Instead of: you shall

    +

    Write: to
    + Instead of: in order to

    +

    Write: before
    + Instead of: prior to

    +

    Write: get
    + Instead of: obtain

    +

    See how the rule for using simple and common words applies to content in French

    + +
    +
    +
    +
    +
    +

    2.3 Use active voice and positive form

    +

    Whenever possible use the:

    +
      +
    • active voice instead of the passive voice
      • +
    • positive form instead of the negative form
      • +
    +
    +

    Active or passive voice

    +

    In an active sentence, the subject does the action. The sentence is clear and direct.

    +

    In a passive sentence, it may not be clear who or what is doing the action.

    +
    Example of passive and active sentences
    +

    Active: We may ask you to provide proof of citizenship.
    + Passive: You may be asked to provide proof of citizenship.

    -
    -

    2.5 Éviter le jargon et les expressions familières ou imagées

    -

    Évitez d'utiliser du jargon, un langage spécialisé ou des expressions familières, imagées ou régionales. Choisissez le terme le plus simple ou le plus courant pour votre public cible.

    -

    Pour la plupart des gens, les termes juridiques et techniques et le jargon administratif portent à confusion.

    -

    Ceux et celles qui ne parlent ni français ni anglais peuvent recourir à des outils en ligne pour traduire du texte. Les traductions produites par ces outils ne sont pas toujours exactes, surtout lorsqu'il est question d'expressions familières, imagées ou régionales.

    -

    Exemples de jargon, d'idiotisme et d'expression

    -

    Jargon : mandat d'arrêt décerné sur le siège (ordre émis par un juge d'arrêter une personne qui ne s'est pas présentée en cour ou qui n'a pas respecté certaines conditions)

    -

    Idiotisme : pour faire court (pour résumer, en un mot, bref)

    -

    Expression : ne pas avoir la langue dans sa poche (personne qui n'a pas peur de dire ce qu'elle pense)

    -

    Si vous devez utiliser un jargon bien connu de votre public cible :

    -
      -
    • expliquez le terme en employant des mots simples et courants ou donnez un exemple pour aider les non-spécialistes à comprendre;
      • -
    • n'utilisez pas de jargon pour expliquer le jargon.
      • -
    -

    Exemples d'énoncés qui évitent le recours au jargon

    -

    Écrivez : Vous devez nous envoyer votre déclaration de revenus (T1) d'ici le 30 avril.
    - Au lieu de : Vous devez nous envoyer votre T1 d'ici le 30 avril.

    -

    Écrivez : Apprenez-en plus sur les régimes d'épargne qui peuvent vous aider à épargner assez d'argent pour la retraite.
    - Au lieu de : Apprenez-en plus sur les régimes d'épargne qui peuvent vous aider à vous constituer un bas de laine pour votre retraite.

    -

    Voyez comment la règle sur le jargon et les expressions familières ou imagées s'applique à un contenu de langue anglaise

    - -
    -
    -
    -

    Identifiez les mots-clés que votre public utilise pour trouver votre contenu

    -

    Voici des outils pour vous aider à identifier les termes de recherche les plus populaires :

    - -

    Certains de ces outils ne sont offerts qu'en anglais, et d'autres sont offerts en français si votre navigateur est configuré en français.

    -

    Consultez vos données d'analyse Web pour savoir quels termes votre public utilise pour chercher du contenu connexe.

    +
    +

    Positive or negative form

    +

    Whenever possible, tell people what they may or must do instead of what they may not or must not do. Avoid negatives, double negatives and exceptions to exceptions.

    +
    Examples of positive and negative sentences
    +

    Positive: You're entitled to part of the deduction.
    + Negative: You're not entitled to the entire deduction.

    +

    Positive: The procedure will be effective.
    + Double negative: The procedure will not be ineffective.

    +

    Positive: You may claim a child born in 1972 or earlier as a dependent, if he or she has a mental or physical disability.
    + Double negative: You may not claim anything for a dependent child born in 1972 or earlier, unless the child has a mental or physical disability.

    +

    If something has serious consequences, you can use the negative form to explain that something isn't possible or should not be done.

    +
    Examples of using the negative form for something that has serious consequences
    +

    Write: Do not try to locate the source of carbon monoxide. Leave your home immediately and move to fresh air.

    -
    -

    2.6 Utiliser des phrases simples

    -

    Privilégiez des structures syntaxiques simples en plaçant le sujet et le verbe en début de phrase et en utilisant des constructions de type sujet + verbe + complément. Cette structure aide le lecteur à comprendre ce que fait le sujet de la phrase en plaçant le sujet tout juste devant le verbe.

    -

    Évitez les phrases complexes composées de plusieurs énoncés. Elles rassemblent généralement trop d'informations pour que les gens puissent les comprendre en survolant le texte.

    -

    Exemples de phrase simple

    -

    Écrivez : Renseignez-vous au sujet du réseau de transport du Canada. Trouvez des renseignements au sujet des routes, les pistes cyclables, les ports et les aéroports partout au pays.
    - Au lieu de : Le réseau de transport du Canada, avec ses routes, ses pistes cyclables, ses ports et ses aéroports, est vaste, et ce site vous fournira une foule d'information au sujet du réseau d'un bout à l'autre du pays.

    -

    Remplacez les structures de phrase complexes par des énoncés directs.

    -

    Exemples d'énoncé direct

    -

    Écrivez : Vous avez jusqu'au 30 avril pour soumettre votre déclaration de revenus.
    - Au lieu de : La période de temps dont les contribuables disposent pour soumettre leurs déclarations de revenus se termine le 30 avril.

    -

    Pour aider les gens à comprendre le sens d'une phrase longue, entourez-la de phrases courtes.

    -

    Voyez comment la règle sur les phrases simples s'applique à un contenu de langue anglaise

    - -
    -
    -
    +

    See how the rule for active voice and positive form applies to content in French

    + +
    +
    +
    +
    +
    +

    2.4 Use verbs instead of nouns formed from verbs

    +

    Avoid using nouns that are formed from verbs. They can be vague. Verbs alone clearly express the action needed.

    +

    Examples of the use of verbs instead of nouns

    +

    Write: apply
    + Instead of: submit your application

    +

    Write: consider
    + Instead of: take into consideration

    +

    Write: modify
    + Instead of: make a modification

    +

    Write: needs
    + Instead of: is in need of

    +

    Always use the simplest form of a verb. When possible, use the present tense.

    +

    See how the rule for using verbs instead of nouns formed from verbs applies in French

    + +
    +
    +
    +
    +
    +

    2.5 Avoid jargon, idioms and expressions

    +

    Where possible, avoid using jargon, idioms and expressions. Use the clearest, most popular term for your audience.

    +

    Legal and technical terms and "government-speak" confuse most people.

    +

    People who don't speak English or French might use online tools to translate text. These tools don't always translate idioms and expressions accurately.

    +

    Examples of jargon, idioms and expressions

    +

    Jargon: bench warrant (an order by a judge to arrest someone who didn't show up in court or comply with certain conditions)

    +

    Idiom: to hire a helping hand (meaning to hire an employee)

    +

    Expression: attack your least favourite task first (meaning do your least favourite task first)

    +

    If you must include jargon familiar to your target audience, be sure to:

    +
      +
    • explain it using simple, familiar words or give an example to help non-specialists understand
      • +
    • never use jargon to explain jargon
      • +
    +

    Examples of statements that avoid the use of jargon

    +

    Write: You have to file your income tax return (T1) by April 30.
    + Instead of: You have to file your T1 return by April 30.

    +

    Write: Learn about savings plans that can help you save enough money to retire.
    + Instead of: Learn about different types of savings plans that will let you build up your retirement nest egg.

    +

    Identify keywords your audience is using to find your content

    +

    Tools you can use to see which search terms are most popular:

    + +

    Refer to your analytics to find out which search terms your audience uses to find related content.

    +

    See how the rule for jargon, idioms and expressions applies to content in French

    + +
    +
    +
    +
    +
    +

    2.6 Use simple sentences

    +

    Keep sentence structure simple by putting the subject and the verb at the beginning of the sentence and by using the subject + verb + object construction. This structure helps the reader understand what the subject of the sentence is doing by placing the subject first, followed by the verb.

    +

    Avoid complex and compound sentences. They generally contain too much information for people to understand when they're scanning.

    +

    Examples of simple sentences

    +

    Write: Learn about Canada's transportation system. Find information about using paved roads, bike trails, airports and ports across the country.
    + Instead of: Canada's vast transportation system enables millions of people each year to travel throughout the country, around the world, and to work and back. From this page you can access a wealth of transportation information related to travelling and commuting.

    +

    Replace complex sentence structures with direct statements.

    +

    Examples of direct statements

    +

    Write: You have until April 30 to file your tax return.
    + Instead of: The period of time that you have to file your tax return ends on April 30.

    +

    Replace noun strings (a series of 2 or more nouns used to name something) with direct statements.

    +

    Examples of statements that avoid chains of nouns

    +

    Write: The evaluation team will submit its final report on the training program in September.
    + Instead of: The training program evaluation team will submit its final report in September.

    +

    Surround a long sentence with shorter ones because it helps people understand the long sentence.

    +

    See how this rule for using simple sentences applies in French

    + +
    +
    +
    +
    +
    +

    2.7 Use short sentences and paragraphs

    +

    Be concise. Use as few words as possible to express an idea. By being concise, you'll help everyone, even specialists, complete the task they set out to do.

    +

    Keep sentences and paragraphs short to make them easier to scan on any screen size. People who have learning disabilities may find it difficult to scan and understand long sentences and paragraphs.

    +

    Try to keep sentences under 20 words. You can do this by: 

    +
      +
    • breaking long sentences into shorter ones
      • +
    • limiting each sentence to 1 idea
      • +
    • removing unnecessary words
      • +
    +

    Examples of shortened sentences

    +

    Write: We received your request for funding and approved it.
    + Instead of: We received your request for funding, which we've thoroughly reviewed and approved in a timely manner.

    +

    Write: We'll consider any type of investment.
    + Instead of: Any type of investment will be taken into consideration.

    +

    Try to keep paragraphs to 3 sentences. You can do this by:

    +
      +
    • developing 1 main idea per paragraph
      • +
    • presenting a series of more than 2 ideas or words as a vertical list
      • +
    • using a short form for a long title instead of repeating it
      • +
    +

    See how rule for using short sentences and paragraphs applies in French

    + +
    +
    +
    +
    +
    +

    2.8 Explain references to legislation

    +

    When explaining a requirement that comes from an act or regulation, avoid mentioning the act or regulation by name. Include only the information people need to complete the task.

    +

    If you must include the name of the act or regulation, always give a plain-language description. First, explain what your audience needs to know and why they need to know more about the act or regulation. Then, you may add the reference to the act or regulation.

    +

    Examples of references to legislation

    +

    Write: You can apply for your child to become a Canadian citizen after they arrive in Canada as a permanent resident.

    +

    Related links

    + +

    Instead of: After your child arrives in Canada as a permanent resident, you can apply for citizenship on the child's behalf under section 5.1 of the Citizenship Act.

    +

    See how rule for explaining references to legislation applies in French

    + +
    +
    +
    +
    +
    +

    2.9 Check the reading level of the content

    +

    Check the reading level of your text. Make sure that it meets the reading level you're targeting based on the literacy needs of your audience. Do this every so often while you're writing content. You can use various tools to do this.

    +

    Readability tools help you check if content is too wordy or complex. Writing content at a reading level above grade 8 can make it difficult for many people to understand or complete their task.

    +
    +

    Use a readability tool

    +

    You can use a readability tool like Flesch-Kincaid to check the reading level of your English content. This tool is available as part of Microsoft Word. It generally reflects the years of education needed to understand the text.

    +

    To use Flesch-Kincaid:

    +
      +
    1. in Word 2010 and later, click the File tab, and then click Options
      2. +
    2. click Proofing
      3. +
    3. under When correcting spelling and grammar in Word, make sure the Check grammar with spelling check box is selected
      4. +
    4. select Show readability statistics  
      5. +
    +

    You can check the reading level of a whole page or just part of a page. To check the reading level:

    +
      +
    1. accept any tracked changes
      2. +
    2. place periods at the end of any bulleted items and headings (remove the periods before publishing)
      3. +
    3. highlight the text in your Word document
      4. +
    4. click the Review tab
      5. +
    5. click Spelling & Grammar
      6. +
    6. when Word has finished checking the text, it will ask whether you want to check the rest of the content
      7. +
    7. click No
      8. +
    +

    If your text contains technical terms that consist of long, multi-syllable words that you need to use for your specialized audience, remove these terms before you test the content for readability to see whether the surrounding text can be simplified. Reinsert the technical terms once you've simplified the surrounding text.

    +

    The Readability Statistics dialog box will appear and show the Flesch-Kincaid grade level.

    +
    +
    Figure 2
    + Screen capture of a readability statistics dialog box in Microsoft Word. Text version below: +
    + Figure 2 - Text version +

    A screen capture of Microsoft Word's readability statistics dialog box shows that a sample of text got a Flesch-Kincaid reading level of 5.8.

    +
    +
    +

    In newer versions of Microsoft Word, search for "Flesch-Kincaid" using the help feature.

    -
    -

    2.7 Utiliser des phrases et des paragraphes courts

    -

    Soyez concis. Utilisez un minimum de mots pour exprimer une idée. Vous aidez ainsi les gens, même les experts, à exécuter une tâche.

    -

    Raccourcissez vos phrases et vos paragraphes pour faciliter le survol d'un texte sur n'importe quelle taille d'écran.

    -

    Les personnes qui ont des troubles d'apprentissage risquent d'avoir de la difficulté à comprendre des phrases longues ou des paragraphes longs.

    -

    Essayez d'écrire des phrases de moins de 24 mots à l'aide des techniques suivantes :

    -
      -
    • découpez les phrases longues en phrases plus courtes;
      • -
    • limitez-vous à une (1) idée par phrase;
      • -
    • enlevez les mots inutiles.
      • -
    -

    Exemple de phrases simplifiées

    -

    Écrivez : Nous avons reçu et approuvé votre demande de financement.
    - Au lieu de : Nous avons reçu votre demande de financement, que nous avons soigneusement examinée et approuvée en temps opportun.

    -

    Écrivez : Nous examinerons tout type d'investissement.
    - Au lieu de : Tout type d'investissement fera l'objet d'un examen de notre part.

    -

    Essayez d'écrire des paragraphes de 3 phrases ou moins à l'aide des techniques suivantes :

    +
    +

    Follow the reading level requirements

    +

    Evaluate the reading level of content as follows for:

      -
    • développez une (1) idée principale par paragraphe;
      • -
    • utilisez des listes d'éléments pour présenter une série de plus de 2 idées ou de mots;
      • -
    • utilisez une forme plus courte au lieu de répéter un titre long.
      • +
    • navigation content (home, theme and topic pages), aim for no higher than grade 8
      • +
    • all other content intended for general audiences, aim for grade 8 or lower
      • +
    • content intended for experts, determine the appropriate grade level and apply it across all content for this audience
    -

    Voyez comment la règle sur les phrases et paragraphes courts s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -

    2.8 Expliquer les références aux lois

    -

    Lorsque vous expliquez une exigence qui découle d'un article de loi ou d'un règlement, évitez de spécifier le nom de la loi ou du règlement. Donnez simplement les renseignements dont les gens ont besoin pour accomplir la tâche.

    -

    Si vous devez inclure le nom de la loi ou du règlement, fournissez-en toujours une description en langage clair. Expliquez d'abord ce que votre public cible a besoin de savoir et pourquoi il doit en savoir plus sur cette loi ou ce règlement. Puis, vous pouvez ajouter la référence à la loi ou au règlement.

    -

    Exemples de phrase faisant référence à une loi

    -

    Écrivez : Vous pouvez faire une demande de citoyenneté pour votre enfant après son arrivée au Canada à titre de résident permanent.

    -

    Lien connexe

    +
    +

    Verify whether the content is easy to understand

    +

    Readability tools reveal the reading level of your content, but they can't tell you whether it makes sense.

    +

    To check whether your content is easy to read and understand, test it:

      -
    • Loi sur la citoyenneté, article 5.1
      • +
    • ask colleagues who aren't familiar with the subject to review the text for clarity and logic
      • +
    • work with your communications team to set up usability testing for your content
    -

    Au lieu de : Après l'arrivée de votre enfant au Canada à titre de résident permanent, vous pouvez faire une demande de citoyenneté au nom de l'enfant en vertu de l'article 5.1 de la Loi sur la citoyenneté.

    -

    Voyez comment la règle sur les références aux lois s'applique à un contenu de langue anglaise

    +

    If your content has a high reading level, or if usability testing shows low task completion, try to:

      -
    • 2.8 Explain references to legislation
      • +
    • shorten words, sentences or paragraphs, but keep words of 3 or more syllables if they're well known
      • +
    • replace technical jargon with terms that people will understand
      • +
    • remove details that people don't need to complete the task
      • +
    • replace secondary references to a program with "program" rather than using its full name or abbreviation
      • +
    • create numbered or bulleted lists for key tasks
    -
    -
    -
    -
    -
    -

    2.9 Vérifier la lisibilité de votre contenu

    -

    Vérifiez le niveau de lisibilité de votre texte. Assurez-vous de rédiger au niveau de lisibilité approprié en tenant compte de la compétence en lecture de votre public cible. Testez votre contenu pendant que vous rédigez votre texte. Vous pouvez utiliser divers outils pour le faire.

    -

    Certains outils permettent de vérifier si le contenu est trop verbeux ou complexe. Un texte qui correspond à un niveau de compétence en lecture supérieur à la 8e année peut empêcher plusieurs personnes de comprendre la tâche qu'elles doivent effectuer.

    -
    -

    Utiliser un outil d'analyse de la lisibilité

    -

    Vous pouvez utiliser gratuitement l'outil en ligne Scolarius pour vérifier le niveau de lisibilité du contenu rédigé en français. L'outil cote le texte au moyen d'un système de points fondé sur des groupes de niveau de scolarité. Consultez le site de Scolarius pour connaître les pointages associés au niveau de scolarité.

    -

    Si le texte que vous mettez à l'essai renferme des éléments sous forme de puces, ajoutez un point à la fin de chaque puce pour que l'outil évalue le texte correctement. Vous devrez supprimer ces points avant de publier le texte.

    -

    Pour utiliser cet outil :

    -
      -
    • acceptez tous les changements dans votre document pour éliminer le suivi des modifications;
      • -
    • ouvrez www.scolarius.com;
      • -
    • sélectionnez le texte à partir de votre document Word ou d'une page Web existante;
      • -
    • copiez et collez le texte dans la zone prévue;
      • -
    • cliquez sur Soumettre.
      • -
    -

    Votre texte comprend peut-être des termes techniques contenant plusieurs syllabes et qui sont importants pour un public spécialisé. Retirez ces mots du texte avant d'évaluer la lisibilité du contenu pour déterminer si le texte qui entoure ces mots peut être simplifié.

    -

    Une seule note apparaîtra pour votre contenu. Le texte devrait se trouver dans les rangs supérieurs de « primaire » ou dans les rangs inférieurs de « secondaire ».

    -
    -
    Figure 2
    - Cette saisie d'écran d'une boîte de dialogue sur les statistiques de lisibilité de Scolarius indique que le niveau de lisibilité d'un échantillon de texte est de « 94 secondaire ». -
    - Figure 2 - Version textuelle -

    Cette saisie d'écran d'une boîte de dialogue sur les statistiques de lisibilité de Scolarius indique que le niveau de lisibilité d'un échantillon de texte est de « 94 secondaire ».

    -
    -
    -
    -
    -

    Exigences de niveau de compétence en lecture

    -

    Visez le niveau de compétence en lecture suivant pour le contenu :

    -
      -
    • de navigation (pages d'accueil, de thème et de sujet) : un niveau de scolarité secondaire (pointage de 100 ou moins);
      • -
    • conçu pour le grand public : visez un niveau de scolarité secondaire (pointage de 100 ou moins);
      • -
    • conçu pour des spécialistes : établir le niveau de scolarité approprié et l'appliquer à l'ensemble du contenu.
      • -
    -
    -
    -

    Vérifier si le contenu est facile à comprendre

    -

    Les outils d'analyse de la lisibilité révèlent le niveau de compétence requis en lecture pour comprendre le texte. Ils ne vous disent pas si le texte est facile à lire et comprendre.

    -

    Pour vérifier si votre contenu est facile à lire et comprendre :

    -
      -
    • demandez à des personnes qui ont peu ou pas de connaissances sur le sujet d'examiner le texte pour voir si le message est clair et logique;
      • -
    • collaborez avec l'équipe des communications pour mettre en œuvre un test d'utilisation.
      • -
    -

    Si votre contenu correspond à un niveau de compréhension trop élevé ou si le test d'utilisation donne lieu à un faible taux de réalisation des tâches, essayez de :

    -
      -
    • réduire la taille des mots, des phrases ou des paragraphes, tout en conservant les mots de 3 syllabes ou plus qui sont bien connus de votre public cible;
      • -
    • remplacer le jargon par des termes que votre public cible comprendra;
      • -
    • éliminer les détails dont les gens n'ont pas besoin pour accomplir la tâche;
      • -
    • remplacer le nom d'un programme déjà cité par un terme court comme « le programme » au lieu d'utiliser son nom au long ou son abréviation;
      • -
    • présenter les tâches principales sous forme de listes à puces ou numérotées.
      • -
    -
    -

    Voyez comment la règle sur l'évaluation de la lisibilité du contenu s'applique à un contenu de langue anglaise

    - -
    -
    -
    +

    See how rule for measuring content for readability applies in French

    + +
    +
    +
    -

    3.0 Ton

    -
    -
    -
    -
    -

    Dans cette section

    - +

    3.0 Tone

    +
    +
    +
    +
    +

    In this section

    + +
    -
    -

    Le contenu Web du gouvernement du Canada.ca doit emprunter un ton :

    -
      -
    • direct
      • -
    • informatif
      • -
    • conversationnel
      • -
    • professionnel
      • -
    -

    Rédigez comme si vous parliez aux représentants de vos publics cibles, mais avec l'autorité d'un organisme qui fournit des renseignements dans le cadre de son mandat.

    -
    -

    3.1 Écrire directement à la personne

    -

    Adoptez un ton informel qui s'adresse aux gens directement en utilisant la deuxième personne du pluriel (vous).

    -

    Exemples d'énoncés qui utilisent la deuxième personne du pluriel pour désigner les utilisateurs

    -
      -
    • Envoyez votre demande à…
      • -
    • Pour obtenir cette prestation, vous devez…
      • -
    -

    Exception

    -

    Vous pouvez utiliser la deuxième personne du singulier (tu) si vous vous adressez à un jeune public dans le cadre d'une campagne promotionnelle.

    +

    The tone of the government's web content should be:

    +
      +
    • direct
      • +
    • informative
      • +
    • conversational
      • +
    • professional
      • +
    +

    Write as if you were talking to your audience in person, but with the authority of an institution that provides information as part of its mandate.

    +
    +

    3.1 Write directly to the person

    +

    Use an informal tone, and speak directly to people by using the second person ("you," "your").

    +

    Examples of statements that use the second person

    +
      +
    • Send your application to…
      • +
    • To get this benefit you must…
      • +
    +
    -

    S'adresser à la personne dans les titres de page, les liens et les rubriques de navigation

    -

    Dans le cas des titres de page, des liens et du texte des éléments de navigation, utilisez le pronom « votre » ou « vos » lorsqu'on peut considérer que l'objet du texte appartient aux représentants de votre public cible.

    -
    Exemples de rubriques de navigation qui s'adressent directement au public cible à l'aide de l'adjectif possessif
    +

    Address the person in page titles, links and navigation labels

    +

    For page titles, links and navigation labels, use the possessive adjective "your" when the audience might consider the item being referred to as belonging to them.

    +
    Examples of navigation labels that address the person
      -
    • Modifiez votre adresse
      • -
    • Remplacez vos cartes
      • +
    • Change your address
      • +
    • Replace your card
    -

    Si l'objet du titre de page, du lien ou de la rubrique de navigation fait référence à un renseignement général, utilisez « le », « la », « les », « un » ou « une ».

    -
    Exemples d'énoncés où l'adjectif possessif n'est pas utilisé
    +

    If the subject of the title, link or label refers to general information, use the indefinite article ("a" or "an") or no article at all.

    +
    Examples of navigation labels that don't use a possessive adjective
      -
    • Financer une nouvelle entreprise
      • -
    • Payer les frais d'inscription
      • +
    • Start a new business
      • +
    • Pay application fees
    -

    N'employez pas la première personne

    -

    Ne passez pas d'une voix directe, qui s'adresse aux gens, à une voix indirecte (comme si vous parliez en leur nom). N'utilisez pas les énoncés formulés avec le pronom « je ».

    -
    Exemple d'énoncés formulés autrement qu'avec « je »
    -

    Écrivez :

    +

    Don't use the first person

    +

    Don't switch from speaking to people to speaking on their behalf. Don't use "I" or "my" statements.

    +
    Example of statements that don't use "I" or "my"
    +

    Write:

      -
    • Comment renouveler votre passeport
      • -
    • Renouvelez votre passeport
      • +
    • How to renew your passport
      • +
    • Renew your passport
    -

    Au lieu de : Comment dois-je renouveler mon passeport?

    +

    Instead of: How do I renew my passport?

    Exception
    -

    Vous pouvez utiliser « mon », « ma », « mes » dans le contenu, les titres de page et les liens lorsqu'il s'agit de noms propres (par exemple, Mon dossier Service Canada).

    -

    Voyez comment la règle sur la manière de s'adresser directement à la personne s'applique à un contenu de langue anglaise

    - -
    -
    -
    +

    You may use "my" in content, page titles and links for proper names (such as My Service Canada Account).

    +

    See how the rule for writing directly to the audience applies in French

    + +
    +
    +
    -

    3.2 Utiliser le pronom « nous » pour désigner le gouvernement du Canada

    -

    Nous fournissons généralement des renseignements du point de vue de l'ensemble du gouvernement plutôt que de celui d'une institution en particulier.

    -

    Utilisez la première personne du pluriel (nous, notre et nos) lorsque vous rédigez au nom du gouvernement du Canada.

    -

    Exemples d'énoncé formulé avec « nous » ou « notre » pour faire référence au gouvernement du Canada

    -

    Écrivez: Si vous avez déposé une nouvelle demande de prestations au cours des 52 dernières semaines et qu'il y a des semaines payables restantes sur cette demande, nous renouvellerons automatiquement votre demande existante.
    - Au lieu de : Si vous avez déposé une nouvelle demande de prestations au cours des 52 dernières semaines et qu'il y a des semaines payables restantes sur cette demande, Service Canada renouvellera automatiquement votre demande existante.

    -

    Utilisez « gouvernement du Canada » pour :

    +

    3.2 Use "we" to refer to the Government of Canada

    +

    We generally provide information to people from the perspective of the government as a whole rather than from a specific institution.

    +

    Use "we" and "our" when writing on behalf of the Government of Canada.

    +

    Examples of statements that use "we" or "our" to refer to the Government of Canada

    +

    Write: If you started a new claim within the last 52 weeks and there are still weeks payable on that claim, we will automatically renew your existing claim.
    + Instead of: If you started a new claim within the last 52 weeks and there are still weeks payable on that claim, Service Canada will automatically renew your existing claim.

    +

    Use "Government of Canada" when:

      -
    • décrire la position du Canada sur un sujet lié à une autre administration (pays, province, territoire, ville, etc.) mentionnée dans le texte;
      • -
    • expliquer le rôle du Canada à l'égard d'un sujet ou d'une question.
      • +
    • describing Canada's stance on a topic relative to another named jurisdiction (country, province, territory city, etc.)
      • +
    • explaining Canada's role with respect to a topic or issue
    -

    Utilisez le nom d'une institution en particulier seulement dans les situations suivantes :

    +

    Use the name of a specific institution in situations when the:

      -
    • l'institution contactera la personne;
      • -
    • la personne doit contacter l'institution par téléphone, par courrier ou en ligne;
      • -
    • le rôle de l'institution dans le contexte d'un processus est pertinent pour la tâche à accomplir.
      • +
    • institution will be contacting the person
      • +
    • person needs to contact the institution by phone, mail or online process
      • +
    • role of the institution in a process is relevant to the task
    -

    Exemples d'énoncés qui mentionnent une institution en particulier

    +

    Examples of statements that refer to specific institutions

      -
    • L'Agence du revenu du Canada vous indiquera si vous devez rembourser des prestations.
      • -
    • L'Agence canadienne d'inspection des aliments accorde des permis pour certains produits de la viande.
      • -
    • Toutes les drogues d'usage restreint et les drogues contrôlées nécessitent un permis d'importation de Santé Canada.
      • +
    • The Canada Revenue Agency will inform you if you have to repay benefits.
      • +
    • The Canadian Food Inspection Agency gives permits for some meat products.
      • +
    • All restricted or controlled drugs need an import permit from Health Canada.
    -

    Ne faites pas référence à votre site Web sur les pages de votre site.

    -

    Exemples d'énoncé qui omet la référence à Canada.ca sur le site Canada.ca

    -

    Écrivez : Déterminez si vous êtes admissible.
    - Au lieu de : Obtenez des renseignements relatifs à l'admissibilité sur le site Canada.ca.

    +

    Don't include references to your website on your website.

    +

    Example of a statement that doesn't refer to Canada.ca on the Canada.ca site

    +

    Write: Determine whether you're eligible.
    +     Instead of: Get more information about eligibility on the Canada.ca website.

    -

    Désigner les tierces parties

    -

    Ne donnez pas de renseignements au nom d'une autre organisation. Ne reproduisez pas les renseignements fournis sur le site Web d'une autre organisation. Dirigez plutôt les gens vers son site Web pour obtenir ces renseignements.

    -

    Nommez l'autre organisation par son nom lorsque votre contenu y fait référence.

    -
    Exemple d'énoncé faisant référence à une tierce partie
    -

    Écrivez : Si vous prévoyez vous rendre aux États-Unis ou transiter par les États-Unis, (en anglais seulement), renseignez-vous sur les règles édictées par l'organisme U.S. Customs and Border Protection.
    - Au lieu de : Si vous prévoyez vous rendre aux États Unis, travailler, étudier, mener des activités commerciales, immigrer ou transiter par les États Unis, vous pourriez faire l'objet d'une inspection ou être tenus de soumettre des documents de voyage. Visitez le site Web de U.S. Customs and Border Protection (en anglais seulement) pour des renseignements sur la U.S. Western Hemisphere Travel Initiative et les exigences pour entrer aux États Unis.

    +

    Third parties

    +

    Don't provide information on behalf of another organization. Don't duplicate information provided on another organization's website. Instead, direct people to that website to get the information.

    +

    Name the other organization when your content refers to it.

    +
    Example of a reference to a third party
    +

    Write: If you plan to travel to or transit through the United States, find out about the rules you need to follow from U.S. Customs and Border Protection.
    + Instead of: If you plan to travel to or transit through the U.S., CBSA encourages you to visit the U.S. Customs and Border Protection website for information on the U.S. Western Hemisphere Travel Initiative, and the requirements for entering or returning to the U.S.

    -

    Voyez comment la règle sur la manière de désigner le gouvernement du Canada s'applique à un contenu de langue anglaise

    +

    See how the rule for referring to the Government of Canada applies in French

    -
    +
    -

    3.3 Exprimer une obligation ou une recommandation

    -

    Le gouvernement publie des règles, des renseignements et des instructions qui relèvent d'une loi. Nous fournissons également des conseils sur la façon de les suivre.

    +

    3.3 Expressing an obligation or a recommendation

    +

    As a government organization, we often publish rules, information and instructions that are set out in law. We also provide advice on how to follow them.

    -

    Exprimer une obligation

    -

    Lorsque vous informez les gens de ce que la loi exige d'eux, mentionnez ce qu'ils doivent faire au lieu de préciser ce qu'ils sont « légalement tenus de faire ».

    -

    Utilisez un vocabulaire directif pour exprimer une obligation.

    -
    Exemple d'énoncé exprimant une obligation
    -

    Écrivez : Vous devez remplir le questionnaire.
    - Au lieu de : La Loi sur la statistique exige que vous remplissiez le présent questionnaire.

    +

    Express an obligation

    +

    When telling people about:

    +
      +
    • what the law requires them to do, use "must" instead of "legally required to" or similar language
      • +
    • an administrative requirement, use "need to"
      • +
    +
    Example of statements that express legal and administrative requirements
    +

    Legal: To be eligible for compassionate care benefits, you must be able to show that…
    + Administrative: After you apply online, you'll need to provide us with the following documents before we can finalize your claim.

    -

    Exprimer une recommandation

    -

    Lorsque vous dites aux gens qu'une chose est permise sans être obligatoire, utilisez un vocabulaire qui dénote la permission ou la possibilité, tel que « pourriez » ou « pouvez ».

    -

    Voyez comment la règle sur la manière d'exprimer une obligation ou une recommandation s'applique à un contenu de langue anglaise

    +

    Express a recommendation

    +

    When telling people that they're allowed to perform an action:

    -
    -
    -
    +

    See how the rule for expressing an obligation or a recommendation applies in French

    + +
    +
    +
    -

    4.0 Style de présentation

    +

    4.0 Style

    -

    Dans cette section

    +

    In this section

    -

    Sur le Web, un style de présentation du contenu allégé est plus facile à lire. Simplifiez la présentation et évitez la ponctuation excessive ou complexe. Le formatage (tel que les caractères gras, l'italique ou le soulignement) et la ponctuation complexe peuvent distraire les lecteurs et nuire à la compréhension.

    +

    On the web, less is more. Keep style and punctuation simple. Formatting (such as bold, italics and underlining) and complex punctuation can be distracting and make reading difficult for many people.

    -

    4.1 Majuscules et ponctuation

    -

    Ayez recours aux styles décrits ci-après pour les majuscules et la ponctuation dans les textes, les liens et les applications.

    +

    4.1 Capitalization and punctuation

    +

    Use these styles for capitalization and punctuation of content in text, links and applications.

    +

    Capitalize the main words of:

    +
      +
    • titles of official publications (such as reports, frameworks, strategies and plans)
      • +
    • institution names
      • +
    • program names
      • +
    • titles of policy instruments
      • +
    • titles of legislation (in other words, acts and regulations)
      • +
    • Government of Canada
      • +
    +

    Lowercase the short form of proper names.

    +

    Example of proper names and their short forms

    +

    Full names: Agriculture and Agri-Food Canada, Canada Pension Plan, the Public Service of Canada
    + Short form: the department, the plan, the public service

    +
    All caps
    +

    Don't capitalize all the letters in a word.

    +

    Exceptions

    +
      +
    • Abbreviations (although avoid them unless they're necessary)
      • +
    • Military exercise or operation names (for example, Operation PROVISION)
      • +
    -

    Mot tout en majuscules

    -

    Évitez d'écrire toutes les lettres d'un mot en majuscules.

    -
    Exceptions
    +

    Titles, headings and subheadings

      -
    • Abréviations (à utiliser seulement si nécessaire)
      • -
    • Noms d'exercices ou d'opérations militaires (par exemple, l'opération PROVISION)
      • -
    • Le nom de famille de l’auteur dans une notice bibliographique (NOM DE FAMILLE, Prénom.)
      • +
    • Capitalize the first letter of the first word (sentence case) of all page titles, headings, subheadings, table captions and table headers
      • +
    • Capitalize proper nouns in page titles, headings and subheadings
      • +
    • Don't use punctuation at the end of page titles, headings and subheadings
    -
    -
    -

    Titres et sous-titres

    -

    Omettez la ponctuation à la fin des titres, titres de sections, sous-titres, légendes et en-têtes de tableaux.

    Exceptions
      -
    • Cette règle ne s'applique pas aux slogans.
      • -
    • Utilisez le point d'interrogation uniquement lorsqu'on demande aux gens de fournir des renseignements dans un formulaire, un questionnaire ou un sondage.
      • +
    • You may use punctuation at the end of page titles, headings and subheadings for campaign slogans
      • +
    • Only use question marks when asking for information in a form, wizard, survey or quiz
    -
    Exemple de point d'interrogation dans un formulaire, un questionnaire ou un sondage
    +
    Example of question marks being used in forms, wizards, surveys or quizzes
    -
    Figure 3
    - Une page Web contenant un sous-titre écrit sous forme de question. +
    Figure 3
    + A web page containing a heading with a question mark. Text version below:
    - Figure 3 - Version textuelle -

    Une page Web contenant un sous-titre écrit sous forme de question.

    + Figure 3 - Text version +

    A web page containing a heading with a question mark.

      -
    • Titre de page +
    • Title of page
        -
      • Déterminez si vous devez facturer la TPS/TVH
        • +
      • Find out if you need to charge GST/HST
      • -
    • Résumé de la page en langage clair et simple +
    • Plain language summary of page
        -
      • Répondez à quelques questions afin de savoir si vous devez facturer ou percevoir la taxe et vous inscrire pour obtenir un numéro de compte de TPS/TVH. Les entreprises à faible revenu et celles qui offrent certains biens et services pourraient ne pas avoir à facturer la TPS/TVH.
        • +
      • Answer a few questions to find out if you need to charge or collect the tax and register to get a GST/HST account number. Businesses with lower revenue and those that deal in certain goods and services might not need to charge tax.
      • -
    • Sous-titre +
    • Heading
        -
      • Est-ce que vous ou votre organisation avez déjà un compte de TPS/TVH?
        • +
      • Do you or your organization already have a GST/HST account?
      • -
    • 2 choix de réponse à sélectionner +
    • 2 clickable options
        -
      • Oui
        • -
      • Non
        • +
      • Yes
        • +
      • No
      • -
    • Bouton pour poursuivre la tâche +
    • Action button to continue process
        -
      • Suivant
        • +
      • Next
    -
    -

    Listes d'éléments

    +
    +

    Lists

      -
    • Évitez d'avoir plus d'une (1) phrase par élément.
      • -
    • Ne mettez pas de point d'exclamation ou d'interrogation après les éléments d'une liste.
      • +
    • Avoid having more than 1 sentence in a single list item
      • +
    • Don't end the list items with any punctuation
    -

    Lorsque les listes à puces forment des éléments distincts sur le plan grammatical ou si elles sont introduites par un sous-titre, mettez la première lettre de chaque élément en majuscule.

    -
    Exemples de listes à puces indépendantes
    -

    En demande

    +

    When list items are grammatically independent of each other or follow a heading, capitalize the first letter of each list item.

    +
    Example of punctuation in independent list items
    +

    Most requested

    -

    Lorsque le sens des éléments d'une liste à puces dépend d'une phrase d'introduction, mettez la première lettre de chaque élément en minuscule, sauf s'il s'agit d'un nom propre.

    -
    Exemples d'une liste à puces dont le sens dépend d'une phrase d'introduction
    -

    Les représentants peuvent être :

    +

    When the meaning of list items depends on a lead-in phrase, don't capitalize the first letter of each unless it's a proper name.

    +
    Example of punctuation in interdependent list items preceded by a colon
    +

    Representatives can be:

      -
    • des consultants en citoyenneté ou en immigration;
      • -
    • des avocats;
      • -
    • d'autres représentants.
      • +
    • citizenship or immigration consultants
      • +
    • lawyers
      • +
    • other representatives
    -

    Voyez comment la règle sur les majuscules et la ponctuation s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -
    -

    4.2 Soulignement, caractères gras et italique

    -

    Le style de présentation doit faire ressortir les renseignements les plus importants sur la page Web.

    -

    Ne combinez pas les styles, comme le soulignement et les caractères gras, sauf s'il s'agit du texte en hyperlien sur une page de sujet.

    -

    Soulignement

    -

    Utilisez le soulignement seulement pour les liens.

    -

    Caractères gras

    -

    Utilisez les caractères gras pour mettre du texte en évidence, mais utilisez-les avec modération: plus vous faites usage de cette mise en forme, moins elle est efficace.

    -

    Italique

    -

    Les personnes qui ont une dyslexie ou d'autres troubles de lecture pourraient avoir de la difficulté à lire un texte en italique.

    -

    N'utilisez pas l'italique :

    -
      -
    • à des fins de mise en page ou de décoration;
      • -
    • pour faire ressortir un mot ou une phrase (utilisez plutôt les caractères gras avec modération);
      • -
    • pour de longs passages, des citations, par exemple;
      • -
    • dans les titres de page.
      • -
    -

    Consultez Le guide du rédacteur dans les cas suivants :

    -
      -
    • les titres de livres, de journaux, de revues et d'œuvres d'art (article 5.2.1);
      • -
    • les titres de lois (article 5.2.2);
      • -
    • les mots ou abréviations en latin (article 5.3.3);
      • -
    • les mots en langue étrangère (article 5.3.4);
      • -
    • les lettres de l'alphabet (article 5.4.1).
      • -
    -

    Voyez comment la règle sur les caractères gras, l'italique et le soulignement s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -
    -

    4.3 Symboles

    -

    Certains symboles rendent le contenu Web difficile à lire tandis que d'autres améliorent la lisibilité du texte. Faites vos recherches pour déterminer si un large public peut comprendre le symbole avant de l'utiliser.

    -

    Perluète

    -

    Utilisez l'esperluette (&) seulement pour des noms propres lorsqu'elle fait partie du nom de la société

    -

    Pourcentage

    -
      -
    • 20 % (et non 20 pour cent, 20 p. 100 ou 20 pour cent)
      • -
    • un quart (et non ¼)
      • -
    • la moitié (et non ½)
      • -
    -

    Unité monétaire

    -
      -
    • 100 $ par mois
      • -
    -

    Voyez comment la règle sur les symboles s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -
    -

    4.4 Abréviations, acronymes et référence

    -

    N'utilisez pas une abréviation, un acronyme ou un sigle, sauf s'il est mieux connu du grand public que le mot dans sa forme au long. Par exemple :

    -
      -
    • REER
      • -
    • CELI
      • -
    • T4
      • -
    -

    Cherchez des mots-clés courants

    -

    Consultez vos données d'analyse pour savoir quels mots-clés votre public cible utilise pour trouver votre contenu.

    -

    Si un terme formé de plusieurs mots revient plus d'une fois dans une page Web, écrivez-le au long la première fois qu'il figure sur la page. Lorsque vous y faites référence par la suite :

    -
      -
    • écrivez « le programme », « le plan », « le fonds », etc., avec une lettre initiale minuscule, au lieu de répéter le terme en toutes lettres ou d'utiliser son acronyme ou une abréviation;
      • -
    • employez une abréviation comme référence secondaire seulement si les données d'analyse ou les tests d'utilisation révèlent qu'elle est bien connue et couramment utilisée comme mot-clé dans les moteurs de recherche.
      • -
    -

    Il faut toujours écrire une abréviation au long la première fois que vous l'utilisez sur une page Web.

    -

    Exemples d'énoncés sans abréviation ni acronyme

    -

    Écrivez : Il y a 15 centres de contact avec la clientèle dans l'ensemble du Canada.
    - Au lieu de : Il y a 15 CCC dans l'ensemble du Canada.

    -

    Écrivez : La loi consolide l'engagement du gouvernement du Canada…
    - Au lieu de : La LCALE consolide l'engagement du gouvernement du Canada...

    -

    Ajoutez les abréviations connus de vos publics cibles dans vos métadonnées (comme dans le champ de la métabalise Description) pour que les moteurs de recherche repèrent plus facilement votre page Web.

    -

    Évitez les abréviations et acronymes en repensant le contenu

    -

    Si votre texte compte de nombreuses abréviations ou plusieurs acronymes, repensez la structure du contenu. Envisagez de grouper les parties du contenu liées entre elles sous des rubriques et des sections distinctes.

    -

    Par exemple, lorsque vous énoncez des obligations juridiques, citez la loi une fois (au besoin), puis expliquez ce que la personne doit faire pour se conformer à cette loi. En raison du contexte, la personne saura que si elle doit faire quelque chose, c'est que la loi l'exige. N'utilisez pas l'acronyme de la loi. Il rend le texte plus difficile à lire.

    -

    Assurez-vous que le sujet est clos avant de mention d'autres lois et obligations juridiques.

    -
    -

    Citer des exemples

    -

    Évitez d'utiliser les abréviations « p. ex. » et « c.-à-d. ». Choisissez des options plus claires :

    -

    Écrivez : par exemple, tel que ou comme
    - Au lieu de : p. ex. 

    -

    Écrivez : c'est-à-dire
    - Au lieu de : c.-à-d. 

    -

    Vous pouvez utiliser ces abréviations quand l'espace est restreint (par exemple, dans un tableau ou dans un schéma).

    +
    +

    Links

    +

    Use lower case for a link in a sentence, unless the link contains a proper name.

    -

    Voyez comment la règle sur les abréviations et les acronymes s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -
    -

    4.5 Forme contractée

    -

    Cette règle s’applique en anglais plutôt qu’en français. La forme contractée en français s’applique par défaut. En anglais, elle est facultative, mais elle est recommandée pour simplifier la lecture.

    -

    Voyez comment la règle de Forme contractée s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -
    -

    4.6 Nombres

    -

    Principes généraux

    -
      -
    • Écrivez les nombres en chiffres arabes (0, 1, 2, 3), sauf s'ils se trouvent dans : -
        -
      • un nom propre (la ville de Trois-Rivières);
        • -
      • un titre (Trois Hommes dans un bateau);
        • -
      • une expression (un jour, tout ira mieux).
        • -
      -
      • -
    • Conservez les chiffres romains pour les noms propres (la partie II de la Loi sur la pension dans la fonction publique).
      • -
    • Jumelez le chiffre et le mot qui désigne un grand nombre, et insérez une espace insécable (Ctrl+Shift+barre Espace) entre les deux (5 millions, 20 ans).
      • -
    • Écrivez « premier », « deuxième », « troisième » et ainsi de suite jusqu'à « neuvième ».
      • -
    • Écrivez l'exposant dans la même taille de police pour : -
        -
      • le premier jour du mois (1er décembre);
        • -
      • les adjectifs numéraux au-delà de 10 (10e, 50e, 150e).
        • -
      -
      • -
    • Utilisez « de… à… » et « entre… et… » plutôt qu'un tiret pour désigner une échelle de chiffres (par exemple, de 4 000 $ à 10 000 $ ou entre 4 et 10 ans).
      • -
    • Il n'est pas nécessaire de répéter l'abréviation ou le symbole si une espace le sépare du chiffre (par exemple, de 3 à 6 ml, de 10 à 12 %).
      • -
    -

    Âges

    -
      -
    • Adultes âgés de 30 ans et plus
      • -
    • Les enfants âgés de 0 à 10 ans (et non « 0–10 ans »)
      • -
    • Les participants ont entre 0 et 10 ans
      • -
    -

    Voyez comment la règle sur le style de présentation des nombres s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -
    -

    4.7 Dates

    -
      -
    • Écrivez « 31 juillet 2016 » ou « 31 juillet » si l'année est déjà clairement indiquée; -
        -
      • ne mettez pas de virgule entre la date et l'année (par exemple, 31 juillet 2016).
        • -
      -
      • -
    • Insérez une espace insécable entre le jour et le mois.
      • -
    • Utilisez le format numérique pour les dates seulement si l'espace est restreint (par exemple, dans un tableau); -
        -
      • écrivez aaaa-mm-jj;
        • -
      • clarifiez ce que le format représente dans le texte qui l'accompagne (par exemple, dans les notes ou la légende).
        • -
      -
      • -
    • Abrégez les noms de mois uniquement si l'espace est restreint (par exemple, janv., févr., avr.).
      • -
    -

    Périodes de temps

    -
      -
    • Utilisez « de… à… », « du… au… » et « entre… et… » plutôt qu'un tiret pour désigner une période de temps. Par exemple : -
        -
      • année civile 2014;
        • -
      • du lundi au vendredi;
        • -
      • du 29 mars au 4 avril;
        • -
      • de janvier à mars 2016 (au lieu de T1, T2, T3, T4);
        • -
      • exercice 2015 à 2016.
        • -
      -
      • -
    • Pour les périodes de temps comme les exercices financiers, expliquez dans le texte qui l'accompagne à quoi correspond cette période. Par exemple : -
        -
      • Ce rapport couvre l'exercice 2015 à 2016. Un exercice financier s'étend du 1er avril au 31 mars.
        • -
      -
      • -
    -

    Voyez comment la règle sur style de présentation des dates s'applique à un contenu de langue anglaise

    - -
    -
    -
    -
    -
    -

    4.8 Heures

    -
      -
    • 16 h 30
      • -
    • De 9 h à 17 h
      • -
    -

    Voyez comment la règle sur le style de présentation des heures s'applique à un contenu de langue anglaise

    +
    +

    Commas

    +

    Remove unnecessary commas to make web content easier to read:

    +
      +
    • avoid multiple commas in a sentence by breaking it up into a few shorter sentences
      • +
    • place a comma before "and" and "or" only if it will help people understand a list of items in a sentence
      • +
    +
    +
    +

    Hyphen and dashes

    +

    Hyphens and dashes have different uses. They aren't interchangeable. Avoid using dashes:

    +
      +
    • use a hyphen (-) to join words together
      • +
    • use "to" instead of the en dash (–) in a span or range of numbers, dates or time
      • +
    • use a comma (,) to emphasize or frame an idea instead of an em dash (—)
      • +
    • simplify your sentence instead of using em dashes
      • +
    +
    +

    See how the rule for capitalization and punctuation applies in French

    -
    +
    -
    -

    4.9 Numéros de téléphone

    -

    Utilisez des tirets insécables (Ctrl+Shift+Tiret) pour les numéros de téléphone. Par exemple :

    -
      -
    • pour obtenir de l'aide, composez le 1-800-622-6232
      • -
    • vous pouvez nous joindre au 819-123-4567
      • -
    • 613-999-9900 poste 123
      • -
    -

    Voyez comment la règle sur le style de présentation numéros de téléphone s'applique à un contenu de langue anglaise

    - -
    -
    -
    +
    +
    +

    4.2 Underlining, bold and italics

    +

    Formatting must support the most important information on the page.

    +

    Don't combine styles, like underlining and bold formatting, unless it's part of the hyperlinked text found on a topic page.

    +

    Underlining

    +

    Use underlining for links only.

    +

    Bold

    +

    Use bold for emphasis, but use it sparingly: the more you use it, the less effective it is.

    +

    Italics

    +

    People with dyslexia or other reading disorders may find it difficult to read italicized text.

    +

    Don't use italics:

    +
      +
    • for design or decorative purposes
      • +
    • to emphasize a word or phrase (use bold sparingly instead)
      • +
    • for long passages of text, such as quotations
      • +
    • in page titles
      • +
    +

    Follow The Canadian Style's rules for applying italics for the following:

    +
      +
    • French and foreign words (article 6.03)
      • +
    • Latin terms and abbreviations (article 6.04)
      • +
    • titles of publications (including acts and legislation) and works of art (article 6.05)
      • +
    • legal references (article 6.06)
      • +
    • mathematical, statistical and scientific material (article 6.11)
      • +
    +

    See how the rule for bold, italics and underlining applies in French

    + +
    +
    +
    +
    +
    +

    4.3 Symbols

    +

    Some symbols make web content more difficult to read while others improve readability. Research whether they're understood by a wide audience before using them.

    +

    Ampersand

    +
      +
    • Spell out the word "and" instead of using an ampersand (&)
      • +
    • Use the ampersand only for proper names when it's part of a company name and in certain abbreviations, including: +
        +
      • R&D (research and development)
        • +
      • O&M (operating and maintenance)
        • +
      +
      • +
    +

    Percent

    +
      +
    • 20% (not 20 percent)
      • +
    • A quarter or one quarter (not ¼)
      • +
    • Half (not ½)
      • +
    +

    Currency

    +
      +
    • $100 per month
      • +
    +

    See how the rule for symbols applies to content in French

    + +
    +
    +
    +
    +
    +

    4.4 Abbreviations and acronyms

    +

    Don't use an abbreviation or acronym unless it's better known to the widest audience than its long-form equivalent. For example:

    +
      +
    • EI
      • +
    • RCMP
      • +
    • T4
      • +
    +

    Research common keywords

    +

    Check your analytics to find out what keywords your audiences are using to find your content.

    +

    If you have to use a multi-word term more than once on a web page, use the full term the first time you use it. For any further uses of the term:

    +
      +
    • use a short form such as "the program" or "the plan," in lower case instead of repeating the full term or using an abbreviation
      • +
    • only use an abbreviation for a secondary reference if analytics data or usability testing determines that people often use and search for the abbreviation
      • +
    +

    Always spell out an abbreviation the first time you use it on a page. 

    +

    Example of statements that avoid the use of abbreviations and acronyms

    +

    Write: There are 15 client contact centres across Canada.
    + Instead of: There are 15 CCCs across Canada.

    +

    Write: The act strengthens the Government of Canada's commitment to…
    + Instead of: The EEA strengthens the Government of Canada's commitment to…

    +

    Include abbreviations that your audience uses in your metadata (for example, in the description field) to help search engines find your page more easily.

    +

    Avoid abbreviations and acronyms by rethinking the content

    +

    If your content contains a lot of abbreviations and acronyms, rethink its structure. Consider placing related content under distinct headings and sections.

    +

    For example, when introducing legal requirements, use the title of the act once, if necessary, and then talk about what people "must" do. The context will make it clear that the things they "must" do are requirements under the act. Don't use the abbreviation for the act, because it makes the text harder to follow.

    +

    Close the topic before referring to other obligations under different legislation.

    +
    +

    Latin abbreviations

    +

    Avoid using e.g. and i.e. Use clearer alternatives instead, for example:

    +

    Write: for example, such as, or like
    + Instead of: e.g.

    +

    Write: that is, in other words
    + Instead of: i.e.

    +

    You may use these abbreviations when space is limited, for example, in a table or a figure.

    -
    -

    4.10 Adresses

    -
    -

    Adresses postales

    +

    See how the rule for abbreviations and acronyms applies in French

    + +
    +
    +
    +
    +
    +

    4.5 Contractions

    +

    Use contractions that people use when they speak. They're easier to scan than the full form.

    +

    Use most positive contractions of auxiliary verbs. For example:

    +
      +
    • you've (you have), you're (you are), you'll (you will) or you'd (you would)
      • +
    • we've (we have), we're (we are), we'll (we will) or we'd (we would)
      • +
    +

    Use some negative contractions of auxiliary verbs. For example:

    +
      +
    • can't (cannot)
      • +
    • don't (do not) or didn't (did not)
      • +
    • won't (will not)
      • +
    • isn't (is not)
      • +
    • weren't (were not) or wasn't (was not)
      • +
    • aren't (are not)
      • +
    +

    Use, but don't confuse:

    +
      +
    • its (possessive) and it's (it is)
      • +
    • they're (they are) and their (possessive)
      • +
    +

    Uncommon or more complex contractions can be harder for people with low literacy skills to understand.

    +

    Don't use:

    +
      +
    • should've (should have) or could've (could have)
      • +
    • shouldn't (should not), couldn't (could not) or wouldn't (would not)
      • +
    • mightn't (might not)
      • +
    • mustn't (must not)
      • +
    • it'll (it will)
      • +
    +

    Negative contractions: exceptions

    +

    Don't use contractions when there is a critical difference between two things, for example, between doing and not doing something.

    +
    Example of statements showing differences that are critical and not critical
    +

    Critical: Do not drive while taking this medicine.
    + Not critical: Most people don't have reactions to the flu vaccine.

    +

    See how the rule for contractions applies in French

    + +
    +
    +
    +
    +
    +

    4.6 Numbers

    +

    General

    +
      +
    • Write numbers as numerals (0, 1, 2, 3, etc.), except in:
        -
      • Abrégez le type de rue et l'orientation de la rue.
        • -
      • Utilisez l'indicatif à deux lettres pour désigner la province ou le territoire.
        • -
      • Insérez 2 espaces entre l'abréviation de la province ou du territoire et le code postal.
        • -
      • Écrivez le code postal avec des lettres en majuscules.
        • -
      • N'utilisez aucune ponctuation, sauf un trait d'union entre le numéro d'unité ou de bureau et le numéro municipal.
        • +
      • proper names (First Baptist Church)
        • +
      • titles (Three Men in a Boat)
        • +
      • figurative expressions (one day, things will be better)
      -

      [Nom de l'organisation ou de la personne]
      - [Renseignements supplémentaires]
      - [Unité ou bureau]-[Numéro municipal] [Type de rue abrégé] [Nom de la rue] [Orientation de la rue abrégée]
      - [Ville] [Indicatif à deux lettres de la province ou territoire]  [Code postal]

      -
      Exemple d'une adresse postale
      -

      Intégrité
      - Direction générale de la surveillance
      - Services publics et approvisionnement Canada
      - Portage III Tour A 10A1
      - 105-11 rue Laurier
      - Gatineau QC  K1A 0S5

      -
    -
    -

    Adresses de courriel

    -

    Écrivez les adresses de courriel au long au lieu de les intégrer dans le contenu.

    -

    Écrivez :

    + +
  • Keep Roman numerals when used in proper names (Canada Gazette, Part II)
    • +
  • Place a non-breaking space (Ctrl+Shift+Spacebar) between all numeral and word combinations ($5 million, 20 years)
    • +
  • Write first, second, third, and so on, up to and including ninth
    • +
  • Use the ordinal indicator in the same text size (not in superscript) for numbers 10 and above (10th, 50th, 150th)
    • +
  • Use "to" instead of an en dash in number ranges (for example, $4,000 to $10,000, 4 to 10 years)
    • + +

    Ages

    +
      +
    • Adults aged 30 or more
      • +
    • People 30 to 65 years old
      • +
    • A 10-year-old child
      • +
    +

    See how the rule for numbers applies in French

    + +
    +
    +
    +
    +
    +

    4.7 Dates

    +
      +
    • Write dates without an ordinal indicator ("st," "nd," "rd," "th")
      • +
    +

    Write: July 31, 2016, or just July 31 if the year is already clear
    + Instead of: July 31st, 2016, or July 31st

    +
      +
    • Use non-breaking spaces between the month and the day
      • +
    • Use the numeric date format only when space is limited (for example, in a table)
        -
      • Veuillez soumettre votre demande par courriel à abcxyz@canada.ca.
        • -
      • Pour soumettre votre demande par courriel : abcxyz@canada.ca.
        • +
      • write yyyy-mm-dd
        • +
      • explain the format in surrounding text (for example, notes, legends)
      -

      Au lieu de : Contactez-nous par courriel pour soumettre votre demande.

      -
    + +
  • Capitalize the first letter of the month (for example, January, February, March)
    • +
  • Abbreviate month names when space is limited (for example, Jan, Feb, Mar)
    • + +

    Date ranges

    +
      +
    • Use "to" instead of an en dash in date ranges. For example: +
        +
      • calendar year 2014
        • +
      • Monday to Friday
        • +
      • March 29 to April 4
        • +
      • fiscal year 2015 to 2016
        • +
      • January to March 2016 (instead of Q1, Q2, Q3 or Q4)
        • +
      +
      • +
    • For date ranges like fiscal years, explain what period the range covers in surrounding text. For example: +
        +
      • This report covers the 2015 to 2016 fiscal year. A fiscal year runs from April 1 to March 31.
        • +
      +
      • +
    +

    See how the rule for dates applies in French

    + +
    +
    +
    +
    +
    +

    4.8 Times

    +
      +
    • 4:30 pm
      • +
    • 9 am to 5 pm
      • +
    +

    See how the rule for times applies in French

    + +
    +
    +
    +
    +
    +

    4.9 Phone numbers

    +

    Use non-breaking hyphens (Ctrl+Shift+Hyphen) in phone numbers. For example:

    +
      +
    • if you need help, call 1-800-622-6232
      • +
    • 613-999-9900 ext. 123
      • +
    +

    See how the rule for phone numbers applies in French

    + +
    +
    +
    +
    +
    +

    4.10 Addresses

    +
    +

    Mailing addresses

    +
      +
    • Abbreviate street types, street direction and province or territory
      • +
    • Use the correct abbreviations for provinces and territories
      • +
    • Insert 2 spaces between the province or territory abbreviation and the postal code
      • +
    • Use uppercase to write the letters in the postal code
      • +
    • Don't use punctuation except for a hyphen between the unit designator and the civic number
      • +
    +

    [Organization name or person name]
    + [Additional delivery information]
    + [Suite or office]-[Civic number] [Street name] [Abbreviated street type] [Abbreviated street direction]
    + [City] [Two-letter province or territory abbreviation] [Postal code]

    +

    Example of a mailing address.

    +

    Integrity Regime
    + Departmental Oversight Branch
    + Public Services and Procurement Canada
    + Portage III Tower A 10A1
    + 105-11 Laurier St
    + Gatineau QC  K1A 0S5

    -

    Voyez comment la règle sur le style de présentation de Adresses s'applique à un contenu de langue anglaise

    +
    +

    Email addresses

    +

    Spell out email addresses instead of embedding them within your text.

    +

    Write:

    + +

    Instead of: Email us to submit a request.

    +
    +

    See how the rule for addresses applies in French

    + +
    +
    +
    +
    +
    +

    4.11 Words and expressions in transition

    +

    Words and expressions in transition are those written commonly in 2 or more different ways. Reduce confusion by using the following spellings:

      -
    • 4.10 Addresses
      • +
    • website (not "web site")
      • +
    • web page (not "webpage")
      • +
    • web (not "Web")
      • +
    • email (not "e-mail")
      • +
    • online (not "on line")
    +

    See how the rule for words and expressions in transition applies in French

    +

    This rule doesn't apply to content in French.

    -
    +
    -

    5.0 Structure du contenu

    +

    5.0 Content structure

    -

    Dans cette section

    -
    -

    La structure et la disposition des éléments du contenu aident les gens à trouver rapidement ce qu'ils cherchent. Les éléments de contenu comprennent :

    +

    The structure and layout of content components help people find what they need quickly. Content components include:

      -
    • le titre de la page;
      • -
    • les titres de sections;
      • -
    • les listes verticales;
      • -
    • les tableaux.
      • +
    • page title  
      • +
    • headings
      • +
    • lists
      • +
    • tables
    -

    Structurer le contenu dans une page Web

    -

    Assurez-vous :

    +

    On a web page

    +

    Make sure you:

      -
    • de subdiviser la page en sections logiques pour donner un aperçu de l'information qu'elle contient;
      • -
    • d'organiser la page en fonction d'une tâche en affichant seulement les renseignements dont les gens ont besoin pour accomplir cette tâche.
      • +
    • divide the page into logical sections to give an overview of the information it contains
      • +
    • focus on the task and show only the information people need to complete the task
    -

    Structurez efficacement les éléments du contenu afin que votre page soit plus :

    +

    Structure the content components efficiently to make your page:

      -
    • visible pour les moteurs de recherche et plus facile à trouver;
      • -
    • facile à voir sur les appareils mobiles.
      • +
    • more visible to search engines and easier to find
      • +
    • easier to view on mobile devices
    -

    Structurer le contenu sur plusieurs pages Web

    -

    Pensez à la démarche de la personne lorsqu'elle parcourt votre texte. Si :

    +

    Across multiple web pages

    +

    Think about how a person will journey through the content. If:

      -
    • votre page Web aborde trop de sujets, il est possible qu'il soit plus approprié de la diviser en plusieurs pages;
      • -
    • plusieurs de vos pages Web renferment du contenu lié au même sujet, envisagez de les combiner en une seule page.
      • +
    • your web page content covers too many topics, you might need to divide it into several pages
      • +
    • several web pages contain pieces of content that relate to the same subject, consider combining them into a single page
    -

    5.1 Rédiger des titres et sous-titres de page descriptifs

    -

    Assurez-vous que votre titre de page décrit bien ce que la page contient. Un titre descriptif est important parce que les moteurs de recherche affichent souvent le titre sans contexte dans la liste des résultats de recherche.

    -

    La plupart des gens survolent les titres de page et les sous-titres pour repérer des mots-clés qui confirment qu'ils ont trouvé le contenu recherché.

    -

    Les personnes qui utilisent les technologies d'aide peuvent se servir d'un logiciel pour entendre les mots clés ou utiliser les raccourcis du clavier pour accéder à tous les titres de la page.

    -

    Lorsque vous rédigez un titre de page ou un sous-titre, assurez-vous que le titre :

    +

    5.1 Write useful page titles and headings

    +

    In your page title, accurately describe what's on the page. A descriptive page title is important because search engines often display the title without the context that the rest of the page provides.

    +

    Most people scan page titles and headings, looking for keywords that will confirm that they have found what they're looking for. People who use assistive technology may listen for keywords using software or may use keyboard shortcuts to access all the headings on a page.

    +

    When writing a page title, heading or subheading, make sure that it:

      -
    • décrit clairement le sujet traité dans le texte qui suit;
      • -
    • est bref, sans mots superflus (si possible, omettez l'article en début de titre ou de sous-titre);
      • -
    • introduit les termes les plus pertinents au début;
      • -
    • conserve son sens, même hors contexte;
      • -
    • est suivi d'un texte et non d'un autre titre de section, sauf s'il introduit une liste des sections de la page;
      • -
    • ne se termine pas par un signe de ponctuation;
      • -
    • n'inclut pas d'abréviation, sauf si elle est mieux connue du public cible que l'appellation au long;
      • -
    • n'inclut pas de message promotionnel (comme une affirmation subjective) puisqu'il pourrait être déroutant pour les gens et faire en sorte qu'ils cessent de naviguer jusqu'à la page.
      • +
    • gives a clear idea of what follows
      • +
    • is short and contains no unnecessary words
      • +
    • contains the most relevant terms at the beginning
      • +
    • makes sense on its own
      • +
    • is followed by text and not by another heading, unless the heading introduces a table of contents on the same page
      • +
    • has no punctuation at the end
      • +
    • contains no abbreviation unless the audience knows it better than it knows its long-form equivalent
      • +
    • contains no promotional messaging (boastful, subjective claims) because it might confuse and stop people from navigating to the page
    -

    Privilégier un ton et un temps de verbe neutre pour les titres et sous-titres

    -

    Privilégiez un ton neutre et l'utilisation de l'infinitif lorsque vous rédigez des titres et des sous-titres.

    -
    -
    -

    Donner un titre unique à votre page

    -

    La plupart des moteurs de recherche repèrent les résultats pertinents selon:

    +

    Make the page title unique

    +

    Most search engines identify relevant search results based on:

      -
    • le titre de page;
      • -
    • les titres de sections;
      • -
    • les sous-titres.
      • +
    • page title
      • +
    • headings
      • +
    • subheadings
    -

    Ils affichent le titre de page sous forme de lien dans la page de résultats.

    -

    Les titres de page uniques permettent aux moteurs de recherche de faire une distinction entre diverses pages similaires. Ils font également en sorte que les gens n'aient pas à examiner de nombreuses pages du même nom pour trouver l'information requise.

    -

    Vous pouvez utiliser un moteur de recherche pour vérifier si votre titre de page est unique en inscrivant le titre de la page, suivi de « site:» ainsi que du nom de domaine (par exemple, « salubrité des aliments site:gc.ca » ou, « salubrité des aliments site:canada.ca »).

    +

    They display the page title as a link on the results page.

    +

    Unique page titles help search engines tell the difference between similar pages. They also help ensure that people don't need to look at many pages with the same name to find the information they need.

    +

    Check whether your page title is unique by using a search engine. Search for the title of the page followed by "site:" and the domain extension (for example, "food safety site:gc.ca" or "food safety site:canada.ca").

    -
    -

    Utiliser le titre et les sous-titres de la page pour mettre sa structure en évidence

    -

    Le titre de page, les titres de sections et les sous-titres de votre contenu Web aident les gens à trouver facilement des renseignements à l'écran. Utilisez des titres pour diviser le texte en sections logiques à environ tous les 200 mots.

    -

    Structurer les titres clairement aide à établir l'autorité d'un titre par rapport à un autre.

    -

    Pour le titre de page:

    +
    +

    Use a page title, headings and subheadings to show structure

    +

    The page title, headings and subheadings help people find information on the screen easily. Use headings to divide text into logical sections approximately every 200 words.

    +

    Structuring headings clearly helps establish the authority of one heading over another.

    +

    For the page title:

      -
    • utilisez ce style de présentation : Titre 1
      • -
    • une seule fois dans une page
      • +
    • use this style: Heading 1
      • +
    • apply a Heading 1 only once per page
    -

    Pour une section principale :

    +

    For the main sections:

      -
    • utilisez ce style de présentation : Sous-titre 2
      • -
    • plusieurs fois dans une page
      • +
    • use this style: Heading 2
      • +
    • can appear many times
    -

    Pour une sous-section:

    +

    For subsections:

      -
    • utilisez ce style de présentation : Sous-titre 3
      • -
    • plusieurs fois et dans maintes sections principales
      • +
    • use this style: Heading 3
      • +
    • can appear many times and in many main sections
    -

    Pour une sous-sous-section:

    +

    For sub-subsections:

      -
    • utilisez ce style de présentation : Sous-titre 4 (et ainsi de suite)
      • -
    • plusieurs fois et dans maintes sous-sections
      • +
    • use this style: Heading 4 (and so on)
      • +
    • can appear many times in many subsections
    - Structurez votre texte grâce aux options de styles automatisées -

    Utilisez les options de style automatisées de votre logiciel de traitement de texte pour structurer vos titres. Elles permettent de bien distinguer les sous-titres du contenu et d'assurer l'uniformité.

    -

    Des sous-titres présentés de façon claire et cohérente aident votre équipe Web à produire la page plus rapidement en évitant les erreurs.

    -
    Table des matières
    -

    Utilisez la fonction de table des matières de votre logiciel de traitement de texte pour générer une table des matières en fonction des niveaux d'en-têtes du document. Vérifiez ensuite cette table des matières pour déterminer si vous avez organisé correctement le titre de page, les titres de sections et les sous-titres.

    -

    Supprimez la table des matières avant l'étape des approbations si elle n'est pas requise pour la version en ligne.

    -
    Volet de navigation
    -

    Utilisez le volet de navigation de Microsoft Word. Lorsque vous ouvrez l'outil de recherche (ou que vous tapez Control + F) et sélectionnez l'affichage des résultats par en têtes, une fenêtre contenant tous les titres de votre document apparaîtra.

    + Structure your content with automated style features +

    Having clear and consistently formatted headings helps your web team produce the web pages more quickly and with fewer errors.

    +

    Use the automated styles feature of your word processing software to structure headings. The styles feature clearly differentiates headings from content and helps you format headings consistently.

    +
    Table of contents
    +

    Use the table of contents feature from your Word processing software to automatically generate a table of contents based on the heading levels in your document. Then, check the table of contents to make sure you've correctly structured the page title, headings and subheadings.

    +

    Delete the table of contents before you send the document for approval if it isn't required for the final online version.

    +
    Navigation pane
    +

    Use the navigation pane feature in Microsoft Word. When you select Find (or press Control + F), a small window will display all the headings in your document.

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    -
    -

    Les titres de publications et de programmes font rarement de bons titres de page Web

    -

    Reproduire les titres de rapports, de brochures, de publications ou de programmes dans les titres de page Web peut empêcher les gens de trouver votre contenu, même si le contenu est lié à leur tâche.

    -

    Les titres de publications ne sont pas toujours écrits en langage clair, ni assez courts ou assez descriptifs.

    -

    Pour maximiser les chances que votre contenu figure en haut de la liste des résultats de recherche, utilisez des titres de page :

    +
    Publication and program titles usually don't make good web page titles
    +

    Using the titles of reports, brochures, publications or programs as the web page title can make it difficult for people to find your content, even if it relates to their task.

    +

    The titles of publications are usually not written in plain language, short enough or descriptive enough.

    +

    To help make sure your page ranks high in search results, use page titles that:

      -
    • courts;
      • -
    • qui décrivent la page avec précision;
      • -
    • qui sont liés à ce que la personne indique dans la barre de recherche.
      • +
    • are short
      • +
    • describe the page accurately
      • +
    • are relevant to what people type into search engines
    -

    Lorsque vous affichez une publication en ligne, vous devez l'adapter pour le Web. Voici quelques techniques de base qui vous aideront à obtenir les meilleurs résultats :

    -
    Utilisez un titre qui décrit le contenu de la page
    -

    Le titre principal (Titre 1) de la page est le texte que vous voyez en haut de la page lorsque vous la regardez. Assurez-vous qu'il décrit bien le sujet de votre publication en langage clair et simple.

    -
    Utilisez le premier paragraphe pour introduire votre publication
    -

    Le premier paragraphe de votre page Web doit introduire votre publication en langage clair et simple. Il aide les personnes qui consultent votre page à déterminer s'ils ont trouvé ce qu'ils cherchent. Vous pouvez inclure le titre de votre publication ici.

    -
    Incluez des mots-clés dans les métadonnées de la page
    -

    Utilisez les métabalises Titre et Description pour améliorer le classement de votre publication dans les résultats de recherche. Voici ce que vous pouvez faire :

    -

    Métabalise Titre : La métabalise Titre de la page est le texte en hyperlien bleu que vous voyez lorsque les moteurs de recherche génèrent une liste de résultats. Trouvez un titre principal (Titre 1) efficace pour votre page et utilisez-le aussi comme métabalise Titre.

    -

    Métabalise Description : La métabalise Description est le contenu que vous voyez sous le texte en hyperlien bleu dans la liste des résultats de recherche. Évitez d'énumérer seulement des mots-clés, car les moteurs de recherche tendent à ne pas les prendre en considération. Écrivez une (1) ou 2 phrases courtes qui décrivent le contenu de la page. Assurez-vous d'inclure les mots-clés que vos publics cibles utilisent lorsqu'ils cherchent votre contenu (par exemple, des abréviations qu'ils connaissent bien).

    -

    Reportez-vous à la section sur le langage clair et simple pour des conseils sur l'utilisation de mots-clés simples et courants.

    +

    When you post a publication online, you must adapt it for the web. Here are some things you can do to get better results:

    +

    Write a title that describes the contents of the page

    +

    The web page title (Heading1) is the title you see at the top of the page when you're looking at it. Make sure that it accurately describes, in plain language, what your publication is about.

    +

    Use the first paragraph to introduce your publication

    +

    The first paragraph of your web page should introduce your publication in plain language. It helps people who've landed on the page decide whether they've found what they are looking for. You can include the title of your publication here.

    +

    Include keywords in the page's metadata

    +

    Use the title tag and the description metadata field to improve where your publication ranks in search results. Here's what you can do:

    +

    Title tag: The page title tag is the blue hyperlinked text you see when a search engine generates a list of results. Write an effective page title (Heading1), and use it as your title tag.

    +

    Description metadata field: The description metatdata is the content you see under the blue hyperlinked text in search results. Avoid listing only keywords, because search engines might ignore these. Write 1 or 2 short sentences that summarize the page. Make sure they contain keywords that people use when searching for your content (for example, abbreviations familiar to your audience).

    +

    Refer to the section on plain language for tips on using simple and common words as keywords.

    +

    See how the rule for writing useful page titles and headings applies in French

    + +
    +
    +
    -

    5.2 Utiliser des listes d'éléments pour aider les gens à survoler le texte

    -

    Il est plus facile de survoler une courte liste d'éléments verticaux et d'en retenir le contenu qu'un long paragraphe. Si c'est possible, visez un maximum de 7 éléments par liste.

    -

    Lorsque vous rédigez des listes d'éléments :

    +

    5.2 Use lists to help people scan

    +

    A short vertical list is easier for people to scan and remember than a long paragraph. If possible, aim for maximum of 7 items in your list.

    +

    When writing lists:

      -
    • utilisez autant que possible la forme positive;
      • -
    • regroupez les éléments rédigés à la forme négative, si vous devez l'utiliser;
      • -
    • utilisez une structure grammaticale cohérente. Par exemple, si : +
    • use positive statements as much as possible
      • +
    • place negatively phrased items together, if you must use them
      • +
    • use consistent grammatical structure. For example, if you:
        -
      • vous utilisez le mode impératif (commandement) dans le premier élément de votre liste, reprenez ce mode dans chaque élément subséquent;
        • -
      • votre premier élément commence par un nom, poursuivez la liste de la même façon;
        • +
      • use the imperative mood (or command) for the first item of your list, use the same mood for each subsequent list item
        • +
      • start your first item with a noun, start the other list items with nouns
      • -
    • si votre liste contient plus de 7 éléments, songez à la séparer en différentes catégories.
      • +
    • if a list contains more than 7 items, consider breaking it up into categories
    -

    Phrase d'introduction

    -

    S'il faut clarifier un lien entre les éléments d'une liste, commencez la liste par une introduction qui :

    +

    Lead-in sentence

    +

    If you need to clarify the relationship between each element, start the list with a lead-in paragraph that:

      -
    • s'applique à tous les éléments;
      • -
    • met en relief le point commun entre les éléments.
      • +
    • introduces or applies to all the list items
      • +
    • emphasizes the common element between all the items
    -

    Si c'est pertinent, précisez dans la phrase d'introduction s'il faut prendre en compte tous les éléments ou un ou l'autre des éléments de la liste. Par exemple, vous pouvez écrire :

    +

    If necessary, specify "all" or "or" in the introductory paragraph to clarify whether the list is comprehensive or conditional. For example, you can write:

      -
    • « Vous devez répondre à toutes les exigences ci-dessous : »
      • -
    • « Pour soumettre une demande, vous devez répondre à une (1) ou plusieurs des exigences ci-dessous : »
      • +
    • "You must meet all of the following requirements:"
      • +
    • "To be eligible, you must meet 1 or more of the following requirements:"
    -

    Listes numérotées

    -

    Utilisez des listes numérotées pour indiquer :

    +

    Numbered lists

    +

    Use numbered lists to show:

      -
    • le rang
      • -
    • l'ordre
      • -
    • la priorité
      • -
    • les détails d'une marche à suivre, étape par étape
      • +
    • ranking
      • +
    • order
      • +
    • priority
      • +
    • step-by-step instructions
    -

    Listes à puces

    -

    Présentez une seule idée par puce. Si vous devez inclure plus de renseignements pour clarifier une idée, utilisez des listes en retrait, mais avec modération.

    -
    Exemple de listes à puces
    -

    Écrivez :

    -

    Pour rédiger un document source de qualité :

    +

    Bulleted lists

    +

    Place only one idea in each bulleted item. If you need to include more information to explain an idea, use sub-bullets, but use them sparingly.

    +
    Example of bulleted list items
    +

    Write:
    + To draft a high-quality source document:

      -
    • organisez vos idées; +
    • organize your ideas
        -
      • ordonnez vos idées par ordre d'importance relativement à la tâche;
        • -
      • testez l'ordre de vos idées avec des représentants de votre public cible;
        • +
      • arrange your ideas from most to least important to the task
        • +
      • test your order with a representative audience
      • -
    • utilisez la voix active;
      • -
    • employez le mot juste;
      • -
    • rédigez des phrases brèves et des paragraphes courts;
      • -
    • suivez les lignes directrices du Guide de rédaction du contenu du site Canada.ca.
      • +
    • use the active voice
      • +
    • use the right words
      • +
    • write short sentences and paragraphs
      • +
    • follow the guidelines in the Canada.ca Content Style Guide
    -

    Au lieu de :

    -

    Pour rédiger un document source de qualité :

    +

    Instead of:
    + To draft a high-quality source document:

      -
    • organisez vos idées;
      • -
    • ordonnez vos idées par ordre d'importance relativement à la tâche;
      • -
    • testez l'ordre de vos idées avec des représentants de votre public cible;
      • -
    • n'utilisez pas la voix passive;
      • -
    • il est important d'employer le mot juste;
      • -
    • n'utilisez que des phrases brèves et des paragraphes courts;
      • -
    • servez-vous du Guide de rédaction du contenu du site Canada.ca pour vous assurer d'avoir suivi les lignes directrices.
      • +
    • organize your ideas
      • +
    • arrange your ideas from most to least important to the task
      • +
    • test your order with a representative audience
      • +
    • do not use the passive voice
      • +
    • it is important to use the right words
      • +
    • use only short sentences and paragraphs
      • +
    • use the Canada.ca Content Style Guide to ensure you have followed the guidelines
    -

    Consultez la section sur l'utilisation des majuscules et de la ponctuation dans les listes d'éléments.

    +

    Take a look at the section on capitalization and punctuation rules that apply to lists.

    -

    Listes alphabétiques

    -

    Présentez le contenu Web en ordre alphabétique seulement s'il s'agit de l'approche la plus logique et intuitive possible pour le public cible.

    -

    Cependant, il peut être approprié de présenter des éléments par ordre alphabétique, comme une liste de noms.

    -

    Si vous présentez du contenu français par ordre alphabétique, présentez aussi le contenu traduit en anglais par ordre alphabétique pour offrir la même expérience intuitive.

    +

    Alphabetical lists

    +

    Only present your web content in an alphabetical order if it's the most logical and intuitive approach for the audience.

    +

    For example, listing provinces and territories in alphabetical order could be appropriate.

    +

    If you present content in alphabetical order in English, also present it in alphabetical order in French to provide the same intuitive experience.

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    +

    See how the rule for using lists applies in French

    + +
    +
    -

    5.3 Utiliser des tableaux pour organiser des données

    -

    Utilisez des tableaux pour organiser et présenter des données. Assurez-vous que :

    +

    5.3 Use tables to organize data

    +

    Use tables to organize and present data. Make sure that the:

      -
    • la valeur de chaque cellule correspond aux en-têtes des colonnes et des rangées;
      • -
    • les entrées à l'intérieur d'une colonne n'incluent pas de renseignement qui pourrait être considéré comme un sous-titre;
      • -
    • la valeur de chaque cellule concorde avec l'en-tête de colonne qui figure directement au-dessus.
      • +
    • value of each cell relates to the column and row headers
      • +
    • entries in a column don't contain information that could be considered a subhead
      • +
    • value of each cell aligns with the column header that appears directly above it
    -

    Présentez votre tableau à l'aide d'un titre clair qui décrit les renseignements contenus dans le tableau.

    -

    Exemple d'utilisation d'un tableau pour organiser des données

    - -
    - Exemple d'utilisation d'un tableau pour organiser des données
    - Comparaison des autorisations budgétaires nettes et des dépenses pour le crédit du 1er au 31 décembre, pour les exercices financiers 2011 à 2012 et 2012 à 2013 (en millions de dollars)     +

    Give your table a clear title that describes the information in it.

    +

    Example of a table that organizes data

    + + - + - - - + + + + + - - - + + + - - - + + +
    + Comparison of net budgetary authorities and expenditures for Vote 1 as of December 31, for fiscal years 2011 to 2012 and 2012 to 2013 ($ millions)
    Crédit 12011 à 20122012 à 2013Vote 12011 to 20122012 to 2013
    Autorisations budgétaires nettes287,4252,4Net budgetary authorities287.4252.4
    Dépenses cumulatives au 31 décembre184,1154,6Year-to-date expenditures ending December 31184.1154.6
    -

    Inclure des en-têtes de colonne et de rangée

    -

    Chaque colonne et chaque rangée d'un tableau structuré doit comporter un en-tête qui décrit les renseignements se trouvant dans la colonne ou la rangée.

    -

    Les en-têtes de colonne et de rangée diffèrent des titres et sous-titres. Les :

    +

    Use column and row headers

    +

    Each column and row of a table must have a header that describes the information in that column or row.

    +

    Column and row headers are different from headings and subheadings:

      -
    • en-têtes de colonne ou de rangée introduisent l'information contenue sous la colonne ou dans la rangée d'un tableau;
      • -
    • titres et sous-titres désignent le titre d'un tableau ou d'une section du contenu d'une page Web.
      • +
    • column and row headers appear in the cells at the top and on the far left of a table
      • +
    • headings and subheadings refer to the title of a table or a section of content that appears on a web page
    -

    Vérifiez si la relation est cohérente entre les colonnes et les rangées d'un tableau.

    -

    Par exemple, dans le tableau ci-dessus, demandez-vous si les renseignements figurant dans une :

    +

    Check that there is a consistent relationship between the columns and rows.

    +

    For example, to check the table above, ask yourself whether you can align the information that appears in:

      -
    • colonne concordent avec l'en-tête de colonne directement au-dessus (« Crédit 1 », « 2011 à 2012 » (en millions de dollars) et « 2012 à 2013 » (en millions de dollars));
      • -
    • rangée concordent avec l'en-tête de rangée qui les décrit (« Autorisations budgétaires nettes » et « Dépenses cumulatives au 31 décembre »).
      • +
    • the column, with the column header that appears directly above it ("Vote 1," "2011 to 2012" ($ millions) and "2012 to 2013" ($ millions))
      • +
    • a row, with the row header that defines it ("Net budgetary authorities" and "Year-to-date expenditures ending December 31")
    -

    Votre équipe Web utilisera les renseignements contenus dans les en-têtes de colonne et de rangée pour coder le tableau.  Ainsi, les lecteurs d'écrans pourront en interpréter correctement les données.

    -
    Exemple de l'utilisation appropriée d'en-têtes de colonne et de rangée
    -

    Dans l'exemple suivant, toutes les cellules de la première :

    +

    Your web team will use the information in the headers to code the table. Afterwards, screen readers will be able to correctly interpret the data within the table.

    +

    In the following example, all the cells in the first:

      -
    • rangée sont des entêtes de colonne et sont identifiées par les caractères gras et la couleur grise;
      • -
    • colonne sont des entêtes de rangée (sauf pour la cellule du haut à gauche) et sont identifiées par les caractères gras.
      • +
    • row are column headers and appear bolded and in grey 
      • +
    • column are row headers (except the top-left cell) and appear bolded
    - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + +
    - Divulgation de contrats de plus de 10 000 $ de janvier à mars 2010table 2 note * + Disclosure of contracts over $10,000 from January to March 2010table 2 note *
    DateNom du fournisseurDescriptionValeurDate contract was awardedVendor nameDescription Value
    Solutions d'entreprises ABCLocation d'appareils, de meubles et d'accessoires de bureau227 703,22 $2010-02-01table 2 note **ABC Business SolutionsRental of machinery office furniture and fixtures$227,703.22
    Consultants informatique sérénITAutres services professionnels uniques227 956,64 $2010-02-20IT Consultants R UsOther professional services not elsewhere specified$227,956.64
    Service-conseil gestion limitéeConseils en gestion285 575,89 $2010-02-23Management Consulting Group LimitedManagement consulting$285,575.89
    Consultants XYZAutres services professionnels précisés nulle part ailleurs 56 294,42 $2010-03-01XYZ ConsultantsOther professional services not elsewhere specified $56,294.42
    -
    Notes du tableau 2
    +
    Table 2 Notes
    -
    Note * du tableau 2
    +
    Table 2 Note *
    -

    Quatrième trimestre de l'exercice financier allant du 1er avril 2009 au 31 mars 2010.

    -

    Retour à la référence de la note * du tableau 2

    +

    Fourth quarter of the April 1, 2009, to March 31, 2010, fiscal year.

    +

    Return to table 2 note * referrer

    -
    Note ** du tableau 2
    +
    Table 2 Note **
    -

    Les dates de ce tableau représentent l'année et le mois, suivis du jour (aaaa-mm-jj).

    -

    Retour à la référence de la note ** du tableau 2

    +

    Dates in this table represent the year, month and day (yyyy-mm-dd).

    +

    Return to table 2 note ** referrer
    -

    En examinant l'en-tête des colonnes « Date d'attribution du contrat », « Nom du fournisseur » et « Valeur », on comprend que le 23 février 2010, l'entreprise Service conseil gestion limitée a obtenu un contrat d'une valeur de 285 575,89 $.

    +

    By looking at the column headers "Date contract was awarded," "Vendor name" and "Value," people can understand that on February 23, 2010, Management Consulting Group Limited was awarded a contract valued at $285,575.89.

    -

    Utiliser la structure de tableau la plus simple possible

    -

    Il peut être difficile de faire en sorte que des tableaux soient accessibles et faciles à lire sur des appareils mobiles ou avec un lecteur d'écran.

    -

    Pour rendre l'information utile pour le plus vaste public possible :

    +

    Use the simplest structure possible

    +

    It can be difficult to make tables accessible and easy to read for people using screen readers or mobile devices.

    +

    To make information useful to the widest possible audience:

      -
    • divisez un tableau complexe en un ou plusieurs tableaux simples;
      • -
    • convertissez un tableau en texte sous forme de liste d'éléments si les données sont simples.
      • +
    • turn a complex table into one or more simple tables
      • +
    • convert a table to a list if the data is simple
    -
    Avant : tableau complexe
    -

    Le tableau qui suit est complexe et mal conçu. Il serait difficile d'y accéder et d'en comprendre l'information à l'aide d'un lecteur d'écran ou d'un appareil mobile.

    -
    Exemple de tableau complexe
    +
    Before: complex table
    +

    The following table is complex and poorly designed. It would be difficult for someone using a screen reader or a mobile device to access and understand the information.

    +
    Example of a complex table
    - - + + - - - - - - - - - - + + + + + + + + + + - + - + - + - + - + - - - + + +
    - Équipes canadiennes de la Ligue nationale de hockey gagnantes de la Coupe Stanley (1927-2013) + National Hockey League Stanley Cup Canadian winning teams (1927–2013)
    Association de l'EstAssociation de l'OuestEastern ConferenceWestern Conference
    ÉquipeParties gagnéesÉquipeParties gagnéesÉquipeParties gagnéesÉquipeParties gagnéesÉquipeParties gagnéesTeamWinsTeamWinsTeamWinsTeamWinsTeamWins
    Canadiens de MontréalMontréal Canadiens 22Maple Leafs de TorontoToronto Maple Leafs 11Sénateurs d'OttawaOttawa Senators 1Oilers d'EdmontonEdmonton Oilers 5Flames de CalgaryCalgary Flames 1

    Source : nhl.com

    Source : nhl.com
    -
    Après : tableaux simples
    -

    Le tableau complexe peut être facilement divisé en tableaux simples.

    -
    Exemple : un tableau simple
    +
    After: simple tables
    +

    The complex table easily converts into simple tables.

    +
    Example: one simple table
    - - - + + + - - + + - - + + - - + + - - + + - - + + - +
    - Tableau 1 : Équipes canadiennes de la Ligue nationale de hockey gagnantes de la Coupe Stanley (de 1927 à 2013) + National Hockey League Stanley Cup Canadian winning teams (1927 to 2013)
    ÉquipeAssociationParties gagnéesTeamConference Wins
    Canadiens de MontréalEst Montreal CanadiensEastern 22
    Maple Leafs de TorontoEst Toronto Maple LeafsEastern 11
    Oilers d'EdmontonOuest Edmonton OilersWestern 5
    Flames de CalgaryOuest Calgary FlamesWestern 1
    Sénateurs d'OttawaEstOttawa SenatorsEastern 1

    Source : nhl.com

    Source : nhl.com
    -

    S'il importe de mettre en relief les champions de la Coupe Stanley par association (région) de la Ligue nationale de hockey, présentez les renseignements à l'aide de 2 tableaux simples et utilisez des titres de tableau pour préciser l'association à laquelle les équipes appartiennent.

    -
    Exemple : plusieurs tableaux simples
    +

    If it's important to highlight Stanley Cup championships by NHL conference (region), present the information using 2 simpler tables, and use table titles to clarify which conference the teams represent.

    +
    Example: multiple simple tables
    - - + + - + - + - + - +
    - Tableau 1 : Équipes canadiennes de l'association de l'Est de la Ligue nationale de hockey gagnantes de la Coupe Stanley (de 1927 à 2013) + Table 1: Eastern conference: National Hockey League Stanley Cup Canadian winning teams (1927 to 2013)
    ÉquipeParties gagnéesTeam Wins
    Canadiens de MontréalMontreal Canadiens 22
    Maple Leafs de TorontoToronto Maple Leafs 11
    Sénateurs d'OttawaOttawa Senators 1

    Source : nhl.com

    Source : nhl.com
    - - + + - + - + - +
    - Tableau 2 : Équipes canadiennes de l'association de l'Ouest de la Ligue nationale de hockey gagnantes de la Coupe Stanley (de 1927 à 2013) + Table 2: Western conference: National Hockey League Stanley Cup Canadian winning teams (1927 to 2013)
    ÉquipeParties gagnéesTeam Wins
    Oilers d'EdmontonEdmonton Oilers 5
    Flames de CalgaryCalgary Flames 1

    Source : nhl.com

    Source : nhl.com
    -

    Le tableau complexe peut aussi être facilement converti en 2 listes d'éléments.

    -
    Exemple: conversion de tableaux en texte
    -

    Association de l'Est de la Ligue nationale de hockey

    -

    Équipes canadiennes gagnantes de la Coupe Stanley de 1927 à 2013 :

    +

    The complex table also easily converts into 2 lists.

    +
    Example: convert tables to text
    +

    Eastern conference National Hockey League:

    +

    The Stanley Cup Canadian winning teams from 1927 to 2013

      -
    • Canadiens de Montréal : 22
      • -
    • Maple Leafs de Toronto : 11
      • -
    • Sénateurs d'Ottawa : 1
      • +
    • Montreal Canadiens: 22
      • +
    • Toronto Maple Leafs: 11
      • +
    • Ottawa Senators: 1
    -

    Association de l'Ouest de la Ligue nationale de hockey

    -

    Équipes canadiennes gagnantes de la Coupe Stanley de 1927 à 2013 :

    +

    Western conference National Hockey League:

    +

    The Stanley Cup Canadian winning teams from 1927 to 2013

      -
    • Oilers d'Edmonton : 5
      • -
    • Flames de Calgary : 1
      • +
    • Edmonton Oilers: 5
      • +
    • Calgary Flames: 1
    -

    Éviter les cellules texturées ou colorées

    -

    Évitez de mettre de la texture ou des couleurs dans les cellules.

    -

    Si vous devez utiliser des textures et des couleurs dans un tableau, expliquez ce qu'elles signifient (par exemple, dans les notes du tableau ou dans une légende). Conformez-vous aux règles de rapport minimum de contraste des couleurs (1.4.3) des Règles pour l'accessibilité des contenus Web 2.0.

    -

    Ne vous fiez jamais uniquement à la couleur ou à la texture pour présenter des renseignements importants.

    +

    Limit the use of texture and colour

    +

    Avoid formatting cells with textures or colours, because it can make text difficult to read.

    +

    If you must use textures and colours in a table, explain what they mean (for example, in a table note or in a legend). Make sure you comply with the minimum colour contrast rules (1.4.3) from the Web Content Accessibility Guidelines (WCAG) 2.0.

    +

    Never rely on colour or texture alone to convey important information.

    -

    Éviter les cellules vides

    -

    Si la cellule est vide, les outils d'aide, tels que les lecteurs d'écrans, en informent les utilisateurs. Si une cellule de tableau n'a aucune valeur, expliquez pourquoi dans :

    +

    Avoid having blank cells

    +

    Assistive technologies like a screen reader will notify the person if the cell is blank. If a cell has no value, explain why in your table's:

      -
    • une note en bas du tableau;
      • -
    • une légende;
      • -
    • un sous-titre;
      • -
    • le contenu qui accompagne le tableau.
      • +
    • notes
      • +
    • legend
      • +
    • caption
      • +
    • surrounding content
    -

    Si cela est plus clair et ne risque pas d'occasionner de « pollution visuelle » pouvant distraire les gens, vous pouvez ajouter le texte suivant dans la cellule :

    +

    You may also write one of the following in the cell, as long as it's clear and doesn't create visual noise that would distract your audience:

      -
    • « aucune donnée disponible »;
      • -
    • « 0 » (zéro);
      • -
    • « s/o » (sans objet).
      • +
    • "no data"
      • +
    • "0" (zero)
      • +
    • "n/a" (not applicable)
    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    +

    See how the rule for using tables to organize data applies in French

    + +
    +
    -

    6.0 Images et vidéos

    +

    6.0 Images and videos

    -

    Dans cette section

    +

    In this section

    -

    Vous pouvez utiliser des images et des vidéos pour :

    -
      -
    • renforcer les messages clés;
      • -
    • aider les gens à accomplir leur tâche;
      • -
    • faciliter la compréhension de l'information complexe;
      • -
    • refléter le plus possible la population diversifiée du Canada (dont les personnes âgées, les jeunes, les peuples autochtones et les personnes de diverses origines ethniques).
      • -
    -

    Lorsque vous planifiez votre contenu, évaluez les avantages d'inclure des vidéos et leur incidence sur les gens qui tenteront de les visionner avec des appareils mobiles. Leur capacité à accéder à ces fichiers peut varier en fonction de leur service de données mobiles ou de leur réseau.

    -

    Obtenir la permission de publier

    -

    Assurez-vous que vous possédez les droits appropriés pour publier des images, des fichiers audio et des vidéos sur Canada.ca. Vous devrez avoir la preuve écrite que vous avez obtenu ces droits. Reportez-vous aux Procédures sur l'édition ou communiquez avec l'équipe d'édition de votre institution pour plus de détails.

    -

    Obtenir de l'aide concernant les images, les fichiers audio ou les vidéos sur le site Canada.ca

    -

    Si vous avez des questions précises concernant les exigences en matière de licence ou les formulaires de consentement liés à Canada.ca, contactez l'éditeur principal : na-web_support-soutien_du_web-gd@servicecanada.gc.ca.

    +

    You can use images and videos to:

    +
      +
    • enhance key messages
      • +
    • help people complete their task
      • +
    • make complicated information easier to understand
      • +
    • reflect Canada's diverse population as much as possible (including seniors, youth, Indigenous peoples, and people from a wide variety of ethnic origins)
      • +
    +

    When planning your content, weigh the benefits of using videos with the impact on people who will try to view them using mobile devices. Data plans and reliable network access vary.

    +

    Obtain permission to publish

    +

    Make sure that you have the appropriate permissions to publish images, audio files and videos online. You'll need to have the written proof of those rights. Refer to the Procedures for Publishing or contact your institution's authoring team for more details.

    +

    Help with images, audio files or videos on Canada.ca

    +

    For specific information about consent forms or licensing requirements related to Canada.ca, contact the Principal Publisher: na-web_support-soutien_du_web-gd@servicecanada.gc.ca.

    -

    6.1 Comprendre le but des images sur le Web

    -

    Les images peuvent distraire les gens. Elles peuvent aussi augmenter la durée de chargement de la page. Assurez-vous que vos images ajoutent une valeur réelle à votre contenu.

    -

    Il y a 2 principales catégories d'images:

    +

    6.1 Understand the purpose of images online

    +

    Images can distract people. They can also make the page take longer to load. Make sure your images add value to your content.

    +

    There are 2 main types of images:

      -
    • fonctionnelles
      • -
    • décoratives
      • +
    • functional images
      • +
    • decorative images
    -

    Images fonctionnelles

    -

    Les images fonctionnelles :

    +

    Functional images

    +

    Functional images:

      -
    • illustrent de l'information ou des données pour aider les gens à les comprendre;
      • -
    • expliquent un concept complexe;
      • -
    • illustrent des objets concrets (par exemple, un passeport valide, des espèces vulnérables, des symboles types);
      • -
    • véhiculent une marque distinctive (par exemple, des logos approuvés et les éléments graphiques d'une campagne).
      • +
    • illustrate information or data to help people understand it
      • +
    • explain a complex concept
      • +
    • illustrate concrete things (such as a valid passport, species at risk, standard symbols)
      • +
    • convey branding (such as approved logos and campaign graphics)
    -

    Les images fonctionnelles ajoutent de la valeur au contenu étant donné qu'elles communiquent l'information avec plus d'efficacité que le texte seul. Voici quelques types d'images fonctionnelles :

    +

    Functional images add value to the content because they provide more information than can be provided through text alone. Examples of functional images:

      -
    • éléments infographiques
      • -
    • tableaux
      • -
    • graphiques
      • +
    • infographics
      • +
    • charts
      • +
    • graphs
    -

    Ajoutez un texte alternatif approprié pour décrire l'image pour les personnes qui ne peuvent la voir.

    -
    Exemples d'images fonctionnelles
    +

    Include the appropriate alternative text to describe the image for people who are unable to view it.

    +
    Example of functional images
    Figure 4
    - Map of Canada: current conditions + Map of Canada: current conditions
    - Figure 4 - Version textuelle + Figure 4 - Text version - + - - - + + + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + +
    Ville Condition Température CityConditionTemperature
    Calgary Généralement ensoleillé 12°C CalgaryMainly sunny0°C
    Charlottetown Généralement ensoleillé -8°C CharlottetownDrifting snow-11°C
    Edmonton (sans objet) 1°C Edmonton(no data)0°C
    Fredericton Ensoleillé -9°C FrederictonSunny-12°C
    Halifax Généralement ensoleillé -6°C HalifaxMainly sunny-7°C
    Iqaluit Poudrerie basse -22°C IqaluitDrifting snow-22°C
    Montréal Ensoleillé -13°C MontréalSunny-16°C
    Ottawa Généralement ensoleillé -12°C Ottawa (Kanata - Orléans)Mainly sunny-15°C
    Prince George Généralement nuageux 3°C Prince GeorgePartly cloudy2°C
    Québec Partiellement nuageux -16°C QuébecPartly cloudy-19°C
    Regina Nuageux 0°C ReginaCloudy-4°C
    Saskatoon Généralement nuageux -5°C SaskatoonMist-8°C
    St. John's Nuageux 4°C St. John'sMist2°C
    Thunder Bay Partiellement nuageux -3°C Thunder BayPartly cloudy-14°C
    Toronto Généralement nuageux -4°C TorontoLight snow-6°C
    Vancouver Pluie 9°C VancouverMostly cloudy9°C
    Victoria Généralement nuageux 10°C VictoriaLight rain8°C
    Whitehorse Partiellement nuageux -14°C WhitehorsePartly cloudy-19°C
    Winnipeg Ensoleillé -11°C WinnipegSunny-18°C
    Yellowknife Partiellement nuageux -22°C YellowknifeMainly sunny-28°C
    -
    Figure 5
    - Nombre de page par objectif principal et par audience +
    Figure 5
    + Bar chart for number of pages by main purpose and audience
    - Figure 5 - Version textuelle + Figure 5 - Text version - + - - - - - - - + + + + + + + + + - + @@ -1812,7 +1925,7 @@ title: "Canada.ca Content Style Guide" - + @@ -1821,7 +1934,7 @@ title: "Canada.ca Content Style Guide" - + @@ -1830,7 +1943,7 @@ title: "Canada.ca Content Style Guide" - + @@ -1839,7 +1952,7 @@ title: "Canada.ca Content Style Guide" - + @@ -1853,383 +1966,401 @@ title: "Canada.ca Content Style Guide"
    -

    Images décoratives

    -

    Utilisez des images décoratives uniquement pour fournir un contexte visuel pour les modèles de page suivants :

    +

    Decorative images

    +

    Use decorative images only to provide visual context for the following templates:

      -
    • page de thème ou de sujet;
      • -
    • page d'accueil;
      • -
    • pages d'une campagne publicitaire;
      • -
    • vignette promotionnelle d'une page de sujet ou de la page d'accueil (Activités et initiatives du gouvernement du Canada).
      • +
    • a theme or topic page
      • +
    • the home page
      • +
    • campaign pages
      • +
    • promotional features on a topic page or home page (Government of Canada activities and initiatives)
    -

    N'insérez pas de texte important, comme des titres de campagne ou de programme, dans des images décoratives.

    -

    Ajoutez un texte alternatif pour décrire l'image pour les personnes qui ne peuvent la voir.

    -

    Vous trouverez plus de détails au sujet des modèles de page ci-dessus dans les Spécifications du contenu et de l'architecture de l'information pour Canada.ca..

    -
    Exemple d'une image décorative
    -

    Une membre de la Gendarmerie royale du Canada sur la page Web de Canada.ca axée sur les emplois et le milieu de travail.

    -

    Description de l'image

    -

    Une membre de la Gendarmerie royale du Canada sur la page Web de Canada.ca axée sur les emplois et le milieu de travail.

    +

    Don't place meaningful text, such as campaign or program titles, in decorative images.

    +

    Include the appropriate alternative text to describe the image for people who are unable to view it.

    +

    Get details about the templates above in the Canada.ca Content and Information Architecture Specification.

    +
    Example of a decorative image
    +

    A Royal Canadian Mounted Police officer on the Canada.ca web page related to jobs and the workplace.

    +

    Description of the image

    +

    A Royal Canadian Mounted Police officer on the Canada.ca web page related to jobs and the workplace.

    -

    Taille et positionnement des images

    -

    Pour savoir où placer les images et les vidéos dans Canada.ca et quelle devrait être leur taille :

    +

    Image sizing and placement

    +

    Learn where to place images and videos on Canada.ca and what size they should be:

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    +

    See how the rule for using images applies in French

    + +
    +
    -

    6.2 Ajouter un texte alternatif aux images

    -

    Un texte alternatif (ou texte de remplacement ou texte Alt) est de l'information qui décrit une image. Il lui donne un sens lorsqu'une personne utilise des technologies d'aide pour l'interpréter. Il permet aussi aux moteurs de recherche de mieux déchiffrer l'intention des fichiers d'image.

    -

    Pour rédiger un texte alternatif pour des images fonctionnelles :

    -
      -
    • décrivez l'image comme si vous la décriviez à quelqu'un au téléphone;
      • -
    • utilisez le moins de mots possible;
      • -
    • tentez de limiter le texte à moins de 170 caractères (y compris les espaces);
      • -
    • utilisez le texte qui figure sur une image fonctionnelle comme texte alternatif seulement s'il fournit suffisamment de contexte, ou rédigez un autre texte en incluant plus d'information;
      • -
    • utilisez l'indicateur vide (alt="") comme texte alternatif si l'image ne donne pas davantage de renseignements que ce que fournit déjà le texte avoisinant;
      • -
    • ne décrivez pas une image ou un graphique par le même mot (par exemple, « image du... » ou « graphique des... »), car les lecteurs d'écran le font déjà.
      • -
    -

    Les images décoratives n'exigent pas de renseignements supplémentaires pour les rendre accessibles ou visibles aux moteurs de recherche. Utilisez l'indicateur vide (alt="") en guise de texte alternatif.

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    +

    6.2 Include alternative text for images

    +

    Alternative text (or alt text) is text that describes an image. It makes it possible for people using assistive technologies to access the information conveyed by an image. It also helps search engines better understand the purpose of the image.

    +

    When you're writing alternative text for a functional image:

    +
      +
    • describe the image as if you were describing it to someone over the phone
      • +
    • use as few words as possible
      • +
    • limit the text to around 140 characters (including spaces)
      • +
    • use the text that is embedded in the image only if it provides enough context; otherwise, write different text that includes more information
      • +
    • use the null indicator as the alternative text (alt="") if the image doesn't provide any more information than what is already provided in the text on the page
      • +
    • don't use "image of..." or "graphic of..." to describe the image; screen readers do this already
      • +
    +

    Decorative images don't require additional information to make them accessible or visible to search engines. Use the null indicator as the alternative text (alt="").

    +

    See how the rule for alternative text for images applies in French

    + +
    +
    -

    6.3 Ajouter une description longue pour expliquer les images complexes

    -

    Les descriptions longues expliquent l'information qui est présentée dans un élément infographique ou une image complexe. Vous devez fournir une description longue s'il est impossible de décrire le contenu et la fonction de l'image en moins de 170 caractères. S'il est possible de décrire l'image en moins 170 caractères, fournissez un texte alternatif.

    -

    Si une explication détaillée d'une image complexe figure dans le texte qui précède ou qui suit immédiatement l'image, il n'est pas nécessaire de fournir une description longue.

    -

    Si vous fournissez une description longue pour une image, vous devez aussi fournir un texte alternatif qui renvoie à la description longue.

    -

    La figure 1 illustre un certain nombre de concepts. Elle nécessite une description longue.

    -

    Exemple : Description longue pour le tableau de bord

    +

    6.3 Include long descriptions for complex images

    +

    Long descriptions explain information that is presented in complex infographics or images. You must provide a long description if you can't describe the content and function of the image in less than 140 characters. If you can describe the image in less than 140 characters, use alternative text instead.

    +

    If a detailed and equivalent explanation of the image appears in the text immediately before or after a complex image, you don't have to provide a long description.

    +

    If you provide a long description for an image, you must also provide alternative text for the long description.

    +

    Figure 1 illustrates a number of concepts. It requires a long description.

    +

    Example: Long description for the balanced scorecard

    -
    Figure 1 : Utilisation d'un tableau de bord symétrique pour surveiller les principaux indicateurs de rendement
    - Figure 1 : Utilisation d'un tableau de bord symétrique pour surveiller les principaux indicateurs de rendement -
    Texte alternatif
    -

    Vous pourriez écrire le texte alternatif suivant pour décrire l'image présentée à la figure 1 :

    -

    Tableau de bord illustrant comment les activités opérationnelles s'associent à la vision et à la stratégie de l'organisation pour surveiller les indicateurs de rendement. La version textuelle suit.

    -
    Description longue
    -

    Vous pourriez écrire la description longue suivante pour décrire l'image présentée à la figure 1 :

    -

    Un tableau de bord équilibré est un outil de planification stratégique et de gestion utilisé partout dans le monde pour harmoniser les activités opérationnelles avec la vision et la stratégie d'une organisation.

    -

    Les activités opérationnelles sont regroupées dans 4 catégories, toutes interdépendantes, qui découlent de la vision et de la stratégie. Les catégories sont : l'apprentissage et la croissance, les processus opérationnels internes, la clientèle et les finances. Chacune est associée à une question.

    +
    Figure 1: using a balanced scorecard approach to monitor key performance indicators
    + A balanced scorecard showing how business activities align with an organization's vision and strategy to monitor key performance indicators. Text version below. +
    Alternative text
    +

    You could write the following alternative text for the image shown in Figure 1:

    +

    A balanced scorecard showing how business activities align with an organization's vision and strategy to monitor key performance indicators. Text version below.

    +
    Long description
    +

    You could write the following long description for the image shown in Figure 1:

    +

    A balanced scorecard is a strategic planning and management system used worldwide to align business activities with an organization's vision and strategy.

    +

    Business activities are grouped into 4 perspectives, all of which are interdependent and come from the vision and strategy. These are learning and growth, internal business processes, financial, and customer. Each has a question associated with it.

      -
    • Apprentissage et croissance
      • +
    • Learning and growth
    -

    Pour concrétiser notre vision, comment devons-nous conserver notre capacité à changer et à nous améliorer?

    +

    To achieve our vision, how will we sustain our ability to change and improve?

      -
    • Processus opérationnels internes
      • +
    • Internal business processes
    -

    Pour satisfaire nos actionnaires et nos clients, quels processus opérationnels devons-nous maîtriser à la perfection?

    +

    To satisfy our shareholders and customers, what business processes must we excel at?

      -
    • Finances
      • +
    • Financial
    -

    Pour prospérer, quelle image devons-nous projeter à nos actionnaires?

    +

    To succeed financially, how should we appear to our shareholders?

      -
    • Clientèle
      • +
    • Customer
    -

    Pour concrétiser notre vision, quelle image devons-nous projeter à nos clients?

    -

    Chaque catégorie peut être évaluée à l'aide des 4 éléments suivants :

    +

    To achieve our vision, how should we appear to our customers?

    +

    Each perspective can be monitored using the following 4 components:

      -
    • objectifs
      • +
    • objectives
    • messages
      • -
    • buts
      • +
    • targets
    • initiatives
    -

    La figure 2 est un graphique à barres qui représente les données contenues dans le tableau de données. Vous pourriez donc utiliser le tableau comme description longue pour accompagner cette image.

    -

    Exemple : Description longue pour le graphique à barres illustrant le rapport hommes-femmes au sein de la fonction publique pour les années sélectionnées, entre 1983 et 2010

    +

    Figure 2 is a bar chart. The information in it came from a data table. You could therefore use the table as the long description for this image.

    +

    Example: Long description for the bar chart illustrating the proportion of men and women in the public service for selected years from 1983 to 2010

    -
    Figure 2: Rapport hommes-femmes au sein de la fonction publique pour les années sélectionnées, entre 1983 et 2010
    - Rapport hommes-femmes au sein de la fonction publique pour les années sélectionnées, entre 1983 et 2010 -

    Source : Bureau du dirigeant principal des ressources humaines, Secrétariat du Conseil du Trésor du Canada
    - Remarque : Comprend tous les types de postes. Les chiffres ne tiennent pas compte des employés en congé non payé.

    -
    Texte alternatif
    -

    Vous pourriez écrire le texte alternatif suivant :

    -

    Comparaison entre la proportion d'hommes et de femmes dans la fonction publique entre 1983 et 2010. La version textuelle suit.

    -
    Description longue
    -

    Vous pourriez écrire la description longue suivante :

    +
    Figure 2: proportion of men and women in the public service for selected years from 1983 to 2010
    + Comparison of the ratio of women and men in the civil service between 1983 and 2010. Text version below. +

    Source: Office of the Chief Human Resources Officer, Treasury Board of Canada Secretariat
    + Note: Includes all tenures. Figures do not include employees on leave without pay.

    +
    Alternative text
    +

    You could write the following alternative text:

    +

    Comparison of the ratio of women and men in the civil service between 1983 and 2010. Text version below.

    +
    Long description
    +

    You could write the following long description text:

     ÉducativeTâchesNavigationSoutienInformationEntrepriseEducationTaskNavigationSupportInformationCorporate
    GénéralGeneral 2 0 2050
    ÉtudiantsStudents 2 2 10
    EntreprisesBusiness 60 10 208
    ProfessionnelsProfessional 46 26 5142
    AvocatsLawyer 0 2 4
    - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - - - - - - - + + + + + + + + - + + + + + + + + - - + + +
    - Figure 2: Rapport hommes-femmes au sein de la fonction publique pour les années sélectionnées, entre 1983 et 2010 + Figure 2: proportion of men and women in the public service for selected years 1983 to 2010
    Sexe (en pourcentage) 1983198819931998200320082010
    Hommes58,255,752,949,646,745,144,8Gender (by percentage)1983198819931998200320082010
    Femmes41,844,347,150,453,354,955,2Men58.255.752.949.646.745.144.8

    Source : Bureau du dirigeant principal des ressources humaines, Secrétariat du Conseil du Trésor du Canada
    - Remarque : Comprend tous les types de postes. Les chiffres ne tiennent pas compte des employés en congé sans solde.

    		Women41.844.347.150.453.354.955.2

    Source: Office of the Chief Human Resources Officer, Treasury Board of Canada Secretariat
    + Note: Includes all tenures. Figures do not include employees on leave without pay.
    -

    Collaborez avec votre équipe Web pour déterminer la meilleure façon d'insérer la description longue. Elle vous conseillera sur la façon de s'assurer que l'information contenue dans l'image est accessible aux personnes qui utilisent les technologies d'aide. Votre équipe Web s'assurera également que l'image respecte les Spécifications du contenu et de l'architecture de l'information pour Canada.ca.

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    +

    Work with your web team to determine the best way to include the long description information. They'll guide you on how to make sure the image is accessible to people using assistive technology. They'll also ensure that your image meets the Canada.ca Content and Information Architecture Specification.

    +

    See how the rule for long descriptions applies in French

    + +
    +
    -

    6.4 Ajouter une transcription pour décrire les fichiers audio et vidéo

    -

    Une transcription est le texte qui décrit un fichier audio ou vidéo. Les transcriptions facilitent l'accès à l'information contenue dans des fichiers multimédias audio ou visuels pour les personnes qui ne peuvent entendre ou voir le contenu en raison :

    +

    6.4 Include transcripts to describe audio and video files

    +

    A transcript is the text equivalent of an audio or video file. They make it easier for people who need to access information in audio or visual media but can't hear or see the content because:

    +
      +
    • they have a disability
      • +
    • don't have equipment such as speakers or headphones
      • +
    • don't want to download a large file
      • +
    +

    Make sure the transcript describes all pre-recorded information and action, including:

      -
    • d'un handicap;
      • -
    • d'un manque d'équipement comme des haut-parleurs ou des écouteurs;
      • -
    • de leur décision de ne pas télécharger un gros fichier vidéo.
      • +
    • on-screen text
      • +
    • dialogue and narration
      • +
    • important sounds (such as an explosion)
      • +
    • important action (for example, people running away from an explosion or characters wearing disguises)
    -

    Assurez-vous que la transcription de texte décrit tout le contenu préenregistré (information et action), y compris :

    +

    See how the rule for transcripts applies in French

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    +
    +
    -

    7.0 Liens

    +

    7.0 Links

    -

    Dans cette section

    +

    In this section

    -

    Un lien (ou hyperlien) est un mot, une phrase ou une image d'une page Web sur lequel la personne peut cliquer pour accéder à une autre partie du contenu de la page ou à une autre ressource Web (c'est-à-dire une page Web, une vidéo ou un fichier téléchargeable).

    -

    Les personnes qui utilisent les technologies d'aide peuvent naviguer dans le contenu Web à l'aide de liens. Par exemple, les lecteurs d'écran énumèrent tous les liens d'une page sans afficher le contenu contextuel.

    -

    Vos liens doivent être descriptifs et conserver leur sens, même hors contexte, de façon à indiquer à quoi les gens peuvent s'attendre lorsqu'ils les sélectionnent.

    +

    A link (or hyperlink) is a word, phrase or image on a web page that people click on to move to another part of the same content or to access an entirely different web resource (such as a web page, video or downloadable file).

    +

    People who use assistive technology can navigate web content using links. For example, screen readers list all links on a page without the contextual content.

    +

    Your links should be descriptive and able to stand alone so that it's clear what people can expect if they click on them.

    -

    7.1 Utiliser les liens de façon stratégique

    -

    Réfléchissez bien à la façon de créer vos liens. Choisissez stratégiquement la façon de présenter les liens dans une page Web ainsi que le nombre de liens :

    -
      -
    • ajoutez des liens qui appuient directement le sujet ou la tâche de la page en question;
      • -
    • fournissez des liens menant au à l'information d'origine publiée par la source faisant autorité;
      • -
    • n'incluez pas de liens vers des sites intranet sauf si le contenu est destiné à des employés fédéraux, auquel cas il faudra ajouter la mention « (accessible uniquement sur le réseau du gouvernement du Canada) »;
      • -
    • ne mettez pas de liens essentiels à la tâche au milieu d'un paragraphe ou au bas d'une page.
      • -
    -

    Exemple d'une utilisation appropriée des hyperliens

    -
    Écrivez :
    -

    Une portion selon le Guide alimentaire est la quantité d'aliments de chacun des 4 groupes que l'on devrait manger chaque jour. Dans certains cas, une portion correspond à un aliment que l'on mange habituellement en une seule fois, comme une pomme. Dans d'autres, la quantité quotidienne correspond à plus d'une portion, comme pour du riz ou des pâtes.

    -

    Nombre de portions quotidiennes pour les enfants, les adolescents et les adultes

    -
    Au lieu de :
    -

    Une portion du Guide alimentaire est tout simplement une à titre de référence qui vous aide à comprendre la quantité d'aliments recommandée chaque jour dans chacun des groupes alimentaires. Dans certains cas, une portion du Guide alimentaire peut se rapprocher de ce que vous mangez, comme une pomme. Dans d'autres cas, comme lorsqu'il s'agit de riz ou de pâtes alimentaires, vous vous servez peut-être plus d'une portion du Guide alimentaire à la fois.

    -
    -

    Choisir le contenu connexe avec soin

    -

    Ajouter des liens vers d'autres pages Web pertinentes peut aider les gens à trouver rapidement des renseignements utiles. Les liens qui mènent à vos pages à partir d'autres pages Web peuvent aussi améliorer le classement de vos pages dans la liste des résultats générée par les moteurs de recherche.

    -

    Choisissez avec soin les liens connexes. Trop de liens dans une page Web pourraient inciter les gens à quitter la page sans avoir lu l'information importante ou les dissuader d'exécuter une tâche.

    -
    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    -
    -
    -
    -

    7.2 Rédiger des liens descriptifs

    -

    Le texte du lien doit décrire clairement le contenu auquel le lien donne accès. Il est plus facile pour une personne d'accomplir une tâche lorsque le contenu auquel renvoie le lien correspond à ce qu'elle s'attend à y trouver. Assurez-vous que le texte est assez descriptif pour indiquer vers quel contenu le lien permettra d'accéder.

    -

    Il n'est pas nécessaire que le texte du lien soit identique au titre de la page de destination pour se conformer aux Règles pour l'accessibilité des contenus Web. Il suffit que les principaux mots-clés du lien correspondent au titre de la page afin d'indiquer à la personne qu'elle est au bon endroit.

    -

    Pour rédiger des liens descriptifs et utiles :

    -
      -
    • utilisez les premiers mots du titre de la page de destination ou son titre complet s'il est assez descriptif;
      • -
    • commencez par des mots-clés qui décrivent bien la page de destination si le titre de page ne suffit pas;
      • -
    • utilisez un texte descriptif différent pour chaque lien se trouvant sur une même page;
      • -
    • utilisez un texte identique lorsque plusieurs liens sur une page Web renvoient à la même page de destination;
      • -
    • indiquez si le contenu doit être téléchargé et décrivez ce contenu;
      • -
    • écrivez les adresses de courriel au long, en hyperlien, avec des lettres minuscules (envoyez un courriel à questions@canada.ca)
      • -
    -

    N'utilisez pas :

    +

    7.1 Use links strategically

    +

    Be strategic about how you place and create links on a web page and about how many links you provide:

      -
    • le même texte pour des liens qui mènent à 2 pages différentes;
      • -
    • d'expressions vagues comme « cliquez ici » ou « pour en savoir plus »;
      • -
    • de message promotionnel qui risque d'être déroutant pour quelqu'un qui tente de décider s'il naviguera jusqu'à la page.
      • +
    • include links that directly support the topic or task on the current page
      • +
    • link to the original information posted by the authoritative source
      • +
    • don't include links to intranet sites unless the content targets government employees, in which case you should add "(accessible only on the Government of Canada network)"
      • +
    • don't bury links that are crucial to completing a task in the middle of a paragraph or at the bottom of the page
    -
    -

    Mettre l'accent sur la tâche

    -

    Lorsque vous rédigez des instructions sur la façon d'exécuter une tâche, vous devez parfois insérer un lien pour diriger la personne vers les formulaires ou d'autres documents. Créez ce lien en mettant l'accent sur l'action qu'elle doit accomplir.

    -

    Ne répétez pas le titre d'un formulaire ou d'un document dans les étapes à suivre si ce titre n'est pas assez descriptif.

    -

    Exemple de la façon d'utiliser des hyperliens en mettant l'accent sur la tâche

    -
    Écrivez :
    -

    Pour obtenir le taux maximal de prestations d'assurance-emploi auquel vous avez droit :

    - -
    Au lieu de :
    -

    Pour obtenir le taux maximal de prestations d'assurance-emploi auquel vous avez droit, remplissez le formulaire Attestation du prestataire – Semaines durant lesquelles la rémunération assurable était la plus élevée (Meilleures semaines variables). Inscrivez-y les renseignements requis concernant les semaines durant lesquelles vos revenus assurables étaient les plus élevés durant vos 52 dernières semaines d'emploi ou depuis le début de votre dernière demande, selon la plus courte période des deux.

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    -
    -
    -
    -
    -

    7.3 Vérifier que les liens fonctionnent

    -

    Vérifiez vos liens pour vous assurer qu'ils fonctionnent. Assurez-vous aussi qu'ils dirigent les gens vers la bonne page, soit celle qui contient des renseignements à jour, dans la langue officielle voulue. Des liens qui fonctionnent mal exaspèrent les gens et compromettent la crédibilité de votre contenu.

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    -
    +

    Example of appropriate use of links

    +
    Write:
    +

    A Food Guide serving is how much food you should eat from each of the 4 food groups every day. In some cases, a serving is the amount of a given food group that you normally eat in one sitting, like an apple. In other cases, the daily amount is more than one serving, such as for rice or pasta.

    +

    Number of daily food servings for children, teens and adults

    +
    Instead of:
    +

    A Food Guide Serving is simply a reference amount. It helps you understand how much food is recommended every day from each of the four food groups. In some cases, a Food Guide Serving may be close to what you eat, such as an apple. In other cases, such as rice or pasta, you may serve yourself more than one Food Guide Serving.

    -
    -

    7.4 Créer des liens vers du contenu externe

    -

    Certains contenus pour lesquels le gouvernement ne fait pas autorité ne sont pas disponibles dans les 2 langues officielles. Si vous créez un lien vers du contenu Web externe qui n'est pas disponible dans la langue de la page courante, précisez la ou les langues dans lesquelles le contenu est disponible.

    -

    Sur les pages en français, ajoutez le texte suivant après un lien qui renvoie à du contenu qui n'est pas en français : (en XXXX seulement).

    -

    Si le lien renvoie à du contenu seulement disponible en :

    -
      -
    • anglais, écrivez «  (en anglais seulement) »;
      • -
    • inuktitut, écrivez « (en inuktitut seulement) »;
      • -
    • espagnol et portugais, écrivez « (en espagnol et portugais seulement) ».
      • -
    -

    Exemple de l'utilisation d'un hyperlien qui renvoie à un contenu disponible en anglais seulement

    -

    Écrivez : Informez-vous au sujet des documents requis pour permettre aux citoyens canadiens d'entrer aux États-Unis (en anglais seulement).

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    -
    +
    +

    Carefully select related content

    +

    Providing links to other relevant web pages can help people find related information quickly. Links to your pages from other pages may also help improve where your page ranks in search results.

    +

    Be sure to select related links carefully. Too many links on a page can cause people to leave the page without reading important information or can discourage them from completing a task.

    -
    -

    7.5 Créer des liens vers du contenu interne

    -

    En général, le contenu destiné au public ne devrait pas contenir de liens renvoyant vers du contenu accessible seulement sur les serveurs internes du gouvernement. Il arrive cependant qu'un contenu accessible au public s'adresse essentiellement aux employés de la fonction publique.

    -

    Si vous créez un lien vers du contenu qui est disponible seulement sur les serveurs internes du gouvernement, écrivez « (accessible uniquement sur le réseau du gouvernement du Canada) ».

    -
    - -

    Voyez comment cette règle s'applique à un contenu de langue anglaise

    -

    Diffusez cette règle par courriel

    -
    +

    See how the rule for using links strategically applies in French

    + +
    +
    +
    +
    +
    +

    7.2 Write descriptive links

    +

    A link must describe the content a person will find once they click on it. It's easier to complete a task when a link's destination matches a person's expectations. Make sure links are descriptive so that person will understand what they'll get when they click on them.

    +

    The text you hyperlink doesn't have to match the title of the destination page to be compliant with Web Content Accessibility Guidelines. Text in a link gets some context from the web page's content. Make sure the main keywords of the link text correspond to the page title so that people know they're in the right place.

    +

    Tips for providing useful links:

    +
      +
    • use the first words of the target page or its entire title if it's descriptive enough
      • +
    • start with keywords that accurately describe the target page if the page title isn't enough
      • +
    • make sure that all links on the same page use unique descriptive text if they link to different target pages
      • +
    • when more than one link on a web page links to the same destination page, use the same words for the hyperlink
      • +
    • describe any content that must be downloaded
      • +
    • write email addresses in full, in lower case and as active links (contact helpdesk@canada.ca)
      • +
    +

    Don't use:

    +
      +
    • the same link text to point to 2 different pages
      • +
    • vague statements such as "click here" or "read more"
      • +
    • promotional messaging that might confuse someone who is deciding whether to go to the page that is being linked to
      • +
    +
    +

    Focus on the task

    +

    When writing instructions for completing a task, sometimes you need to insert a link to guide the person to forms or other documents. Focus on the action they must perform when you create the link.

    +

    Don't repeat the name of a form or document in the steps to accomplish a task if the name isn't descriptive.

    +

    Example of the use of links that focus on the task

    +
    Write:
    +

    To get the highest Employment Insurance amount available to you:

    +
      +
    1. open the form you need to declare your income
      2. +
    2. identify your highest weeks of insurable income in the shortest period below: +
        +
      • the last 52 weeks of employment
        • +
      • since the start of your last claim
        • +
      +
      3. +
    3. return the completed form in person to the Service Canada office closest to you
      4. +
    +
    Instead of:
    +

    To ensure that you are paid the maximum Employment Insurance (EI) benefit rate that you are entitled to, complete the Claimant Attestation - Highest Weeks of Insurable Earnings (Variable Best Weeks) form with the required information about your highest weeks of insurable earnings in the last 52 weeks of employment or since the start of your last claim, whichever is the shorter period of the two.

    +

    See how the rule for writing descriptive links applies in French

    + +
    +
    +
    +
    +
    +

    7.3 Make sure that links work

    +

    Make sure that your links work. Check that they take people to the correct page, which contains up-to-date information, in the appropriate official language. Links that don't work frustrate people and hurt the credibility of your content.

    +

    See how the rule for verifying links applies in French

    + +
    +
    +
    +
    +
    +

    7.4 Linking to non-government content

    +

    Some non-government web content isn't available in both official languages. If you're linking to external web content that isn't available in the language of the current page, say in which language(s) it is available after the link.

    +

    On English pages, write the following after a link that leads to content that isn't available in English: "(XXXX only)".

    +

    If the link leads to content only available in:

    +
      +
    • French, write "(French only)"
      • +
    • Inuktitut, write "(Inuktitut only)"
      • +
    • Spanish and Portuguese, write "(Spanish and Portuguese only)"
      • +
    +

    Example of a link that leads to content only available in French

    +

    Write: Find out how to renew your French passport while abroad in Canada (French only).

    +

    See how the rule for non-government content applies in French

    + +
    +
    +
    +
    +
    +

    7.5 Linking to internal-to-government content

    +

    In most cases, public-facing content should not link to content that is accessible only through internal government networks. Occasionally, the audience for content that is accessible to the public may be primarily internal.

    +

    When a link leads to content available only on internal government networks, write "(accessible only on the Government of Canada network)."

    +

    See how the rule for internal-to-government contente applies in French

    + +
    +
    +
    -

    Refonte de contenu Web

    -

    Étude de cas A : simplifier le langage et améliorer la structure du contenu

    -

    Avant

    -

    L'assurance-emploi est un programme qui offre un soutien de revenu temporaire aux Canadiens et aux personnes légalement autorisées à travailler au Canada qui ont un numéro d'assurance sociale valide et qui demeurent au Canada pendant la durée de leurs prestations. Le programme offre entre autres des prestations régulières aux personnes qui ont perdu leur emploi sans en être responsables (par exemple, à la suite d'un manque de travail ou parce qu'elles occupaient un emploi saisonnier) et qui sont prêtes et disposées à travailler et capables de le faire en tout temps, sans pouvoir trouver du travail.

    -

    Niveau de lecture Scolarius : 312 (initié)

    -

    Après

    -

    L'assurance-emploi peut offrir une aide financière si vous n'avez plus de travail. Vous pourriez recevoir de l'argent régulièrement, pendant un certain temps, pour vous permettre de vous concentrer sur vos recherches d'emploi.

    -

    Pour y avoir droit, vous devez :

    -
      -
    • être Canadien ou avoir le droit de travailler au Canada;
      • -
    • avoir un numéro d'assurance sociale;
      • -
    • avoir perdu votre emploi sans que ce soit de votre faute;
      • -
    • être prêt à travailler et capable de le faire en tout temps;
      • -
    • demeurer au Canada pendant que vous recevez des prestations.
      • -
    -

    Niveau de lecture Scolarius : 71 (primaire)

    -

    Ce que nous avons fait

    -

    Pour améliorer le contenu, nous avons :

    -
      -
    • subdivisé le paragraphe en liste d'éléments;
      • -
    • remplacé des noms et des verbes par des formes plus simples.
      • -
    -

    Étude de cas B : améliorer et simplifier les tableaux

    -

    Avant

    +

    Web content makeovers

    +

    Case study A: improve plain language and content structure

    +

    Before

    +

    The Employment Insurance (EI) program offers temporary financial assistance to Canadians and individuals who are legally entitled to work in Canada, have a valid Social Insurance Number and remain in Canada during their benefit period. One type of benefits that the EI program offers is regular benefits. EI regular benefits are offered to people who have lost their employment through no fault of their own (for example, because of a shortage of work or because they were employed in seasonal work) and who are ready, willing, and capable of working each day but unable to find work.

    +

    Flesch-Kincaid reading level: 17.2

    +

    After

    +

    The Employment Insurance (EI) program could give you temporary financial help if you lost your job.

    +

    To qualify for regular benefits, you must:

    +
      +
    • be Canadian or legally able to work in Canada
      • +
    • have a valid social insurance number
      • +
    • have lost your job through no fault of your own
      • +
    • be ready, willing and able to work each day but still can't find work
      • +
    • stay in Canada while you're getting EI help
      • +
    +

    Flesch-Kincaidreading level: 5.9

    +

    What we did

    +

    To improve this content, we:

    +
      +
    • created a list out of the items in the text 
      • +
    • replaced complex nouns with verbs and complex verbs with simpler forms
      • +
    +

    Case study B: improve and simplify tables

    +

    Before

    - - - - + + + + - + - + - + - + - + @@ -2241,91 +2372,91 @@ title: "Canada.ca Content Style Guide" - + - + - - + + - - + + - + - + - + - + - + - + - + - + - + - + - + @@ -2337,49 +2468,55 @@ title: "Canada.ca Content Style Guide" - + - + - + + + + + + + - + - + - + - + - + @@ -2391,55 +2528,55 @@ title: "Canada.ca Content Style Guide" - + - + - + - + - + - + - + - + - + @@ -2451,25 +2588,25 @@ title: "Canada.ca Content Style Guide" - + - - - - + + + + - - - - + + + + - + @@ -2477,63 +2614,63 @@ title: "Canada.ca Content Style Guide" - +
    - Soutenir les familles et les collectivités, Budget 2013 + Table: supporting families and communities (in $ millions), Budget 2013
    Soutenir les familles et les collectivités (en millions de dollars)2013 à 142014 à 15TotalSupporting Families and Communities (in $ millions)2013 to 20142014 to 2015Total
    Soutenir les famillesSupport for Families      
    Élargir l'allègement fiscal à l'égard des services de soins à domicileExpanding Tax Relief for Home Care Services 5 5 10
    Soins palliatifs et soins de fin de viePalliative and End-of-Life Care 1 1 2
    Allègements tarifaires pour les consommateurs canadiensTariff Relief for Canadians Consumers 76 76 152
    Total partiel : Soutenir les famillesSubtotal—Support for Families 82 82 164 
    Investir dans les collectivitésInvesting in Communities      
    Logements pour les Canadiens dans le besoinHousing for Canadians in Need      
    Stratégie des partenariats de lutte contre l'itinérance Homelessness Partnering Strategy  119 119
    Investissement dans le logement abordable Investment in Affordable Housing  253 253
    Investir dans le logement au Nunavut Investment in Nunavut Housing 30 70 100
    Soutenir les anciens combattants et leur rendre hommage Supporting and Honouring Veterans      
    Améliorer le Programme de funérailles et d'inhumation d'Anciens Combattants Canada Enhancing Veterans Affairs Canada's Funeral and Burial Program 63 2 65
    En route vers 2017 Road to 2017 1 2 3
    Investir dans les arts et la culture Investments in Arts and Culture      
    Revitalisation du Massey Hall Massey Hall Revitalization 8   8
    Étendre les services de bibliothèque pour les Canadiens aveugles ou atteints d'une déficience visuelleExpanding Library Services for the      
    Super crédit pour premier don de bienfaisance Blind and Partially Sighted 3   3
    Appuyer la transition économique des collectivités associées à l'industrie de l'amiante chrysotile First-Time Donor's Super Credit 25 25 50
    Logements pour les Canadiens dans le besoin Supporting the Economic Transition of Communities Economically Linked to the Chrysotile Asbestos Industry 3 5 8
    Total partiel : Investir dans les collectivités Subtotal—Investing in Communities 133 476 609 
    Protéger l'environnement naturel du CanadaProtecting Canada's Natural Environment      
    Conservation de la nature CanadaNature Conservancy of Canada 20   20
    Améliorer la conservation des aires de pêche grâce aux partenariats communautaires Improving the Conservation of Fisheries   
    Through Community Partnerships 5 5 10
    Timbre de conservation du saumon Salmon Conservation Stamp 1 1 2
    Favoriser la gestion responsable des ressources marines Enabling Responsible Marine Management 4   4
    Lutter contre les espèces envahissantes Protecting Against Invasive Species 2 2 3
    Accroître l'aide fiscale pour la production d'énergie propre Expanding Tax Support for Clean Energy Generation   1 1
    Total partiel : Protéger l'environnement naturel du Canada Subtotal—Protecting Canada's Natural Environment 32 9 41 
    Créer des collectivités autochtones vigoureusesBuilding Strong Aboriginal Communities      
    Régler les revendications particulièresResolving Specific Claims 27 27 54
    Régime de gestion des terres des Premières Nations First Nations Land Management Regime 2 7 9
    Programme des services de police des Premières Nations First Nations Policing Program 18 18 36
    Stratégie de la justice applicable aux Autochtones Aboriginal Justice Strategy 11   11
    Renouveler le Programme pour la prévention de la violence familiale Renewal of the Family Violence Prevention Program 12 12 24
    Améliorer les services de santé dans les collectivités des Premières Nations Improving Health Services to First Nations Communities 24 24 48
    Améliorer les services en santé mentale dans les collectivités des Premières Nations Enhancing Mental Health Services in First Nations Communities 2 2 4
    Total partiel : Créer des collectivités autochtones vigoureuses Subtotal—Building Strong Aboriginal Communities 95 90 185 
    Total : Soutenir les familles et les collectivitésTotal—Supporting Families and Communities 342 657 999
    Moins les fonds prévus dans le cadre financier actuel (76)(422)(498)Less funds existing in the fiscal framework76422498
    Moins les fonds assurés au moyen de réaffectations internes (1)(11)(12)Less funds sourced from internal reallocations11112
    Coût budgétaire netNet fiscal cost 265 224 489

    Remarque : Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    		Note: Totals may not add due to rounding.
    -

    Après

    +

    After

    - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + @@ -2542,77 +2679,77 @@ title: "Canada.ca Content Style Guide"
    - Tableau 1 : Soutenir les familles et les collectivités pour les exercices financiers de 2013 à 2014 et de 2014 à 2015, coûts budgétaires nets (en millions de dollars)Voir la note 1 du tableau 1 + Table 1: supporting families and communities for fiscal years 2013 to 2014 and 2014 to 2015, net fiscal costs (in $ millions)table 1 note 1
    Répartition des coûts2013 à 20142014 à 2015TotalCost breakdown 2013 to 20142014 to 2015Total
    Total : Soutenir les familles et les collectivitésVoir la note 2 du tableau 1342657999Total: supporting families and communitiestable 1 note 2342657999
    Moins les fonds prévus dans le cadre financier actuel(76)(422)(498)Less funds existing in the fiscal framework(76)(422)(498)
    Moins les fonds assurés au moyen de réaffectations internes(1)(11)(12)Less funds sourced from internal reallocations(1)(11)(12)
    Coûts budgétaires nets265224489Net fiscal costs265224489
    -
    Notes du tableau 1
    +
    Table 1 Notes
    -
    Note 1 du tableau 1
    +
    Table 1 Note 1
    -

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    -

    Retour à la référence de la note 1 du tableau 1

    +

    Totals may not add due to rounding.

    +

    Return to table 1 note 1 referrer

    -
    Note 2 du tableau 1
    +
    Table 1 Note 2
    -

    Voir le tableau 1B pour une ventilation détaillée.

    -

    Retour à la référence de la note 2 du tableau 1

    +

    See Table 1B for detailed breakdown.

    +

    Return to table 1 note 2 referrer

    - - - - + + + + - + - + - + - + - - - - + + + + @@ -2621,51 +2758,51 @@ title: "Canada.ca Content Style Guide"
    - Tableau 1A : Soutenir les familles et les collectivités pour les exercices financiers de 2013 à 2014 et de 2014 à 2015, coûts totaux (en millions de dollars)Voir la note 1 du tableau 2 + Table 1A: supporting families and communities for fiscal years 2013 to 2014 and 2014 to 2015, total costs (in $ millions)table 2 note 1
    Initiatives et programmes2013 à 20142014 à 2015TotalInitiatives and programs2013 to 20142014 to 2015Total
    Soutenir les famillesVoir la note 2 du tableau 2Support for familiestable 2 note 2 82 82 164
    Investir dans les collectivitésVoir la note 3 du tableau 2Investing in communitiestable 2 note 3 133 476 609
    Protéger l'environnement naturel du CanadaVoir la note 4 du tableau 2Protecting Canada's natural environmenttable 2 note 4 32 9 41
    Créer des collectivités autochtones vigoureusesVoir la note 5 du tableau 2Building strong Aboriginal communitiestable 2 note 5 95 90 185
    Total : Soutenir les familles et les collectivités342657999Total: supporting families and communities 342657999
    -
    Notes du tableau 1
    +
    Table 2 Notes
    -
    Note 1 du tableau 2
    +
    Table 2 Note 1
    -

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    -

    Retour à la référence de la note 1 du tableau 2

    +

    Totals may not add due to rounding.

    +

    Return to table 2 note 1 referrer

    -
    Note 2 du tableau 2
    +
    Table 2 Note 2
    -

    Voir le tableau 1B pour une ventilation détaillée.

    -

    Retour à la référence de la note 2 du tableau 2

    +

    See Table 1B for detailed breakdown.

    +

    Return to table 2 note 2 referrer

    -
    Note 3 du tableau 2
    +
    Table 2 Note 3
    -

    Voir le tableau 1C pour une ventilation détaillée.

    -

    Retour à la référence de la note 3 du tableau 2

    +

    See Table 1C for detailed breakdown.

    +

    Return to table 2 note 3 referrer

    -
    Note 4 du tableau 2
    +
    Table 2 Note 4
    -

    Voir le tableau 1D pour une ventilation détaillée.

    -

    Retour à la référence de la note 4 du tableau 2

    +

    See Table 1D for detailed breakdown.

    +

    Return to table 2 note 4 referrer

    -
    Note 5 du tableau 2
    +
    Table 2 Note 5
    -

    Voir le tableau 1E pour une ventilation détaillée.

    -

    Retour à la référence de la note 5 du tableau 2

    +

    See Table 1E for detailed breakdown.

    +

    Return to table 2 note 5 referrer

    - - - - + + + + - + - + - + - - - - + + + + @@ -2674,105 +2811,105 @@ title: "Canada.ca Content Style Guide"
    - Tableau 1B : Soutien aux familles pour les exercices financiers de 2013 à 2014 et de 2014 à 2015 (en millions de dollars)Voir la note 1 du tableau 3 + Table 1B: support for families for fiscal years 2013 to 2014 and 2014 to 2015 (in $ millions)table 3 note 1
    Initiatives et programmes2013 à 20142014 à 2015TotalInitiatives and programs 2013 to 20142014 to 2015Total
    Allègement fiscal à l'égard des services de soins à domicileExpanding tax relief for home care services 5 5 10
    Soins palliatifs et soins de fin de viePalliative and end-of-life care 1 1 2
    Allègements tarifaires pour les consommateurs canadiensTariff relief for Canadian consumers 76 76 152
    Total partiel : Soutenir les familles8282164Subtotal: support for families8282164
    -
    Notes du tableau 3
    +
    Table 3 Notes
    -
    Note 1 du tableau 3
    +
    Table 3 Note 1
    -

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    -

    Retour à la référence de la note 1 du tableau 3

    +

    Totals may not add due to rounding.

    +

    Return to table 3 note 1 referrer

    - - - - + + + + - + - + - + - + - + - + - + - + - + - + - + - + - - - - + + + + @@ -2781,69 +2918,69 @@ title: "Canada.ca Content Style Guide"
    - Tableau 1C : Investir dans les collectivités pour les exercices financiers de 2013 à 2014 et de 2014 à 2015 (en millions de dollars)Voir la note 1 du tableau 4 + Table 1C: investing in communities for fiscal years 2013 to 2014 and 2014 to 2015 (in $ millions)table 4 note 1
    Initiatives et programmes2013 à 20142014 à 2015TotalInitiatives and programs 2013 to 20142014 to 2015Total
    Logements pour les Canadiens dans le besoinHousing for Canadians in need 0 0 0
    Stratégie des partenariats de lutte contre l'itinéranceHomelessness partnering strategy 0 119 119
    Investissement dans le logement abordableInvestment in affordable housing 0 253 253
    Investissement dans le logement au NunavutInvestment in Nunavut housing 30 70 100
    Soutient et hommage combattants et leur rendre hommageSupporting and Honouring veterans 0 0 0
    Programme de funérailles et d'inhumation d'Anciens Combattants CanadaEnhancing Veterans Affairs Canada's Funeral and Burial Program 63 2 65
    En route vers 2017Road to 2017 1 2 3
    Investissement dans les arts et la cultureInvestments in arts and culture 0 0 0
    Revitalisation du Massey HallMassey Hall revitalization 8 0 8
    Services de bibliothèque pour les Canadiens aveugles ou atteints d'une déficience visuelleExpanding library services for the blind and partially sighted 3 0 3
    Super crédit pour premier don de bienfaisanceFirst-time Donor's Super Credit 25 25 50
    Appui de transition économique des collectivités associées à l'industrie de l'amiante chrysotileSupporting the economic transition of communities economically linked to the chrysotile asbestos industry 3 5 8
    Total partiel : Investir dans les collectivités133476609Subtotal: investing in communities133476609
    -
    Notes du tableau 4
    +
    Table 4 Notes
    -
    Note 1 du tableau 4
    +
    Table 4 Note 1
    -

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    -

    Retour à la référence de la note 1 du tableau 4

    +

    Totals may not add due to rounding.

    +

    Return to table 4 note 1 referrer

    - - - - + + + + - + - + - + - + - + - + - - - - + + + + @@ -2852,133 +2989,127 @@ title: "Canada.ca Content Style Guide"
    - Tableau 1D : Protéger l'environnement naturel du Canada pour les exercices financiers de 2013 à 2014 et de 2014 à 2015 (en millions de dollars)Voir la note 1 du tableau 5 + Table 1D: protecting Canada's natural environment for fiscal years 2013 to 2014 and 2014 to 2015 (in $ millions)table 5 note 1
    Initiatives et programmes2013 à 20142014 à 2015TotalInitiatives and programs 2013 to 20142014 to 2015Total
    Conservation de la nature CanadaNature Conservancy of Canada 20 0 20
    Conservation des aires de pêche grâce aux partenariats communautairesImproving the conservation of fisheries through community partnerships 5 5 10
    Timbre de conservation du saumonSalmon conservation stamp 1 1 2
    Gestion responsable des ressources marinesEnabling responsible marine management 4 0 4
    Lutte contre les espèces envahissantesProtecting against invasive species 2 2 3
    Aide fiscale pour la production d'énergie propreExpanding tax support for clean energy generation 0 1 1
    Total partiel : Protéger l'environnement naturel du Canada32941Subtotal: protecting Canada's natural environment32941
    -
    Notes du tableau 5
    +
    Table 5 Notes
    -
    Note 1 du tableau 5
    +
    Table 5 Note 1
    -

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    -

    Retour à la référence de la note 1 du tableau 5

    +

    Totals may not add due to rounding.

    +

    Return to table 5 note 1 referrer

    - - - - + + + + - + - + - + - + - + - + - + - - - - + + + +
    - Tableau 1E : Créer des collectivités autochtones vigoureuses pour les exercices financiers de 2013 à 2014 et de 2014 à 2015 (en millions de dollars)Voir la note 1 du tableau 6 + Table 1E: building strong Aboriginal communities for fiscal years 2013 to 2014 and 2014 to 2015 (in $ millions)table 6 note 1
    Initiatives et programmes2013 à 20142014 à 2015TotalInitiatives and programs2013 to 20142014 to 2015Total
    Résolution des revendications particulièresResolving specific claims 27 27 54
    Régime de gestion des terres des Premières NationsFirst Nations Land Management Regime 2 7 9
    Programme des services de police des Premières NationsFirst Nations Policing Program 18 18 36
    Stratégie de la justice applicable aux AutochtonesAboriginal Justice Strategy 11 0 11
    Programme pour la prévention de la violence familialeRenewal of the Family Violence Prevention Program 12 12 24
    Services de santé dans les collectivités des Premières NationsImproving health services to First Nations Communities 24 24 48
    Services en santé mentale dans les collectivités des Premières NationsEnhancing mental health services in First Nations communities 2 2 4
    Total partiel : Créer des collectivités autochtones vigoureuses9590185Subtotal: building strong Aboriginal communities9590185
    -
    Notes du tableau 6
    +
    Table 6 Notes
    -
    Note 1 du tableau 6
    +
    Table 6 Note 1
    -

    Les montants annuels ayant été arrondis, leur somme peut ne pas correspondre au total indiqué.

    -

    Retour à la référence de la note 1 du tableau 6

    +

    Totals may not add due to rounding.

    +

    Return to table 6 note 1 referrer
    -

    Ce que nous avons fait

    -

    Pour créer ces tableaux, nous avons :

    +

    What we did

    +

    To create these tables, we:

      -
    • divisé un tableau complexe en plusieurs tableaux simples et faciles à consulter à partir d'un appareil mobile;
      • -
    • utilisé l'approche de la pyramide inversée de façon à présenter le résumé ou la conclusion en premier, suivi de renseignements de plus en plus détaillés;
      • -
    • rédigé des titres clairs pour chaque tableau;
      • -
    • utilisé les sous-titres existants compris dans l'exemple initial pour créer les titres des différents tableaux;
      • -
    • veillé à ce que les en-têtes des 3 colonnes numériques correspondent à la valeur unitaire indiquée dans chaque colonne;
      • -
    • ajouté des zéros afin de fournir des renseignements pertinents dans les cellules qui auraient autrement été laissées vides;
      • -
    • supprimé les cellules et les rangées vides ainsi que les sous-titres non pertinents (c'est-à-dire, ceux qui ne correspondaient à aucune valeur sous les en-têtes de colonne).
      • +
    • divided a complex table into several simple tables that are more accessible and can be viewed easily on mobile devices
      • +
    • applied the inverted pyramid approach to provide the summary or conclusion first, followed by increasingly detailed information
      • +
    • created a clear title for each table
      • +
    • updated titles to reflect capitalization requirements
      • +
    • used existing subheadings embedded in the original example to create table headers
      • +
    • made sure that the last 3 column headers reflect the unit value of the information in each column
      • +
    • added zeros to provide relevant information in otherwise empty cells
      • +
    • removed empty cells, rows and irrelevant information (underlining) and subheadings (such as those that were not aligned with the column headers)
    -

    Ressources

    -
    From 3c1e6bfbbd7d9a52c723cb5e797db90c0d7c4bcd Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Wed, 11 Oct 2023 07:39:52 -0400 Subject: [PATCH 18/27] Update index.md --- style-guide/index.md | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 8af294941f..d7cfecf820 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -278,7 +278,7 @@ title: "Canada.ca Content Style Guide"
    -
    +
    @@ -301,7 +301,7 @@ title: "Canada.ca Content Style Guide"
  • 2.2 Utiliser des mots simples et courants
    • -
    +
    @@ -338,7 +338,7 @@ title: "Canada.ca Content Style Guide"
  • 2.3 Utiliser la voix active et la forme positive
    • -
    +
    @@ -359,7 +359,7 @@ title: "Canada.ca Content Style Guide"
  • 2.4 Utiliser des verbes plutôt que des noms formés à partir de verbes
    • -
    +
    @@ -395,7 +395,7 @@ title: "Canada.ca Content Style Guide"
  • 2.5 Éviter le jargon et les expressions familières ou imagées
    • -
    +
    @@ -419,7 +419,7 @@ title: "Canada.ca Content Style Guide"
  • 2.6 Utiliser des phrases simples
    • -
    +
    @@ -448,7 +448,7 @@ title: "Canada.ca Content Style Guide"
  • 2.7 Utiliser des phrases et des paragraphes courts
    • -
    +
    @@ -467,7 +467,7 @@ title: "Canada.ca Content Style Guide"
  • 2.8 Expliquer les références aux lois
    • -
    +
    @@ -537,7 +537,7 @@ title: "Canada.ca Content Style Guide"
  • 2.9 Vérifier la lisibilité de votre contenu
    • -
    +
    @@ -615,7 +615,7 @@ title: "Canada.ca Content Style Guide"
  • 3.1 Écrire directement à la personne
    • -
    +
    @@ -659,7 +659,7 @@ title: "Canada.ca Content Style Guide"
  • 3.2 Utiliser le pronom « nous » pour désigner le gouvernement du Canada
    • -
    +
    @@ -689,7 +689,7 @@ title: "Canada.ca Content Style Guide"
  • 3.3 Exprimer une obligation ou une recommandation
    • -
    +
    From 1272da10edf7f4cb3c2e0c98c9f2181b2074178c Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Wed, 11 Oct 2023 07:48:10 -0400 Subject: [PATCH 19/27] Update index.md --- style-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-guide/index.md b/style-guide/index.md index d7cfecf820..227207b54c 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -918,7 +918,7 @@ title: "Canada.ca Content Style Guide"
  • 4.3 Symboles
    • -
    +
    From 56eea1ee997c5150a228262af80a4d1c136276e5 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Wed, 11 Oct 2023 08:05:49 -0400 Subject: [PATCH 20/27] Update index.md --- style-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-guide/index.md b/style-guide/index.md index 227207b54c..ed7d36ace2 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -1090,7 +1090,7 @@ title: "Canada.ca Content Style Guide"

    See how the rule for times applies in French

    From 2cb5160375a802d2402d754b8bffe2a8a3de6c4a Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Wed, 11 Oct 2023 08:11:24 -0400 Subject: [PATCH 21/27] Update index.md --- style-guide/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style-guide/index.md b/style-guide/index.md index ed7d36ace2..e07b5666e0 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -1,7 +1,7 @@ --- altLangPage: "https://conception.canada.ca/guide-redaction" date: 2017-10-05 -dateModified: 2023-08-24 +dateModified: 2023-10-12 description: "These are the rules to create web content that can be easily found, understood and used." title: "Canada.ca Content Style Guide" --- From bd98d427901115c1f1154e34ac42f875a60f96df Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 13 Oct 2023 07:26:38 -0400 Subject: [PATCH 22/27] Update index.md --- style-guide/index.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index e07b5666e0..1b8b263473 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -272,7 +272,7 @@ title: "Canada.ca Content Style Guide"
    Example of direct statements

    Write: Present your passport to the border officer.
    Instead of: According to Canadian legislation, you're required to present your passport to the agent who will welcome you into the country.

    -

    See how rule for the inverted pyramid structure applies in French

    +

    See how the rule for the inverted pyramid structure applies in French

    @@ -414,7 +414,7 @@ title: "Canada.ca Content Style Guide"

    Write: The evaluation team will submit its final report on the training program in September.
    Instead of: The training program evaluation team will submit its final report in September.

    Surround a long sentence with shorter ones because it helps people understand the long sentence.

    -

    See how this rule for using simple sentences applies in French

    +

    See how the rule for using simple sentences applies in French

    @@ -443,7 +443,7 @@ title: "Canada.ca Content Style Guide"
  • presenting a series of more than 2 ideas or words as a vertical list
  • using a short form for a long title instead of repeating it
    • -

    See how rule for using short sentences and paragraphs applies in French

    +

    See how the rule for using short sentences and paragraphs applies in French

    @@ -462,7 +462,7 @@ title: "Canada.ca Content Style Guide"
  • Citizenship Act, section 5.1

    • Instead of: After your child arrives in Canada as a permanent resident, you can apply for citizenship on the child's behalf under section 5.1 of the Citizenship Act.

    -

    See how rule for explaining references to legislation applies in French

    +

    See how the rule for explaining references to legislation applies in French

    @@ -532,7 +532,7 @@ title: "Canada.ca Content Style Guide"
  • create numbered or bulleted lists for key tasks
    • -

    See how rule for measuring content for readability applies in French

    +

    See how the rule for measuring content for readability applies in French

    From be274ddf77b7e857d78c28b1d207ac07779f37ff Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Fri, 13 Oct 2023 07:31:42 -0400 Subject: [PATCH 23/27] Update index.md --- style-guide/index.md | 68 ++++++++++++++++++++++---------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 1b8b263473..17d3ba59e4 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -278,7 +278,7 @@ title: "Canada.ca Content Style Guide"
    -
    +
    @@ -301,7 +301,7 @@ title: "Canada.ca Content Style Guide"
  • 2.2 Utiliser des mots simples et courants
    • -
    +
    @@ -338,7 +338,7 @@ title: "Canada.ca Content Style Guide"
  • 2.3 Utiliser la voix active et la forme positive
    • -
    +
    @@ -359,7 +359,7 @@ title: "Canada.ca Content Style Guide"
  • 2.4 Utiliser des verbes plutôt que des noms formés à partir de verbes
    • -
    +
    @@ -419,7 +419,7 @@ title: "Canada.ca Content Style Guide"
  • 2.6 Utiliser des phrases simples
    • -
    +
    @@ -448,7 +448,7 @@ title: "Canada.ca Content Style Guide"
  • 2.7 Utiliser des phrases et des paragraphes courts
    • -
    +
    @@ -467,7 +467,7 @@ title: "Canada.ca Content Style Guide"
  • 2.8 Expliquer les références aux lois
    • -
    +
    @@ -537,7 +537,7 @@ title: "Canada.ca Content Style Guide"
  • 2.9 Vérifier la lisibilité de votre contenu
    • -
    +
    @@ -615,7 +615,7 @@ title: "Canada.ca Content Style Guide"
  • 3.1 Écrire directement à la personne
    • -
    +
    @@ -659,7 +659,7 @@ title: "Canada.ca Content Style Guide"
  • 3.2 Utiliser le pronom « nous » pour désigner le gouvernement du Canada
    • -
    +
    @@ -689,7 +689,7 @@ title: "Canada.ca Content Style Guide"
  • 3.3 Exprimer une obligation ou une recommandation
    • -
    +
    @@ -853,7 +853,7 @@ title: "Canada.ca Content Style Guide"
  • 4.1 Majuscules et ponctuation
    • -
    +
    @@ -887,7 +887,7 @@ title: "Canada.ca Content Style Guide"
  • 4.2 Soulignement, caractères gras et italique
    • -
    +
    @@ -918,7 +918,7 @@ title: "Canada.ca Content Style Guide"
  • 4.3 Symboles
    • -
    +
    @@ -961,7 +961,7 @@ title: "Canada.ca Content Style Guide"
  • 4.4 Abréviations, acronymes et référence
    • -
    +
    @@ -1005,7 +1005,7 @@ title: "Canada.ca Content Style Guide"
  • 4.5 Forme contractée
    • -
    +
    @@ -1036,7 +1036,7 @@ title: "Canada.ca Content Style Guide"
  • 4.6 Nombres
    • -
    +
    @@ -1079,7 +1079,7 @@ title: "Canada.ca Content Style Guide"
  • 4.7 Dates
    • -
    +
    @@ -1093,7 +1093,7 @@ title: "Canada.ca Content Style Guide"
  • 4.8 Heures
    • -
    +
    @@ -1108,7 +1108,7 @@ title: "Canada.ca Content Style Guide"
  • 4.9 Numéros de téléphone
    • -
    +
    @@ -1149,7 +1149,7 @@ title: "Canada.ca Content Style Guide"
  • 4.10 Adresses
    • -
    +
    @@ -1165,7 +1165,7 @@ title: "Canada.ca Content Style Guide"

    See how the rule for words and expressions in transition applies in French

    This rule doesn't apply to content in French.

    -
    +
    @@ -1313,7 +1313,7 @@ title: "Canada.ca Content Style Guide"
  • 5.1 Rédiger des titres et sous-titres de page descriptifs
    • -
    +
    @@ -1396,7 +1396,7 @@ title: "Canada.ca Content Style Guide"
  • 5.2 Utiliser des listes d'éléments pour aider les gens à survoler le texte
    • -
    +
    @@ -1714,7 +1714,7 @@ title: "Canada.ca Content Style Guide"
  • 5.3 Utiliser des tableaux pour organiser des données
    • -
    +
    @@ -1995,7 +1995,7 @@ title: "Canada.ca Content Style Guide"
  • 6.1 Comprendre le but des images sur le Web
    • -
    +
    @@ -2016,7 +2016,7 @@ title: "Canada.ca Content Style Guide"
  • 6.2 Ajouter un texte alternatif aux images
    • -
    +
    @@ -2124,7 +2124,7 @@ title: "Canada.ca Content Style Guide"
  • 6.3 Ajouter une description longue pour expliquer les images complexes
    • -
    +
    @@ -2147,7 +2147,7 @@ title: "Canada.ca Content Style Guide"
  • 6.4 Ajouter une transcription pour décrire les fichiers audio et vidéo
    • -
    +
    @@ -2204,7 +2204,7 @@ title: "Canada.ca Content Style Guide"
  • 7.1 Utiliser les liens de façon stratégique
    • -
    +
    @@ -2251,7 +2251,7 @@ title: "Canada.ca Content Style Guide"
  • 7.2 Rédiger des liens descriptifs
    • -
    +
    @@ -2262,7 +2262,7 @@ title: "Canada.ca Content Style Guide"
  • 7.3 Vérifier que les liens fonctionnent
    • -
    +
    @@ -2282,7 +2282,7 @@ title: "Canada.ca Content Style Guide"
  • 7.4 Créer des liens vers du contenu externe
    • -
    +
    @@ -2294,7 +2294,7 @@ title: "Canada.ca Content Style Guide"
  • 7.5 Créer des liens vers du contenu interne
    • -
    +
    From a3bf9eea512aad39d21edcb40a5a6caeb03ff9b4 Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Mon, 16 Oct 2023 13:08:13 -0400 Subject: [PATCH 24/27] Update index.md --- style-guide/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/style-guide/index.md b/style-guide/index.md index 17d3ba59e4..14eb7f3549 100644 --- a/style-guide/index.md +++ b/style-guide/index.md @@ -1036,7 +1036,7 @@ title: "Canada.ca Content Style Guide"
  • 4.6 Nombres
    • -
    +
    @@ -1093,7 +1093,7 @@ title: "Canada.ca Content Style Guide"
  • 4.8 Heures
    • -
    +
    @@ -1391,7 +1391,7 @@ title: "Canada.ca Content Style Guide"

    For example, listing provinces and territories in alphabetical order could be appropriate.

    If you present content in alphabetical order in English, also present it in alphabetical order in French to provide the same intuitive experience.

    -

    See how the rule for using lists applies in French

    +

    See how the rule for using lists to support scanning applies in French

    @@ -2142,12 +2142,12 @@ title: "Canada.ca Content Style Guide"
  • important sounds (such as an explosion)
  • important action (for example, people running away from an explosion or characters wearing disguises)
    • -

    See how the rule for transcripts applies in French

    +

    See how the rule for transcripts to describe audio and video files applies in French

    -
    +
    @@ -2289,7 +2289,7 @@ title: "Canada.ca Content Style Guide"

    7.5 Linking to internal-to-government content

    In most cases, public-facing content should not link to content that is accessible only through internal government networks. Occasionally, the audience for content that is accessible to the public may be primarily internal.

    When a link leads to content available only on internal government networks, write "(accessible only on the Government of Canada network)."

    -

    See how the rule for internal-to-government contente applies in French

    +

    See how the rule for internal-to-government content applies in French

    From 44f837345c89f118a4f7d8dfe431f0870188b67c Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Wed, 25 Oct 2023 09:38:55 -0400 Subject: [PATCH 25/27] Fix: PFT --- common-design-patterns/page-feedback.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/common-design-patterns/page-feedback.md b/common-design-patterns/page-feedback.md index 49d2155776..cf403a4f98 100644 --- a/common-design-patterns/page-feedback.md +++ b/common-design-patterns/page-feedback.md @@ -113,8 +113,8 @@ title: "Page feedback tool" 2a. Default view after selecting No. Text version below:
    - Image description: Default view after selectiong "No" -

    After interacting with the “No” button in, a text entry screen will replace the prompt. There is a heading for “Please provide more details” followed by instructions to not include personal information: “You will not receive a reply. Don’t include personal information (telephone, email, SIN financial, medical, or work details. Maximum 300 characters.” There is a small text entry box followed by a button for “Submit”.

    + Image description: Default view after selecting "No" +

    After interacting with the “No” button, a text entry screen will replace the prompt. There is a heading for “Please provide more details” followed by instructions to not include personal information: “You will not receive a reply. Don’t include personal information (telephone, email, SIN financial, medical, or work details. Maximum 300 characters.” There is a small text entry box followed by a button for “Submit”.

    @@ -125,7 +125,7 @@ title: "Page feedback tool" 2b. Optional view after selecting No with contact option. Text version below:
    Image description: Optional view after selecting "No" with contact option -

    After interacting with the “No” button in, a text entry screen will replace the prompt.

    +

    After interacting with the “No” button, a text entry screen will replace the prompt.

    In the contact option, there is an expand/collapse pattern with the header “Need urgent help with a problem? Contact us”. When the expand/collapse pattern is opened, there is a customizable link to contact the service.

    After the expand/collapse pattern, there is a heading for “Please provide more details” followed by instructions to not include personal information: “You will not receive a reply. Don’t include personal information (telephone, email, SIN financial, medical, or work details. Maximum 300 characters.” There is a small text entry box followed by a button for “Submit”.

    @@ -137,7 +137,7 @@ title: "Page feedback tool" 3. View after selecting Yes or after submitting feedback. Text version below:
    Image description: View after selecting "Yes" or after submitting feedback -

    When users select “Yes” from the initial prompt or after submitting their feedback, a thank you message is displayed. There is a green checkmark icon followed by the heading “Thank you for your feedback”

    +

    When users select “Yes” from the initial prompt or after submitting their feedback, a thank you message is displayed. There is a green checkmark icon followed by the heading “Thank you for your feedback”.

    @@ -145,7 +145,7 @@ title: "Page feedback tool"

    How to implement

    -

    Add the feedback tool to the bottom of a content page after the page content and before the date modified.

    +

    Add the feedback tool to the bottom of a content page after the page content and before the date modified.

    Feedback tool code for pages on the Managed Web Service (MWS)

    @@ -201,9 +201,8 @@ title: "Page feedback tool" Instructions for non-MWS pages

    Add the feedback component

    Insert the feedback tool code where the “Report a problem on this page” is located in your page's HTML.

    -
      -
    • Page Feedback Tool (default)
      • -
    • Page Feedback Tool with contact link
      • +

      Add the mandatory hidden values

      Update the data attribute for the institutional acronym. This is a unilingual value - enter the English value to your English and French pages.

      @@ -293,7 +292,7 @@ title: "Page feedback tool"

      Consider including this value when you're adding the feedback tool to multiple pages on the same topic, such as “passports” or “employment insurance”.

      This is a unilingual value - enter the English section value to your English and French pages.

      If you would like to add a new section value that is not currently in the Feedback Viewer, contact the Digital Transformation Office. We will add the new section value into the Feedback Viewer.

      -

      Email: dto.btn@tbs-sct.gc.ca

      +

      Email: dto.btn@tbs-sct.gc.ca

      Optional Contact link

      Only consider adding a contact link if you have tried to make the page content clearer for how to contact the program or service and users are still using the feedback tool to get a response for their situation.

      @@ -302,7 +301,7 @@ title: "Page feedback tool"

      Accessing and analyzing feedback

      Feedback can be viewed and downloaded as CSV or Excel files at any time using the Feedback Viewer website.

      -

      The Feedback Viewer is a password protected environment available to all page feedback participants. Contact the DTO to access to the site.

      +

      The Feedback Viewer is a password protected environment available to all page feedback participants. Contact the DTO to get access to the site.

      Email: dto.btn@tbs-sct.gc.ca

      Full guidance for using and analyzing page feedback

      From 4e316a33baca2edd58e1247cc16d4609c0c2015f Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Wed, 25 Oct 2023 11:00:27 -0400 Subject: [PATCH 26/27] Delete old pages (underscore) --- common-design-patterns/_buttons.html | 436 --------------------------- 1 file changed, 436 deletions(-) delete mode 100644 common-design-patterns/_buttons.html diff --git a/common-design-patterns/_buttons.html b/common-design-patterns/_buttons.html deleted file mode 100644 index ddba97b3e2..0000000000 --- a/common-design-patterns/_buttons.html +++ /dev/null @@ -1,436 +0,0 @@ ---- ---- - - - - - -Buttons - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - -
      -
      -
      -

      Language selection

      -
      -
      - -
      -
      -
      -
      -
      Government of Canada / Gouvernement du Canada
      -
      -

      Search

      - -
      -
      -
      - - -
      -
      -

      Buttons: Canada.ca design system

      -
      -
      -
        -
      • Last updated: 2022-09-23
        • -
      -
      -
      -
      -

      Buttons are clickable objects intended to encourage a person to take action.

      -
      - - - -
      -
      -

      On this page

      - -
      -
      -

      When to use

      -

      Use the button pattern to execute actions or commands that will change the system state at the front or back end, for example “Add comment,” “Submit,” “Send.”

      -

      Use buttons when:

      -
        -
      • helping a person into or through a transaction such as “Sign in”
        • -
      • invoking functionality, for example “Share this page”
        • -
      • providing a persistent set of UI controls across a series of pages, for example “previous”, “next”, or “back to table of contents”
        • -
      -
      -
      -

      What to avoid

      -

      Do not use buttons when an ordinary text link will do the job just as well, like when providing a single, simple link to another page.

      -

      Use buttons to activate system controls, or to draw attention to primary actions on the page. Limit their use to prevent their visual impact from being reduced by overuse.

      -
      -
      -

      How to implement

      -

      Use the right type of button:

      -
        -
      1. Supertask
        2. -
      2. Primary
        3. -
      3. Secondary
        4. -
      4. Danger
        5. -
      5. Link
        6. -
      6. Sign in
        7. -
      -

      1. Supertask button

      -

      When to use: Use a supertask button to launch the main task or next step that people are trying to complete from a specific page, such as:

      -
        -
      • apply for a program or service
        • -
      • launch a calculator
        • -
      • start a wizard
        • -
      • find a clinic
        • -
      -

      You can also use it on the Institutional landing page, when there is evidence that a particular top task (a supertask) is clearly the most important.

      -

      What to avoid: Don’t use a supertask button to promote something that is not the primary task people are looking for on that page. For promotions, use Context-specific features or Promotional feature banner.

      -

      Don't use supertask buttons more than once on a page.

      -
      - -
      -
      - Code - 
      <button class="btn btn-call-to-action">Calculate how much you can get</button>
      -
      -

      2. Primary button

      -

      When to use: Use primary buttons for actions someone is likely to take on that page, such as the next or submit buttons in a form.

      -

      What to avoid: Don't use more than one primary button on a page.

      -
      - -
      -
      - Code - 
      <button class="btn btn-primary">Submit</button>
      -
      -

      3. Secondary button

      -

      When to use: Use secondary buttons for alternative, less important or less likely to be used options, such as the 'previous' button in a form.

      -
      - -
      -
      - Code - 
      <button class="btn btn-default">Previous</button>
      -
      -

      4. Danger button

      -

      When to use: Use danger buttons to bring attention to an action that might have consequences, such as deleting a form or leaving an authenticated application.

      -

      What to avoid: Don't use danger buttons unless they are absolutely needed.

      -
      - -
      -
      - Code - 
      <button class="btn btn-danger">Erase form</button>
      -
      - -

      When to use: Use link buttons for infrequently used options, such as for restarting a wizard or calculator. Link buttons have a slightly larger target area than regular links.

      -
      - -
      -
      - Code - 
      <button class="btn btn-link">Restart calculator</button>
      -
      -

      6. Contextual Sign in button

      -

      When to use: The contextual Sign in button is an optional element of the Global header. Use it on pages where signing in to an account is an important task. Use the label "Sign in".

      - -
      -
      A square blue sign-in button at the top right of the screen
      -
      -

      Customizing buttons

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      OptionDescriptionHow to use
      Full widthMake a button occupy the full width of its column.Add the class btn-block to button.
      Grouped buttonsGroup buttons side by side for controls such as a toggle.Surround the grouped buttons with a div with the class btn-group.
      Change sizingResize buttons if you need to improve visibility of a call to action or to save space in designs such as a toggle.Apply the following classes to the button: -
        -
      • Large: btn-lg
        • -
      • Small: btn-sm
        • -
      • Extra small: btn-xs
        • -
      Disable buttonGrey out a button so it can't be clicked on. Generally, try to remove the button instead of disabling it.Add the class disabled to button.
      -
      -

      Research and blog posts

      - -
      -

      Latest changes

      -
      -
      -
      - -
      -
      Expanded Sign in button guidance
      -
      - -
      -
      Added a new beta version of a contextual Sign in button
      -
      -
      -
      -
      -

      Discussion

      -

      Discuss the pattern in github issues

      -
      -
      - -
      -
      -
      -
      -
      - - - - - - - -
      -
      -
      -

      Did you find what you were looking for?

      -
      -
      - - -
      -
      -
      - -
      -
      - What was wrong? -
      - -
      -
      - -
      -
      - -
      -
      - -
      -
      - -

      You will not receive a reply. Telephone numbers and email addresses will be - removed.
      - Maximum 300 characters

      - - -
      -
      -
      -

      Thank you for your feedback

      -
      -
      -
      -
      -
      -
      -
      -
      - - -
      -
      -
      Date modified:
      -
      - -
      -
      -
      -
      -{% include footer-en.html %} - - - - - - - - - - From 64c61bfa2012b1f6eb15e78d292d745d73037d27 Mon Sep 17 00:00:00 2001 From: prycrane Date: Wed, 25 Oct 2023 11:29:01 -0400 Subject: [PATCH 27/27] go --- _continuous-improvement.html | 305 ---- _designing-content.html | 387 ----- _gcweb-managers-signup.html | 170 --- alerts/_alerts-contact.html | 245 ---- alerts/_alerts-ilp.html | 389 ----- alerts/_alerts-sit.html | 113 -- alerts/_alerts-stable-ip.html | 388 ----- alerts/_alerts.html | 110 -- coded-layout/_generic-destination-basic.mdx | 63 - coded-layout/_generic-destination-byline.mdx | 78 - coded-layout/_generic-destination-sit1.mdx | 87 -- coded-layout/_generic-destination-sit2.mdx | 87 -- coded-layout/_generic-destination-sit3.mdx | 87 -- coded-layout/_generic-destination-tab.mdx | 115 -- coded-layout/_generic-destination-toc.mdx | 109 -- .../_institutional_landing_page_guidance.mdx | 808 ---------- coded-layout/_ministerial-profile-pages.mdx | 619 -------- coded-layout/_theme_topic_guidance.mdx | 561 ------- coded-layout/_transparency_guidance.mdx | 317 ---- common-design-patterns/_canada-dot-ca.html | 301 ---- common-design-patterns/_carousels.html | 361 ----- common-design-patterns/_charts-graphs.html | 358 ----- .../_checkboxes-radio-buttons.html | 950 ------------ .../_collapsible-content.html | 462 ------ .../_contact-information.html | 383 ----- .../_contextual-alerts.html | 453 ------ common-design-patterns/_contributors.html | 331 ----- common-design-patterns/_date-modified.html | 360 ----- .../_disclaimer-overlay.html | 337 ----- common-design-patterns/_doc-template-en.html | 377 ----- common-design-patterns/_download-links.html | 303 ---- common-design-patterns/_feature-banner.html | 334 ----- common-design-patterns/_feature-tiles.html | 331 ----- .../_global-header-workshop.html | 376 ----- common-design-patterns/_icons.html | 345 ----- common-design-patterns/_images.html | 374 ----- common-design-patterns/_in-page-toc.html | 339 ----- .../_institutional-byline.html | 329 ----- .../_interactive-questions.html | 384 ----- common-design-patterns/_labels.html | 408 ------ common-design-patterns/_latest-news.html | 426 ------ common-design-patterns/_more-information.html | 337 ----- common-design-patterns/_most-requested.html | 303 ---- common-design-patterns/_multimedia.html | 339 ----- .../_ordered-multipage.html | 347 ----- .../_privacy-disclaimer.html | 396 ----- common-design-patterns/_related-links.html | 344 ----- common-design-patterns/_report-problem.html | 540 ------- .../_services-information.html | 394 ----- common-design-patterns/_share-page.html | 380 ----- .../_site-footer-content.html | 310 ---- .../_social-media-channels.html | 313 ---- .../_social-media-feeds.html | 310 ---- .../_subway-navigation-new.html | 582 -------- common-design-patterns/_subway-navigation.mdx | 664 --------- common-design-patterns/_tabbed-interface.html | 338 ----- common-design-patterns/_tables.html | 460 ------ .../_what-we-are-doing.html | 393 ----- common-design-patterns/fragments/_basic.mdx | 8 - .../fragments/_gc-subway-index.mdx | 70 - .../fragments/_gc-subway-page.mdx | 112 -- community/_contribution-process.html | 221 --- community/_landing.html | 201 --- continuous-improvement/_choosing.html | 365 ----- continuous-improvement/_designing.html | 456 ------ continuous-improvement/_monitoring.html | 323 ---- continuous-improvement/_research.html | 636 -------- continuous-improvement/_team.html | 494 ------- crisis/_alerts.html | 278 ---- crisis/_content.html | 456 ------ events/_Canada-ca-fall-update-2019.html | 139 -- ...a-ca-spring-update-2019-questionnaire.html | 138 -- events/_Canada-ca-spring-update-2019.html | 134 -- ...a.ca-Update-Authorization-and-Release.html | 56 - guidance/_structured-data.html | 855 ----------- layout/_contact-aside-demo.html | 409 ------ layout/_contact-aside-rationale.html | 219 --- layout/_contact-aside.html | 234 --- layout/_service-contact-demo.html | 409 ------ layout/_service-contact-rationale.html | 219 --- layout/_service-contact.html | 234 --- .../demos/contact-aside/wet4/_link-list.html | 0 .../demos/contact-aside/wet4/_mail-only.html | 0 .../demos/contact-aside/wet4/_phone-mail.html | 0 .../demos/contact-aside/wet4/_phone-only.html | 119 -- .../wet4/_multi-channel-audience.html | 322 ---- .../service-contact/wet4/_multi-channel.html | 0 layout/demos/service-contact/wet4/_phone.html | 119 -- mandatory-templates/_audience-pages.html | 535 ------- .../_department-agencies-page.html | 432 ------ mandatory-templates/_home-page.html | 595 -------- .../_institutional-profile-pages.html | 1301 ----------------- .../_ministerial-profile-pages.html | 404 ----- mandatory-templates/_news-pages-2.html | 874 ----------- mandatory-templates/_news-pages.html | 939 ------------ .../_organizational-profile-pages.html | 881 ----------- mandatory-templates/_search-page.html | 601 -------- mandatory-templates/_theme-topic.html | 1140 --------------- recommended-templates/_campaign-pages.html | 681 --------- .../_collection-landing-pages.html | 471 ------ .../_consultations-page.html | 501 ------- recommended-templates/_contact-us-pages.html | 1004 ------------- .../_generic-destination.html | 355 ----- .../_guidance-legislation-pages.html | 740 ---------- ...l-service-performance-reporting-pages.html | 494 ------- .../_laws-regulations-pages.html | 790 ---------- recommended-templates/_pages-index.html | 887 ----------- ...llaborative-arrangement-profile-pages.html | 547 ------- .../_program-description-pages.html | 382 ----- .../_promotional-events-pages.html | 408 ------ .../_service-initiation-pages.html | 619 -------- recommended-templates/_transparency.html | 387 ----- redirect-test/icons.md | 45 - styles/_colours.html | 179 --- styles/_layouts.html | 228 --- styles/_typography.html | 251 ---- survey/_about.html | 369 ----- survey/_analytics.html | 341 ----- survey/_clusters.html | 784 ---------- survey/_take-action.html | 344 ----- survey/_tasks-covid.html | 208 --- survey/_tasks-cra.html | 208 --- survey/_tasks.html | 208 --- 123 files changed, 46769 deletions(-) delete mode 100644 _continuous-improvement.html delete mode 100644 _designing-content.html delete mode 100644 _gcweb-managers-signup.html delete mode 100644 alerts/_alerts-contact.html delete mode 100644 alerts/_alerts-ilp.html delete mode 100644 alerts/_alerts-sit.html delete mode 100644 alerts/_alerts-stable-ip.html delete mode 100644 alerts/_alerts.html delete mode 100644 coded-layout/_generic-destination-basic.mdx delete mode 100644 coded-layout/_generic-destination-byline.mdx delete mode 100644 coded-layout/_generic-destination-sit1.mdx delete mode 100644 coded-layout/_generic-destination-sit2.mdx delete mode 100644 coded-layout/_generic-destination-sit3.mdx delete mode 100644 coded-layout/_generic-destination-tab.mdx delete mode 100644 coded-layout/_generic-destination-toc.mdx delete mode 100644 coded-layout/_institutional_landing_page_guidance.mdx delete mode 100644 coded-layout/_ministerial-profile-pages.mdx delete mode 100644 coded-layout/_theme_topic_guidance.mdx delete mode 100644 coded-layout/_transparency_guidance.mdx delete mode 100644 common-design-patterns/_canada-dot-ca.html delete mode 100644 common-design-patterns/_carousels.html delete mode 100644 common-design-patterns/_charts-graphs.html delete mode 100644 common-design-patterns/_checkboxes-radio-buttons.html delete mode 100644 common-design-patterns/_collapsible-content.html delete mode 100644 common-design-patterns/_contact-information.html delete mode 100644 common-design-patterns/_contextual-alerts.html delete mode 100644 common-design-patterns/_contributors.html delete mode 100644 common-design-patterns/_date-modified.html delete mode 100644 common-design-patterns/_disclaimer-overlay.html delete mode 100644 common-design-patterns/_doc-template-en.html delete mode 100644 common-design-patterns/_download-links.html delete mode 100644 common-design-patterns/_feature-banner.html delete mode 100644 common-design-patterns/_feature-tiles.html delete mode 100644 common-design-patterns/_global-header-workshop.html delete mode 100644 common-design-patterns/_icons.html delete mode 100644 common-design-patterns/_images.html delete mode 100644 common-design-patterns/_in-page-toc.html delete mode 100644 common-design-patterns/_institutional-byline.html delete mode 100644 common-design-patterns/_interactive-questions.html delete mode 100644 common-design-patterns/_labels.html delete mode 100644 common-design-patterns/_latest-news.html delete mode 100644 common-design-patterns/_more-information.html delete mode 100644 common-design-patterns/_most-requested.html delete mode 100644 common-design-patterns/_multimedia.html delete mode 100644 common-design-patterns/_ordered-multipage.html delete mode 100644 common-design-patterns/_privacy-disclaimer.html delete mode 100644 common-design-patterns/_related-links.html delete mode 100644 common-design-patterns/_report-problem.html delete mode 100644 common-design-patterns/_services-information.html delete mode 100644 common-design-patterns/_share-page.html delete mode 100644 common-design-patterns/_site-footer-content.html delete mode 100644 common-design-patterns/_social-media-channels.html delete mode 100644 common-design-patterns/_social-media-feeds.html delete mode 100644 common-design-patterns/_subway-navigation-new.html delete mode 100644 common-design-patterns/_subway-navigation.mdx delete mode 100644 common-design-patterns/_tabbed-interface.html delete mode 100644 common-design-patterns/_tables.html delete mode 100644 common-design-patterns/_what-we-are-doing.html delete mode 100644 common-design-patterns/fragments/_basic.mdx delete mode 100644 common-design-patterns/fragments/_gc-subway-index.mdx delete mode 100644 common-design-patterns/fragments/_gc-subway-page.mdx delete mode 100644 community/_contribution-process.html delete mode 100644 community/_landing.html delete mode 100644 continuous-improvement/_choosing.html delete mode 100644 continuous-improvement/_designing.html delete mode 100644 continuous-improvement/_monitoring.html delete mode 100644 continuous-improvement/_research.html delete mode 100644 continuous-improvement/_team.html delete mode 100644 crisis/_alerts.html delete mode 100644 crisis/_content.html delete mode 100644 events/_Canada-ca-fall-update-2019.html delete mode 100644 events/_Canada-ca-spring-update-2019-questionnaire.html delete mode 100644 events/_Canada-ca-spring-update-2019.html delete mode 100644 events/_Canada.ca-Update-Authorization-and-Release.html delete mode 100644 guidance/_structured-data.html delete mode 100644 layout/_contact-aside-demo.html delete mode 100644 layout/_contact-aside-rationale.html delete mode 100644 layout/_contact-aside.html delete mode 100644 layout/_service-contact-demo.html delete mode 100644 layout/_service-contact-rationale.html delete mode 100644 layout/_service-contact.html delete mode 100644 layout/demos/contact-aside/wet4/_link-list.html delete mode 100644 layout/demos/contact-aside/wet4/_mail-only.html delete mode 100644 layout/demos/contact-aside/wet4/_phone-mail.html delete mode 100644 layout/demos/contact-aside/wet4/_phone-only.html delete mode 100644 layout/demos/service-contact/wet4/_multi-channel-audience.html delete mode 100644 layout/demos/service-contact/wet4/_multi-channel.html delete mode 100644 layout/demos/service-contact/wet4/_phone.html delete mode 100644 mandatory-templates/_audience-pages.html delete mode 100644 mandatory-templates/_department-agencies-page.html delete mode 100644 mandatory-templates/_home-page.html delete mode 100644 mandatory-templates/_institutional-profile-pages.html delete mode 100644 mandatory-templates/_ministerial-profile-pages.html delete mode 100644 mandatory-templates/_news-pages-2.html delete mode 100644 mandatory-templates/_news-pages.html delete mode 100644 mandatory-templates/_organizational-profile-pages.html delete mode 100644 mandatory-templates/_search-page.html delete mode 100644 mandatory-templates/_theme-topic.html delete mode 100644 recommended-templates/_campaign-pages.html delete mode 100644 recommended-templates/_collection-landing-pages.html delete mode 100644 recommended-templates/_consultations-page.html delete mode 100644 recommended-templates/_contact-us-pages.html delete mode 100644 recommended-templates/_generic-destination.html delete mode 100644 recommended-templates/_guidance-legislation-pages.html delete mode 100644 recommended-templates/_institutional-service-performance-reporting-pages.html delete mode 100644 recommended-templates/_laws-regulations-pages.html delete mode 100644 recommended-templates/_pages-index.html delete mode 100644 recommended-templates/_partnering-collaborative-arrangement-profile-pages.html delete mode 100644 recommended-templates/_program-description-pages.html delete mode 100644 recommended-templates/_promotional-events-pages.html delete mode 100644 recommended-templates/_service-initiation-pages.html delete mode 100644 recommended-templates/_transparency.html delete mode 100644 redirect-test/icons.md delete mode 100644 styles/_colours.html delete mode 100644 styles/_layouts.html delete mode 100644 styles/_typography.html delete mode 100644 survey/_about.html delete mode 100644 survey/_analytics.html delete mode 100644 survey/_clusters.html delete mode 100644 survey/_take-action.html delete mode 100644 survey/_tasks-covid.html delete mode 100644 survey/_tasks-cra.html delete mode 100644 survey/_tasks.html diff --git a/_continuous-improvement.html b/_continuous-improvement.html deleted file mode 100644 index 3cf26765de..0000000000 --- a/_continuous-improvement.html +++ /dev/null @@ -1,305 +0,0 @@ ---- ---- - - - - - - Continuous improvement of the Government of Canada web content - Intro - Canada.ca - - - - - - - - - - - - - - - -
      -
      -
      -

      Language selection

      -
      -
      - -
      -
      -
      -
      -
      - Government of Canada / Gouvernement du Canada -
      -
      -

      Search

      - -
      -
      -
      - - -
      -
      -

      Continuous improvement of web content

      - - - -

      Continuously improving web content is essential to ensure people get what they need from their government. - - -

      - - -
      - -

      Services and information

      - -
      -
      -
      -

      Choosing what to improve

      -

      Use a task-based approach, top tasks, improving the right thing

      -
      -
      -
      -
      -

      Organizing and preparing your team

      -

      Establish your team, set up your governance structure, plan for efficient approvals

      -
      -
      -
      -
      -

      Research and prototyping

      -

      Process, initiation, discovery, baseline testing, prototyping, comparison testing

      -
      -
      -
      -
      -

      Designing content

      -

      Focus on task success, foster trust, build in accessibility and inclusivity, help people find, understand and use the content

      -
      - -
      - - -
      -
      -

      Monitoring and measuring success

      -

      Establish performance indicators, GC Task success survey, continuous improvement

      -
      -
      -
      - -
      - - - - - -
      - - -
      -
      -
      -
      -
      - - - - - - - -
      -
      -
      -

      Did you find what you were looking for?

      -
      -
      - - -
      -
      -
      - -
      -
      - What was wrong? -
      - -
      -
      - -
      -
      - -
      -
      - -
      -
      - -

      - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
      - Maximum 300 characters -

      - - -
      -
      -
      -

      Thank you for your feedback

      -
      -
      -
      -
      -
      -
      -
      -
      -
      - -
      - -
      -
      Date modified:
      -
      -
      -
      - -
      - {% include footer-en.html %} - - - - - - - diff --git a/_designing-content.html b/_designing-content.html deleted file mode 100644 index cb5ed9833a..0000000000 --- a/_designing-content.html +++ /dev/null @@ -1,387 +0,0 @@ ---- ---- - - - - - - Designing content on Canada.ca - Canada.ca - - - - - - - - - - - - - - - - -
      -
      -
      -

      Language selection

      -
      -
      - -
      -
      -
      -
      -
      - Government of Canada / Gouvernement du Canada -
      -
      -

      Search

      - -
      -
      -
      - - -
      -
      -

      Designing content for Canada.ca

      - -

      When you design content for Canada.ca, you design for people. The goal is to help people get what they need from the government.

      - - -
      - - -
      -

      On this page

      - -
      - -
      - - -

      Focus on the task

      - -

      First, determine the task at hand: what is it that users are trying to do when they get to the page or set of webpages?

      - -

      Tasks can be things like:

      - -
        -
      • apply for a benefit
        • -
      • get a copy of an official document
        • -
      • check the weather
        • -
      • look for jobs
        • -
      • find out if a business name is available
        • -
      - -

      One question should drive all design decisions: does it help people succeed in completing the task?

      - - - - - -

      Design for trust

      - -

      Using a consistent look throughout the Government of Canada web presence is crucial to building a trustworthy experience for people. People need to know they'll find information they can trust.

      - -

      Use the mandatory elements of the Canada.ca design system to implement this trusted brand.

      - -

      The mandatory elements you need to follow are:

      - -
        -
      • Canada.ca domain
        • -
      • mandatory styles (typography, colours and layouts)
        • -
      • standard header and footer
        • -
      • a handful of high-level mandatory templates to establish a consistent institutional presence and the Canada.ca topic tree
        • -
      - -

      Once you've applied this uniform brand, you can still use creativity within the body of the page to come up with the best design to help people complete their tasks.

      - - - - - - -

      Design for findability

      -

      People can’t succeed at a task if they can’t find where to initiate it.

      -

      To improve findability, you can work on:

      -
        -
      • navigation
        • -
      • internal and external search
        • -
      - -

      Navigation

      - -

      Some people will navigate to their task on the Canada.ca site. To support this, making a clear path for people's tasks is crucial. That means planning your navigation structure and taking time to understand what labels will work best for your audience.

      - - - -

      Internal and external search

      -

      Some people will search on Canada.ca or external search engines.

      -

      Using the right keywords and organizing your content properly can help improve search results. Adding structured data can also be a useful technique.

      - - - -

      Design for comprehension

      - -

      Once people find the page they need, they have to be able to understand what they read. The way we write and the words we use make an enormous difference.

      - - - -

      Design for usability

      -

      Use patterns and layouts that will make it easy for people to complete their tasks. This could be simple text, a filterable table, a button, an interactive checklist or other patterns.

      - -

      If you can't find an existing pattern or template in the library that does everything you need, you can get creative as long as you respect the mandatory elements of the design system. If your solution works well, we may add it to the Canada.ca design system for others to use when they have similar needs.

      - -

      Do usability testing to make sure your design really does help people complete their tasks.

      - - - -

      Design for accessibility and inclusivity

      - -

      Accessibility and inclusivity have to be at the forefront of your design. Just like translation, accessibility and inclusivity are non-negotiable.

      - -

      Make sure your design is accessible as you develop it, not as an after-thought.

      - -

      The Standard on Web Accessibility requires all GC web pages to meet level AA of the Web Content Accessibility Guidelines (WCAG ) 2.0 requirements.

      -

      But this is only the minimum standard: if possible, shoot for AAA and WCAG 2.1 requirements.

      - - - -
      - - -
      -
      -
      -
      -
      - - - - - - - -
      -
      -
      -

      Did you find what you were looking for?

      -
      -
      - - -
      -
      -
      - -
      -
      - What was wrong? -
      - -
      -
      - -
      -
      - -
      -
      - -
      -
      - -

      - You will not receive a reply. Telephone numbers and email addresses will be removed. -
      - Maximum 300 characters -

      - - -
      -
      -
      -

      Thank you for your feedback

      -
      -
      -
      -
      -
      -
      -
      -
      - - -
      - -
      -
      Date modified:
      -
      -
      -
      -
    - - {% include footer-en.html %} - - - - - - - - - - - diff --git a/_gcweb-managers-signup.html b/_gcweb-managers-signup.html deleted file mode 100644 index 14eae416ed..0000000000 --- a/_gcweb-managers-signup.html +++ /dev/null @@ -1,170 +0,0 @@ ---- ---- - - - - - - - Sign up for the GC Web managers mailing list - Canada.ca - - - - - - - - - - - - -
    -
    - - - -
    - -

    Sign up for the GC Web managers mailing list

    - - - -
    -
    -
    -
    * indicates required
    -
    - - - -
    -
    - - - -
    -
    - - - -
    -
    - Email Format -
      -
      • -
      • -
    -
    -
    - - -
    - - -
    -
    -
    -
    - - - -
    -
    - - -
    - {% include footer-en.html %} - - - - - - diff --git a/alerts/_alerts-contact.html b/alerts/_alerts-contact.html deleted file mode 100644 index 899572ac61..0000000000 --- a/alerts/_alerts-contact.html +++ /dev/null @@ -1,245 +0,0 @@ ---- ---- - - - - - - - Alerts - Contact page - Canada.ca - - - - - - - - - - - - -
    -
    - - - -
    - - -
    -

    Alerts - Contact page

    - - -
    -

    Limited service availability -

    -

    Due to the coronavirus (COVID-19) outbreak, you may experience longer than normal wait times on our phone lines. The automated phone lines are available. If possible, use the online self-service options. -

    -

    Check service status updates -

    -
    - - - -
    -
    -

    Most requested

    -
    -
    -
    -

    Issues with payments to the CRA

    -
    -
    -
    -
    -

    Get in-person tax help

    -
    -
    -
    -
    -

    Change address or details

    -
    -
    -
    -
    -

    Direct deposit and banking

    -
    -
    -
    -
    -

    Report a scam

    -
    -
    -
    -
    -

    Represent a client

    -
    -
    -
    - -
    - -
    -
    - -
    -
    -
    - -
    -
    -

    Find a mailing address

    -

    Find the mailing addresses for your region.

    - Find an address
    -
    -

    -

    -
    - -
    -
    -
    - -
    -
    -
    -

    Contacts for personal taxes

    -
    -
    -
    -

    Issues with My Account

    -
    -
    -
    -
    -

    Get a Notice of Assessment

    -
    -
    -
    -
    -

    Get a GST/HST credit payment

    -
    -
    -
    -
    -

    Get a proof of income (option 'C')

    -
    -
    -
    -
    -

    Check your tax refund status

    -
    -
    -
    -
    -

    Canada child benefit payments

    -
    -
    -
    - -
    -
    - - -
    -
    -
    -
    -
    -

    Contacts for business taxes

    -
    -
    -
    -

    Issues with My Business Account

    -
    -
    -
    -
    -

    Get an access code (business)

    -
    -
    -
    -
    -

    Charging GST/HST

    -
    -
    -
    -
    -

    EFILE Helpdesk

    -
    -
    -
    -
    -

    Check my instalment balance

    -
    -
    -
    -
    -

    Get a business number (register)

    -
    -
    -
    - - -
    - - -
    - - -
    -
    - - -
    -
    -
    - - -
    -
    - {% include footer-en.html %} - - - - diff --git a/alerts/_alerts-ilp.html b/alerts/_alerts-ilp.html deleted file mode 100644 index ef47d2f5bc..0000000000 --- a/alerts/_alerts-ilp.html +++ /dev/null @@ -1,389 +0,0 @@ ---- ---- - - - - - - - Alerts - Insitutional landing page - Canada.ca - - - - - - - - - - - - - - - -
    -
    - - - - - -
    - - - -
    -
    -
    -

    Limited service availability -

    -

    Some of our telephone and online services are affected by the outbreak of coronavirus (COVID-19). -

    -

    Check service status updates -

    -
    -
    -
    - -
    -
    -
    -
    -

    [Institution name]

    -

    Short description of the institution’s mandate.

    - Super task button [optional] -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Featured

    - Featured link [optional] -
    -
    -
    -
    -
    -
    -
    -
    -

    Most requested

    - -
    -
    -
    -
    -
    -
    -
    -

    Services and information

    -
    -
    -

    [Hyperlink text]

    -

    - Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

    -
    -
    -

    [Hyperlink text]

    -

    - Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

    -
    -
    -

    [Hyperlink text]

    -

    - Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

    -
    -
    -

    [Hyperlink text]

    -

    - Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

    -
    -
    -

    [Hyperlink text]

    -

    - Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

    -
    -
    -

    [Hyperlink text]

    -

    - Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

    -
    -
    -

    [Hyperlink text]

    -

    - Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

    -
    -
    -

    [Hyperlink text]

    -

    - Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

    -
    -
    -

    [Hyperlink text]

    -

    - Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    Contact us

    - -
    -

    Contact [Institution]

    -
    -
    -

    [Top contact task 2]

    -
    -
    -

    [Top contact task 3]

    -
    -
    -
    -
    -
    -

    About the [Institution]

    -
    -
    -
    -

    - Mandate -

    -
    -
    -
    -
    -

    - Organizational structure -

    -
    -
    -
    -
    -

    - Transparency -

    -
    -
    -
    -
    -

    - Job opportunities -

    -
    -
    -
    -
    -

    - Reports -

    -
    -
    -
    -
    -

    - Compliance -

    -
    -
    -
    -
    -

    - Enforcement notifications -

    -
    -
    -
    -
    -

    - Institutional link -

    -
    -
    -
    -
    -

    - Institutional link -

    -
    -
    -
    -
    -

    - More: - About the [Institution] -

    -
    -
    -
    -
    -
    -
    -

    Minister

    -

    [(Honourable) first and last name]
    - Minister's official title

    -

    [(Honourable) first and last name]
    - Minister's official title

    -

    [(Honourable) first and last name]
    - Minister's official title

    -
    -
    -

    Follow us

    - -
    -
    -
    -
    -
    - -
    -
    -
    -

    News

    - - -

    More: [Institution] news

    -
    -
    -

    Features

    -
    -
    - -
    - # -

    [Featured hyperlink text]

    -

    Brief description of the feature being promoted.

    -
    -     -
    -
    - -
    - # -

    [Featured hyperlink text]

    -

    Brief description of the feature being promoted.

    -
    -     -
    -
    -
    -
    -
    - -
    -
    -
    - - -
    - - {% include footer-en.html %} - - - - diff --git a/alerts/_alerts-sit.html b/alerts/_alerts-sit.html deleted file mode 100644 index ba2c06726f..0000000000 --- a/alerts/_alerts-sit.html +++ /dev/null @@ -1,113 +0,0 @@ ---- ---- - - - - - - - Alerts - Service initiation page - Canada.ca - - - - - - - - - - - - - -
    -
    - - - -
    - -

    Alerts - Service initiation

    - -
    -
    - -
    -
    -
    -
    -
    -

    Limited service availability -

    -

    This service is affected by the outbreak of coronavirus (COVID-19). -

    -

    Check service status updates -

    -
    -

    1. [Step / section page name]

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et a adipisci nostrum optio dolorum sint ipsa facilis nisi quisquam laboriosam.

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odio adipisci ad neque distinctio quod molestias, molestiae accusamus quo aspernatur expedita blanditiis quam! Esse cum modi atque, beatae aliquam, dolor.

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aliquid hic numquam obcaecati ea, laborum accusamus culpa atque voluptate distinctio et omnis! Alias, beatae, tenetur.

    -
    -

    [Sub heading]

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti cupiditate voluptatem praesentium, facilis corporis magni esse reiciendis distinctio. Vitae totam iste porro, esse facere obcaecati? Laborum earum minus harum enim.

    -
    -
    -

    [Sub heading]

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa hic minima magni nesciunt nam. Facilis perferendis, adipisci voluptates, enim illo perspiciatis molestias itaque iste qui distinctio asperiores quidem voluptatum sunt.

    -
    - -
    - -
    -
    - - -
    - {% include footer-en.html %} - - - - diff --git a/alerts/_alerts-stable-ip.html b/alerts/_alerts-stable-ip.html deleted file mode 100644 index ebebe35025..0000000000 --- a/alerts/_alerts-stable-ip.html +++ /dev/null @@ -1,388 +0,0 @@ ---- ---- - - - - - - - Alerts - Service initiation page - Canada.ca - - - - - - - - - - - - -
    -
    - - - -
    - -

    Alerts - stable Insitutional profile template

    - -
    -
    -
    -

    Limited service availability -

    -

    Due to the coronavirus (COVID-19) outbreak, you may experience longer than normal wait times on our phone lines. - The automated phone lines are available. If possible, use the online self-service options. -

    -

    Check service status updates -

    -
    -
    -
    -

    The Canadian Food Inspection Agency is dedicated to safeguarding food, animals and plants, which enhances the - health and well-being of Canada's people, environment and economy.

    -
    -
    -
    -
    -
    -

    Follow:

    - -
    - -
    -
    -
    -
    -
    -

    Latest

    -
    -
    -
    - -
    - - - Coronavirus disease (COVID-19) - -

    Outbreak update

    -
    - - -
    - - - Help keep African swine fever out of Canada - - -

    Learn about African swine fever and how to protect Canadian pigs.

    -
    -
    -
    -
    -
      -
      -
    -

    All recalls -

    -
    -
    -
    -
    -
    -
    -

    - Most requested -

    - -
    -
    -
    -

    Services and information

    -
    -
    -
    -

    Food recalls

    -

    Warnings and allergy alerts.

    -
    -
    -
    -
    -

    Travelling with pets, - food or plants

    -

    Rules for travelling with a pet or bringing food or plants to Canada.

    -
    -
    -
    -
    -

    Importing food, plants or - animals

    -

    Permits, notices, support and online services.

    -
    -
    -
    -
    -

    Exporting food, plants or - animals

    -

    Licences, certificates, guidance, notices, and online services.

    -
    -
    -
    -
    -

    Food label requirements

    -

    Claims and statements, standards of identity, grades, notices to industry, reading labels.

    -
    -
    -
    -
    -

    Food safety for industry

    -

    Standards and guidelines, investigation and response, testing bulletins, report a concern.

    -
    -
    -
    -
    -

    Food licences

    -

    How to apply, timelines, licence registry.

    -
    -
    -
    -
    -

    Inspection and enforcement -

    -

    Guidance, investigations, enforcement action and data, compliance. -

    -
    -
    -
    -
    -

    Plant health

    -

    Plant pests and invasive species, fertilizer, soil, grains and field crops, seeds, cannabis, forestry, - and horticulture.

    -
    -
    -
    -
    -

    Animal health

    -

    Biosecurity, humane transport, animal welfare, disease and surveillance, feed, veterinary biologics.

    -
    -
    -
    -
    -

    Plant varieties

    -

    How to register, registered and cancelled varieties, Plant Breeders' Rights, plants with novel traits, - potato varieties.

    -
    -
    -
    -
    -

    Preventive controls

    -

    Rules and best practices for people, property and processes.

    -
    -
    -
    -
    -

    Organic products

    -

    Standards, claims, sampling, testing, logos, labels.

    -
    -
    - -
    -
    -
    -
    -

    - Contact us -

    - -
    -
    -
    -
    - -
    -

    Corporate information

    -
    -
    - -
    -
    -
    -
    -

    Minister

    - -
    - -
    The Honourable Patty Hajdu
    -
    -     -

    Minister of Health

    -
    -
    -

    Management

    - -
    - -
    Dr. Siddika Mithani
    -
    -     -

    CFIA President

    -
    -
    - -
    -
    -
    -
    -
    -
    -

    Features

    -
    -
    - -
    -
    International Year of Plant Health 2020
    - -

    Learn what it is, and how you can get involved.

    -
    -     -
    - -
    - -
    -
    Get the latest, in real time

    - -

    Subscribe today for food safety, plant and animal health information.

    -
    -     -
    - -
    - -
    -
    CFIA from every angle

    - -

    Learn about what we do and how we do it.

    -
    -     -
    -
    -
    - - -
    -
    - - -
    - {% include footer-en.html %} - - - - - - diff --git a/alerts/_alerts.html b/alerts/_alerts.html deleted file mode 100644 index 21f6769eb2..0000000000 --- a/alerts/_alerts.html +++ /dev/null @@ -1,110 +0,0 @@ ---- ---- - - - - - - - Alerts - Canada.ca - - - - - - - - - - - - -
    -
    - - - -
    - -

    Alerts

    -
    - - -
    -

    Limited service availability -

    -

    This service is affected by the outbreak of coronavirus (COVID-19). -

    -

    Check service status updates -

    -
    -
    -

    Limited service availability -

    -

    Due to the coronavirus (COVID-19) outbreak, some of our offices may be closed and you may experience longer than normal wait times on our phone lines. If it is possible, use the online self-service options. -

    -

    Check service status updates -

    -
    -
    -

    Limited service availability -

    -

    Some of our telephone and online service is affected by the outbreak of coronavirus (COVID-19). -

    -

    Check service status updates -

    -
    - - -
    - - - -
    -
    - - -
    - {% include footer-en.html %} - - - - - - diff --git a/coded-layout/_generic-destination-basic.mdx b/coded-layout/_generic-destination-basic.mdx deleted file mode 100644 index fb56c556d7..0000000000 --- a/coded-layout/_generic-destination-basic.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-base.html -date: null -dateModified: '2019-11-28' -description: null -title: 'Basic page ' ---- - -

    - - Back to main template page - -

    - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - - - - -

    - Components used in this layout -

    - - - - - - - - diff --git a/coded-layout/_generic-destination-byline.mdx b/coded-layout/_generic-destination-byline.mdx deleted file mode 100644 index 5f70e02233..0000000000 --- a/coded-layout/_generic-destination-byline.mdx +++ /dev/null @@ -1,78 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-institution.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with institutional byline ---- - -

    - - Back to main template page - -

    - - -

    - - From: - - Treasury Board of Canada Secretariat - - -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - - - - -

    - Components used in this layout -

    - - - - - - - - - diff --git a/coded-layout/_generic-destination-sit1.mdx b/coded-layout/_generic-destination-sit1.mdx deleted file mode 100644 index 8f4dea8ba9..0000000000 --- a/coded-layout/_generic-destination-sit1.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-sit1.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with ordered navigation - Page 1 ---- - -

    - - Back to main template page - -

    - - -
    -
    - -
    -
    - -

    - First page -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - - - - -

    - Components used in this layout -

    - - - - - - - - - diff --git a/coded-layout/_generic-destination-sit2.mdx b/coded-layout/_generic-destination-sit2.mdx deleted file mode 100644 index 8e6c78885c..0000000000 --- a/coded-layout/_generic-destination-sit2.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-sit2.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with ordered navigation - Page 2 ---- - -

    - - Back to main template page - -

    - - -
    -
    - -
    -
    - -

    - Second page -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - - - - -

    - Components used in this layout -

    - - - - - - - - - diff --git a/coded-layout/_generic-destination-sit3.mdx b/coded-layout/_generic-destination-sit3.mdx deleted file mode 100644 index 2f17e4d615..0000000000 --- a/coded-layout/_generic-destination-sit3.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-sit3.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with ordered navigation - Page 3 ---- - -

    - - Back to main template page - -

    - - -
    -
    - -
    -
    - -

    - Third page -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - - - - -

    - Components used in this layout -

    - - - - - - - - - diff --git a/coded-layout/_generic-destination-tab.mdx b/coded-layout/_generic-destination-tab.mdx deleted file mode 100644 index 42274ce022..0000000000 --- a/coded-layout/_generic-destination-tab.mdx +++ /dev/null @@ -1,115 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-onglet.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with tabbed interface ---- - -

    - - Back to main template page - -

    - - -
    -
    -
    - - Tab label 1 - -

    - Section heading for first tab -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    -

    - Sub-section heading -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    -

    - Sub-section heading -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    -
    -
    - - Tab label 2 - -

    - Section heading for second tab -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    -

    - Sub-section heading -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    -

    - Sub-section heading -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    -
    -
    - - Tab label 3 - -

    - Section heading for third tab -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    -

    - Sub-section heading -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    -

    - Sub-section heading -

    -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    -
    -
    -
    - - - - -

    - Components used in this layout -

    - - - - - - - - - diff --git a/coded-layout/_generic-destination-toc.mdx b/coded-layout/_generic-destination-toc.mdx deleted file mode 100644 index 9baf61a640..0000000000 --- a/coded-layout/_generic-destination-toc.mdx +++ /dev/null @@ -1,109 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-toc.html -date: null -dateModified: null -description: null -title: Basic page with in-page table of contents ---- - -

    - - Back to main template page - -

    - - -

    - This is an optional intro text before the table of contents. -

    - -
    -

    - On this page -

    - -
    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Section 1 -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Sub-section heading -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Section 2 -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Section 3 -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

    - -

    - Components used in this layout -

    - - - - - - - - - diff --git a/coded-layout/_institutional_landing_page_guidance.mdx b/coded-layout/_institutional_landing_page_guidance.mdx deleted file mode 100644 index 38e93e9e7e..0000000000 --- a/coded-layout/_institutional_landing_page_guidance.mdx +++ /dev/null @@ -1,808 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/accueil-institution-directives.html -breadcrumbs: [] -date: null -dateModified: '2021-10-07' -description: null -title: '[Institution name]' ---- - -
    -
    -
    -
    - - - Guidance: - - breadcrumb - - - -

    - - Mandatory - -

    -

    - The breadcrumb is: - - Canada.ca - - . -

    -
    -
    -
    -
    - -
    -
    -
    -
    -

    - Short description of the institution’s mandate. -

    - - Super task button [optional] - -
    -
    -
    -
    -
    -
    -
    - -

    - Guidance: title, image and super task button -

    - - -     -

    - Title -

    -

    - - Mandatory - -

    -

    - Use the applied title of the institution, as specified in the - - Registry of Applied Titles - - . -

    -

    - Use the legal title if the applied title is not available. -

    -

    - Do not use acronyms or abbreviations. -

    -

    - Image -

    -

    - - Optional - -

    -

    - The 1200x726 space behind the H1 can be used for a banner or image. The image does not have to take up the whole space and can be customised as needed. -

    -

    - The image and H1 should be visually distinct from the - - Canada.ca homepage - - to prevent confusion between institutional landing pages and Canada.ca. -

    -

    - If you don't use an image, the background should be white. -

    -

    - - Variation: - - The class - - bg-hide-sm - - hides the image on tablet, - - bg-hide-xs - - hides the image on mobile and - - bg-right - - positions the image on the right. -

    -

    - Super task button -

    -

    - - Optional - -

    -

    - Only include a super task button if there is a specific task that has at least a third of the clickthrough on the institution's home page. This is intended mainly for signing into an account. -

    -
    -
    -
    -
    -
    - -
    -
    -

    - Featured link -

    - - Featured link [optional] - -
    -
    -
    - - - Guidance: - - featured link - - - -

    - - Optional - -

    -

    - The featured link is a short, descriptive link that your institution needs to feature prominently. It should be used to bring attention to warnings or notices. -

    -

    - Don't include images in this section. -

    -

    - The "Featured" heading in this section should have the - - wb-inv - - class, so it is not visible, but still present for the semantic outline and screen readers. -

    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -

    - Most requested -

    -
    -
    - -
    -
    -
    -
    -
    - - - Guidance: - - Most requested - - - -

    - - Optional - -

    -

    - Features institution-specific top tasks. -

    -

    - This component provides shortcuts to the institution's top tasks. However, if all of the institution's top tasks are already included as direct links under Services and information, do not duplicate them here. In that case, you can choose not to include this component. -

    -

    - - Variations: - - Replace the - - colcount-md-2 - - class with - - colcount-md-1 - - to make it 1 column instead of 2. -

    -
    -
    -
    -
    -
    - -
    -
    -
    -

    - Services and information -

    -
    -
    -

    - - [Hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

    -
    -
    -

    - - [Hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

    -
    -
    -

    - - [Hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

    -
    -
    -

    - - [Hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

    -
    -
    -

    - - [Hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

    -
    -
    -

    - - [Hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

    -
    -
    -

    - - [Hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

    -
    -
    -

    - - [Hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

    -
    -
    -

    - - [Hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

    -
    -
    -
    -
    -
    -
    -
    -
    - - - Guidance: - - Services and information - - - -

    - - Mandatory - -

    -

    - Lists the institution-specific topics or top tasks. -

    -

    - The "Services and information" heading in this section should have the - - wb-inv - - class, so it is not visible, but is still present for the semantic outline and for screen readers. -

    -

    - - Variations: - - Any variations of the - - Services and information - - pattern can be used in this section. -

    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -

    - Contact us -

    - -
    -
    -
    -

    - About the [Institution] -

    - -
    -
    -
    -

    - Minister -

    -

    - - [(Honourable) first and last name] - -
    - - Minister's official title - -

    -

    - - [(Honourable) first and last name] - -
    - - Minister's official title - -

    -

    - - [(Honourable) first and last name] - -
    - - Minister's official title - -

    -
    -
    -

    - Follow us -

    - -
    -
    -
    -
    -
    -
    -
    - -

    - Guidance: Contact us, About the institution, Ministers, and Follow us -

    - - -     -

    - Contact us -

    -

    - - Optional - -

    -

    - If there is a main contact page for you institution, put it as the first link. -

    -

    - You can include links to specific contact tasks in this section. -

    -

    - About the institution -

    -

    - - Mandatory - -

    -

    - Provides links to content from an institution that falls under the - - Corporate information - - and - - Program and policy development - - categories. -

    -

    - The first 2 links are mandatory: Mandate and Transparency. -

    -

    - Other links in this section can include: -

    -
      -
    • - Programs -
      • -
    • - Consultations -
      • -
    • - Organizational structure -
      • -
    • - Reports -
      • -
    • - Job opportunities -
      • -
    • - any other link that goes to content that falls under Corporate information or Program and policy development -
      • -
    -

    - Minister or Institutional head -

    -

    - - Mandatory - -

    -

    - Links to an institution’s minister(s), including associate minister(s), or its institutional head. -

    -

    - Text is linked to the appropriate ministerial profile page (see - - Ministerial profile pages - - ). The hyperlink text is the minister or institutional head’s honorific (“The Honourable”) and first and last name. -

    -

    - Text under the link is the minister or institutional head’s official title. -

    -

    - Use the appropriate heading: -

    -
      -
    • - Minister -
      • -
    • - Parliamentary secretary -
      • -
    • - Associate minister -
      • -
    • - Ombudsman -
      • -
    • - Management -
      • -
    -

    - Follow us -

    -

    - - Optional - -

    -

    - The new icons are optional. -

    -

    - Follow the - - Social media channels - - guidance. -

    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -

    - News -

    - -

    - More: - - [Institution] news - -

    -
    -
    -

    - Features -

    -
    -
    -
    - -

    - - [Feature hyperlink text] - -

    -

    - Brief description of the feature being promoted. -

    -
    -
    -
    -
    - -

    - - [Feature hyperlink text] - -

    -

    - Brief description of the feature being promoted. -

    -
    -
    -
    -
    -
    -
    -
    -
    - - - Guidance: - - News and Features - - - -

    - - Optional - -

    -

    - Use the beta version of the - - Latest news pattern - - . -

    -
    -
    -
    -
    - - diff --git a/coded-layout/_ministerial-profile-pages.mdx b/coded-layout/_ministerial-profile-pages.mdx deleted file mode 100644 index 58f61166c0..0000000000 --- a/coded-layout/_ministerial-profile-pages.mdx +++ /dev/null @@ -1,619 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/pages-profil-ministres-directives.html -breadcrumbs: -- link: https://www.canada.ca/en/government/ministers.html - title: Ministers and Parliamentary Secretaries -- link: '#' - title: '[Institutional landing page]' -date: null -dateModified: '2021-09-27' -description: null -title: The Honourable [Minister name], MP ---- - -
    -
    -
    -
    - - - Guidance: - - Breadcrumb - - - -
    -

    - Breadcrumb -

    -

    - - Mandatory - -

    -

    - For ministers and parliamentary secretaries, the breadcrumb is: -
    - - Canada.ca - - > - - Ministers and Parliamentary Secretaries - -

    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - - - Guidance: - - Breadcrumb - - - -
    -

    - Breadcrumb -

    -

    - - Mandatory - -

    -

    - For heads of organizations, the breadcrumb trail should link back to the institutional landing - page. -

    -
    -
    -
    -
    -
    - -
    - - - - - Parliamentary - secretary - - - - - - - Head of - institution - - - - - - - Minister - - -
    -

    - [Parliamentary secretary’s name] -

    -

    - [Head of institution or organization's name] -

    -
    -
    -
    -
    - - - Guidance: - - Minister’s name and picture - - - -

    - - Mandatory - -

    -

    - Minister's name -

    -
      -
    • - Follow mandatory text format: The Honourable [minister’s first and last names], MP -
      • -
    • - Use a unique H1 for the minister’s name -
      • -
    -

    - - Mandatory - -

    -

    - Minister's picture -

    -
      -
    • - Use the minister’s approved headshot -
      • -
    • - Insert at the top of the page, to the left of the biographical overview -
      • -
    • - Link to a high-resolution image of the minister -
      • -
    • - Do no embed any text in the image -
      • -
    -
    -
    -
    -
    -
    -
    -
    -
    - - - Guidance: - - Name and picture - - - -

    - - Mandatory - -

    -

    - Name -

    -
      -
    • - Follow mandatory text format: [first and last names] -
      • -
    • - Use a unique H1 for the name -
      • -
    -

    - - Optional - -

    -

    - Picture -

    -

    - Presents a high-quality image. -

    -
    -
    -
    -
    -
    -

    - -

    -
    -
    -

    - - Minister of - - [Portfolio name one] - - and - - [Portfolio name - two] - - - - -

    -

    - Represents the riding of - - [Riding name] - -

    - -
    -
    -
    -
    - - - Guidance: - - Ministerial role(s) and riding - - - -

    - - Mandatory - -

    -
      -
    • - List the official role(s) of the minister, with links to lead institutional profile, riding - information, mandate letter, briefing book, and ministerial appointments where applicable -
      • -
    • - Hyperlink the name of the riding to the appropriate riding page from - - www.parl.gc.ca - -
      • -
    -
    -
    -
    -
    -
    -
    -

    - - [Official title of the head] - -

    -
    -
    -

    - - Parliamentary secretary to the - - [Minister of portfolio name] - - -

    -
    -
    -
    -
    - - - Guidance: - - Parliamentary secretary’s role(s) - - - -

    - - Mandatory - -

    -

    - Lists the official role(s) of the parliamentary secretary, with link(s) to related ministerial - profile. -

    -
      -
    • - Follow mandatory text format: Parliamentary Secretary to the Minister of [insert - portfolio name] -
      • -
    • - Hyperlink the supported minister to the appropriate ministerial profile page -
      • -
    -
    -
    -
    -
    -
    -
    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore amet ducimus nihil, voluptate quibusdam? - Excepturi in aspernatur rem ipsam aperiam voluptates fugit officiis culpa, ratione, et maxime impedit. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ex commodi autem laudantium aliquam id, - voluptate possimus quod illo velit vero, at dolorum sequi ipsam culpa fugit, molestias quaerat vitae. -

    -
    -
    -
    -
    - - - Guidance: - - Biographical overview - - - -

    - - Mandatory - -

    -

    - Provides background information about the minister. -

    - -
    -
    -
    -
    -
    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore amet ducimus nihil, voluptate quibusdam? - Excepturi in aspernatur rem ipsam aperiam voluptates fugit officiis culpa, ratione, et maxime impedit. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ex commodi autem laudantium aliquam id, - voluptate possimus quod illo velit vero, at dolorum sequi ipsam culpa fugit, molestias quaerat vitae. -

    -
    -
    -
    -
    - - - Guidance: - - Biographical overview - - - -

    - - Mandatory - -

    -

    - Provides background information about the parliamentary secretary. -

    - -
    -
    -
    -
    -
    -
    -

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore amet ducimus nihil, voluptate quibusdam? - Excepturi in aspernatur rem ipsam aperiam voluptates fugit officiis culpa, ratione, et maxime impedit. -

    -

    - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ex commodi autem laudantium aliquam id, - voluptate possimus quod illo velit vero, at dolorum sequi ipsam culpa fugit, molestias quaerat vitae. -

    -
    -
    -
    -
    - - - Guidance: - - Biographical overview - - - -

    - - Mandatory - -

    -

    - Provides background information about the head of institution. -

    -
      -
    • - Keep the text short and concise -
      • -
    -
    -
    -
    -
    -
    -
    -

    - Contact information -

    -

    - House of Commons -
    - Ottawa, Ontario K1A 0A6 -
    - - Telephone: - - 123-456-7890 -
    - - Fax: - - 123-456-7890 -
    - - Email: - - - [first.last@canada.ca] - - - -

    -
    -
    -
    -
    - - - Guidance: - - Contact information - - - -

    - - Mandatory - -

    -
      -
    • - Includes email address, mailing address, telephone number and fax number -
      • -
    • - Hyperink the email address -
      • -
    • - Format numbers as follows: -
        -
      • - the heading “Telephone:” precedes the telephone number -
        • -
      • - the heading “Fax:” precedes the fax number -
        • -
      • - telephone and fax numbers use the format 123-456-7890 -
        • -
      -
      • -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - Features [optional] -

    -
    -
    -

    - - [Feature hyperlink text] - -

    - -

    - Brief description of the feature being promoted. -

    -
    -
    -

    - - [Feature hyperlink text] - -

    - -

    - Brief description of the feature being promoted. -

    -
    -
    -

    - - [Feature hyperlink text] - -

    - -

    - Brief description of the feature being promoted. -

    -
    -
    -
    -
    -
    -
    - - - Guidance: - - Features - - - -

    - - Optional - -

    -

    - The design of this section is flexible. You can modify it to suit your needs. This could include items - like news and media gallery. -

    -

    - If you use features, follow the - - Context-specific - features - - guidance. -

    -
    -
    -
    -
    - - diff --git a/coded-layout/_theme_topic_guidance.mdx b/coded-layout/_theme_topic_guidance.mdx deleted file mode 100644 index 88ab35e6f2..0000000000 --- a/coded-layout/_theme_topic_guidance.mdx +++ /dev/null @@ -1,561 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/theme-sujet_directives.html -breadcrumbs: -- link: '#' - title: '[Theme]' -- link: '#' - title: '[Topic]' -date: null -dateModified: '2020-06-30' -description: null -title: '[Theme - Topic title]' ---- - -
    -
    -
    -
    - - - Guidance: - - breadcrumb - - - -
    -

    - Breadcrumb -

    -

    - - Mandatory - -

    -

    - The breadcrumb should be relevant to your contents IA, such as: -
    - - Canada.ca - - > - - [Theme] - - > - - [Topic] - -

    -

    - Breadcrumbs may be shortened versions of your architecture, such as: -
    - - Canada.ca - - > - - Jobs - - and the workplace - - -

    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -

    - 1-2 sentences that describe the topics and top tasks that can be accessed on this page. - -

    -
    - -
    -
    -
    - -
    -
    -
    -
    - - - Guidance: - - title and image - - - -
    -

    - Title -

    -

    - - Mandatory - -

    -

    - The page title should be descriptive and unique but brief. -

    -

    - Do not use acronyms or abbreviations. -

    -
    -
    -

    - Image -

    -

    - - Optional - -

    -

    - The 825x200 space beside the H1 can be used for a banner or image. Image is hidden on mobile view. -

    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -

    - Most requested -

    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - - - Guidance: - - Most requested - - - -

    - - Optional - -

    -

    - Features theme or topic specific top tasks. -

    -

    - This component provides shortcuts to the theme or topic top tasks. However, if all of the topic's top tasks are already included as direct links under Services and information, do not duplicate them here. In that case, you can choose not to include this component. -

    -

    - - Variations: - - Replace the - - colcount-md-2 - - class with - - colcount-md-1 - - if you only have 2-3 most requested items. -

    -
    -
    -
    -
    -
    - -
    -
    -
    -

    - Services and information -

    -
    -
    -

    - - [Topic hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

    -
    -
    -

    - - [Topic hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

    -
    -
    -

    - - [Topic hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

    -
    -
    -

    - - [Topic hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

    -
    -
    -

    - - [Topic hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

    -
    -
    -

    - - [Topic hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

    -
    -
    -

    - - [Topic hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

    -
    -
    -

    - - [Topic hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

    -
    -
    -

    - - [Topic hyperlink text] - -

    -

    - Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

    -
    -
    -
    -
    -
    - - - Guidance: - - Services and information - - - -

    - - Mandatory - -

    -

    - Lists the sub-topics and destination content related to the current theme or topic. -

    -

    - The "Services and information" heading in this section should have the - - wb-inv - - class, so it is not visible, but is still present for the semantic outline and for screen readers. -

    -

    - - Variations: - - Any variations of the - - Services and information - - pattern can be used in this section. -

    -
    -
    -
    - - - - - Without social media - - - - - - - With social media - - -
    -
    -
    - - -
    -
    -
    -
    -

    - Feature -

    - -
    -
    - [Feature hyperlink text] -
    -
    - -
    -
    -

    - Brief description of the feature being promoted. -

    -
    -
    -     -
    -
    -
    -

    - On social media -

    - -
    -
    -
    -
    -
    -
    - - - Guidance: - - Feature and social media - - - -

    - Feature -

    -

    - - Optional - -

    -

    - The design of this section is flexible. You can modify it to suit your needs. -

    -

    - A feature should be contextual to the content on the page. -

    -

    - Social media -

    -

    - - Optional - -

    -

    - The design of this section is flexible. You can modify it to suit your needs. -

    -

    - Show the name of the account. If there is more than one account per type, use a popup and show people the options to choose from. -

    -

    - Remove the - - followus-vertical - - class to display the social accounts inline. You may remove the name of the account in this - layout. -

    -

    - The new icons are optional. -

    -
    -
    -
    -
    -
    - - -
    -
    -

    - Contributors -

    -
    -
    -
    -

    - From: -

    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - - - Guidance: - - Contributors - - - -

    - - Optional - -

    -

    - Provides a link to the institutional landing pages of the departments and/or agencies responsible for content in this theme or topic. -

    -
    -
    -
    -
    - - diff --git a/coded-layout/_transparency_guidance.mdx b/coded-layout/_transparency_guidance.mdx deleted file mode 100644 index 78790436d9..0000000000 --- a/coded-layout/_transparency_guidance.mdx +++ /dev/null @@ -1,317 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/transparence_directives.html -breadcrumbs: -- link: '#' - title: '[Breadcrumb]' -date: null -dateModified: '2020-01-24' -description: null -title: 'Transparency: [Institution]' ---- - - -
    -

    - Proactive disclosure of information, made public so that Canadians and Parliament are better able to hold the Government and public sector officials to account. -

    -
    -
    -
    - - - Guidance: - - Page title and introduction - - - -
    -

    - Title -

    -

    - Use the applied title of the institution, as specified in the - - Registry of Applied Titles - - . -

    -

    - Use the legal title if the applied title is not available. -

    -

    - Do not use acronyms or abbreviations. -

    -
    -
    -

    - Introduction text -

    -

    - Use the suggested introduction text or adjust it to your situation. -

    -

    - Keep the introduction text short. -

    -
    -
    -
    -
    -
    -
    -
    -
    -

    - - Mandate letter from the Prime Minister - -

    -

    - Commitments and top priorities identified by the government -

    -
    -
    -
    -
    -

    - - Departmental plan - -

    -

    - Performance goals for the coming fiscal year -

    -
    -
    -
    -
    -

    - - Departmental results report - -

    -

    - Performance targets met for the 2017-18 fiscal year -

    -
    -
    -
    -
    -
    -
    -

    - - Travel and hospitality expenses - -

    -

    - Disclosure of expenditures on Travel, Hospitality and Conferences -

    -
    -
    -
    -
    -

    - - Government contracts awarded - -

    -

    - Disclosure of contracts over $10,000 -

    -
    -
    -
    -
    -

    - - Grants and contributions - -

    -

    - Disclosure of transfers of money, goods, services or assets to individuals, organizations or other levels of government -

    -
    -
    -
    -
    -
    -
    -

    - - Disclosure of serious wrongdoing in the workplace - -

    -

    - Disclosure of wrongdoing found to have been committed -

    -
    -
    -
    -
    -

    - - Reclassification of public service positions - -

    -

    - Disclosure of government positions that have been reclassified. -

    -
    -
    -
    -
    -

    - - Quarterly financial reports - -

    -

    - Quarterly spending at a departmental level -

    -
    -
    -
    -
    -
    -
    -

    - - Audits and evaluations - -

    -

    - Annual reports of audit and evaluations for programs and services at [institution] -

    -
    -
    -
    -
    -

    - - Consultations - -

    -

    - Public consultations and reports on completed consultations -

    -
    -
    -
    -
    -

    - - Briefing documents - -

    -

    - Briefing notes prepared for the President, Secretary and senior managers -

    -
    -
    -
    -
    -
    -
    - - - Guidance: - - Services and information - - - -
    -

    - Adjust the items in this section to your needs. -

    -

    - Use the - - Services and information - - pattern. -

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -

    - Didn’t find what you were looking for -

    -

    - Access to Information and Privacy ( - - ATIP - - ) requests: -

    - -
    -
    -
    -
    -
    -
    - - - Guidance: - - - ATIP - - requests - - - -
    -

    - Link the "Make an - - ATIP - - request" button to the page where people can make - - ATIP - - requests about your institution. -

    -

    - Link "Find previous - - ATIP - - requests" to the Open Government portal. You can link to a pre-filtered list for your organization. -

    -
    -
    -
    -
    -
    -
    - - diff --git a/common-design-patterns/_canada-dot-ca.html b/common-design-patterns/_canada-dot-ca.html deleted file mode 100644 index 1a3d18bac7..0000000000 --- a/common-design-patterns/_canada-dot-ca.html +++ /dev/null @@ -1,301 +0,0 @@ ---- ---- - - - - - - Canada.ca domain - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Canada.ca domain - Canada.ca design pattern

    -

    From: Treasury Board of Canada Secretariat

    -

    Mandatory

    -
    -

    The Canada.ca domain is the primary domain for the Government of Canada's public-facing web presence.

    -
    -

    On this page

    - -
    -
    -

    When to use

    -

    Use the Canada.ca domain for all public-facing Government of Canada web pages, to ensure consistency and enhance trust. This includes websites or services that are intended for people outside government but require a login to access.

    -

    Two approaches can be used:

    - -
    -
    -

    What to avoid

    -

    Do not use the Canada.ca domain for collaborative sites where the Government of Canada is not the main partner.

    -
    -
    -

    How to implement

    -

    For details on writing Canada.ca URLs, go to URL model.

    -
    -
    -

    Discussion

    -

    Discuss the pattern in github issues

    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - diff --git a/common-design-patterns/_carousels.html b/common-design-patterns/_carousels.html deleted file mode 100644 index 7831083b87..0000000000 --- a/common-design-patterns/_carousels.html +++ /dev/null @@ -1,361 +0,0 @@ ---- ---- - - - - - - -Carousels - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    - - -

    Carousels - Canada.ca design pattern

    - - - - -
    - -
    - -

    Responsive carousels are in-page components used to display multiple different items within the same content space.

    -
    - -

    When to use this pattern

    -

    Use this component for situations such as image or video galleries.

    - -
    -
    - -

    What to avoid

    -

    Don't use this component:

    -
      -
    • to promote activities and initiatives
      • -
    • when a person’s flow must not be interrupted, as in a transactional process
      • -
    • when it would duplicate content from other components on the page
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Responsive carousels are a set of 2 to 4 rotating slides that refresh on page load, with user-controls to rotate through the slides and to toggle to auto-rotation
      • -
    • The default controls for stepping through the slides are thumbnails for large screens and forward/back buttons, including an “Item X of X” message for small screens
      • -
    • When auto-play is activated, the default slide for the start of auto-rotation is slide one
      • -
    • The default timing for auto-rotation is 9 seconds per slide
      • -
    • The default style for transitioning between slides is horizontal sliding transition, starting from the right edge
      • -
    • Carousels may be implemented at various sizes, ranging from a single column to the full width of the screen
      • -
    • Each slide is made up of a combination of text and imagery, with the option to add a button link
      • -
    • Both text and imagery must be linked, but all links in the carousel slide must point to the same destination
      • -
    • Any call to action must be described in the hyperlink text or button link
      • -
    • A maximum of 65 characters is allowed for all of the text on a carousel slide (including link label)
      • -
    • Textual elements must be coded as HTML text—do not embed text into imagery
      • -
    • Use the defined presentation classes included in the Canada.ca WET theme
      • -
    • For image sizing details, consult the Canada.ca GitHub page
      • -
    -
    - -
    -

    Latest changes

    -

    2020-10-30: clarified when to use carousels and when not to use them

    -
    - -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Carousels pattern
    - Screenshot illustrating the full-width carousel pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_charts-graphs.html b/common-design-patterns/_charts-graphs.html deleted file mode 100644 index cfb39c95a8..0000000000 --- a/common-design-patterns/_charts-graphs.html +++ /dev/null @@ -1,358 +0,0 @@ ---- ---- - - - - - - -Charts and graphs - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    Charts and graphs - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -
    -

    Charts and graphs are visualization techniques for communicating data or statistics.

    -
    -

    When to use this pattern

    -
      -
    • Use charts and graphs to communicate data more efficiently than in text or tables, when there are multiple data points to be presented
      • -
    • Do not use charts and graphs when the data set is simple enough to be presented as a table, such as when there are few data points
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Where possible, use WET 4 charts and graphs, rather than flat images
      • -
    • Always include data points as tabular data accompanying charts or graphs -
        -
      • it is recommended to provide an expandable table with tabular data immediately underneath the figure
        • -
      -
      • -
    • Size and place charts and graphs appropriately for the context they are in -
        -
      • they must appear connected to the related content
        • -
      -
      • -
    • Do not place charts and graphs in line with text blocks such as in a paragraph; rather, place them in between text blocks
      • -
    • Maximize available space to enhance readability
      • -
    • Keep charts and graphs as simple as possible
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Charts and graphs pattern
    - Screenshot illustrating the charts and graphs pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - - - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    - - - - - - - - - - {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_checkboxes-radio-buttons.html b/common-design-patterns/_checkboxes-radio-buttons.html deleted file mode 100644 index d385587b14..0000000000 --- a/common-design-patterns/_checkboxes-radio-buttons.html +++ /dev/null @@ -1,950 +0,0 @@ ---- ---- - - - - - -Checkboxes and radio buttons - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    - -

    Checkboxes and radio buttons: Canada.ca design system

    -
    -
    -
      -
    • Last updated: 2021-06-02
      • -
    -
    -
    -
    -

    Checkboxes and radio buttons are form controls. They help people select an answer to a question or confirm completion.

    -

    Large checkboxes and radio buttons are easier to select and use, particularly on mobile devices.

    - -
    -

    On this page

    - -
    -
    -

    When to use

    -

    Checkboxes and radio buttons should be used in interactive questions, like in application forms or wizards:

    - -
    -
    -

    What to avoid

    -

    Don't use checkboxes or radio buttons to present options that are not easily comparable. In these cases, use the Services and information (doormat) pattern:

    - -

    For a stand alone question with few options and a manageable amount of content per option that does not require separate pages, use expand/collapse or tabs instead:

    - -
    -
    -

    How to implement

    -

    Large checkboxes

    -

    When to use: Large checkboxes are the recommended checkbox pattern. In particular, large checkboxes should be used when one or more selections can be made to answer a question.

    -

    What to avoid: Don't use the large checkboxes when building a checklist with items that break across multiple lines or when only a single item can be checked. For these situations, use tickboxes instead.

    -
    -

    Large checkboxes target with explicit labels

    -
    -
    -
    - Choose your condiments: -
      -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
    -
    -
    -
    -
    - Code -
    - HTML - 
    <fieldset class="gc-chckbxrdio">
-	<legend>Choose your condiments:</legend>
-	<ul class="list-unstyled lst-spcd-2">
-		<li class="checkbox">
-			<input type="checkbox" id="cond1">
-			<label for="cond1">Ketchup</label>
-		</li>
-		<li class="checkbox">
-			<input type="checkbox" id="cond2">
-			<label for="cond2">Relish</label>
-		</li>
-		<li class="checkbox">
-			<input type="checkbox" id="cond3">
-			<label for="cond3">Mustard</label>
-		</li>
-	</ul>
-</fieldset>
    -
    -
    - CSS - 
    .gc-chckbxrdio label {
-  cursor: pointer;
-  display: block;
-  font-size: 20px;
-}
-
-.gc-chckbxrdio legend {
-  float: none;
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 15px;
-  margin-top: 0;
-}
-
-.gc-chckbxrdio input[type="checkbox"] {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.gc-chckbxrdio input[type="checkbox"][disabled] + label {
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label {
-  display: inline-block;
-  line-height: 2;
-  margin-left: 36px;
-  width: auto;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label::before {
-  border: 4px solid #fff;
-  -webkit-box-shadow: 0 0 0 2px #000;
-          box-shadow: 0 0 0 2px #000;
-  content: "";
-  display: inline-block;
-  height: 36px;
-  left: 0;
-  position: absolute;
-  top: 2px;
-  width: 36px;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
-
-  background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
-}
-
-.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
-  -webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-          box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label,
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label + ul {
-  font-size: 17px;
-  min-height: 23px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label::before {
-  height: 24px;
-  left: 6px;
-  top: 4px;
-  width: 24px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"]:checked + label::after {
-  border-width: 0 3px 3px 0;
-  height: 16px;
-  left: 14px;
-  top: 6px;
-  width: 9px;
-}
-
-.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
-  border-color: #333;
-  border-style: solid;
-  border-width: 0 5px 5px 0;
-  content: "";
-  display: inline-block;
-  height: 26px;
-  left: 12px;
-  position: absolute;
-  top: 4px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  width: 13px;
-}
    -
    -
    -

    Large disabled checkboxes target with explicit labels

    -
    -
    -
    - Choose your condiments: -
      -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
    -
    -
    -
    -
    - Code -
    - HTML - 
    <fieldset class="gc-chckbxrdio">
-	<legend>Choose your condiments:;</legend>
-	<ul class="list-unstyled lst-spcd-2">
-		<li class="checkbox">
-			<input type="checkbox" id="cond4" disabled>
-			<label for="cond1">Ketchup</label>
-		</li>
-		<li class="checkbox">
-			<input type="checkbox" id="cond5">
-			<label for="cond2">Relish</label>
-		</li>
-		<li class="checkbox">
-			<input type="checkbox" id="cond6" disabled>
-			<label for="cond3">Mustard</label>
-		</li>
-	</ul>
-</fieldset>
    -
    -
    - CSS - 
    .gc-chckbxrdio label {
-  cursor: pointer;
-  display: block;
-  font-size: 20px;
-}
-
-.gc-chckbxrdio legend {
-  float: none;
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 15px;
-  margin-top: 0;
-}
-
-.gc-chckbxrdio input[type="checkbox"] {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.gc-chckbxrdio input[type="checkbox"][disabled] + label {
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label {
-  display: inline-block;
-  line-height: 2;
-  margin-left: 36px;
-  width: auto;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label::before {
-  border: 4px solid #fff;
-  -webkit-box-shadow: 0 0 0 2px #000;
-          box-shadow: 0 0 0 2px #000;
-  content: "";
-  display: inline-block;
-  height: 36px;
-  left: 0;
-  position: absolute;
-  top: 2px;
-  width: 36px;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
-  background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
-}
-
-.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
-  -webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-          box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label,
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label + ul {
-  font-size: 17px;
-  min-height: 23px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label::before {
-  height: 24px;
-  left: 6px;
-  top: 4px;
-  width: 24px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"]:checked + label::after {
-  border-width: 0 3px 3px 0;
-  height: 16px;
-  left: 14px;
-  top: 6px;
-  width: 9px;
-}
-
-.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
-  border-color: #333;
-  border-style: solid;
-  border-width: 0 5px 5px 0;
-  content: "";
-  display: inline-block;
-  height: 26px;
-  left: 12px;
-  position: absolute;
-  top: 4px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  width: 13px;
-}
    -
    -
    -
    -
    -

    Tickboxes (smaller checkboxes)

    -

    When to use: Only use tickboxes when there is a single item that can be checked, such as for confirmations.

    -

    What to avoid: Don't use tickboxes for answers to questions or in checklists. For these situations, use the large checkboxes instead:

    - -

    Consider using a button instead of tickbox, particularly in cases where it is the primary action or next step on the page:

    - -

    Single smaller checkbox target with explicit label in an inline form

    -
    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    - -
    -
    -
    -
    - Code -
    - HTML - 
    <form class="form-inline" method="get" action="#">
-	<div class="form-group">
-		<label class="wb-inv" for="exampleInputEmail2">Email address</label>
-		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" />
-	</div>
-	<div class="form-group">
-		<label class="wb-inv" for="exampleInputPassword2">Password</label>
-		<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" />
-	</div>
-	<div class="checkbox gc-chckbxrdio">
-		<input id="remember2" type="checkbox" />
-		<label for="remember2">Remember me</label>
-	</div>
-	<button type="submit" class="btn btn-default">Sign in</button>
-</form>
    -
    -
    - CSS - 
    .gc-chckbxrdio label {
-  cursor: pointer;
-  display: block;
-  font-size: 20px;
-}
-
-.gc-chckbxrdio legend {
-  float: none;
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 15px;
-  margin-top: 0;
-}
-
-.gc-chckbxrdio input[type="checkbox"] {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.gc-chckbxrdio input[type="checkbox"][disabled] + label {
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label {
-  display: inline-block;
-  line-height: 2;
-  margin-left: 36px;
-  width: auto;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label::before {
-  border: 4px solid #fff;
-  -webkit-box-shadow: 0 0 0 2px #000;
-          box-shadow: 0 0 0 2px #000;
-  content: "";
-  display: inline-block;
-  height: 36px;
-  left: 0;
-  position: absolute;
-  top: 2px;
-  width: 36px;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
-  background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
-}
-
-.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
-  -webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-          box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label,
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label + ul {
-  font-size: 17px;
-  min-height: 23px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label::before {
-  height: 24px;
-  left: 6px;
-  top: 4px;
-  width: 24px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"]:checked + label::after {
-  border-width: 0 3px 3px 0;
-  height: 16px;
-  left: 14px;
-  top: 6px;
-  width: 9px;
-}
-
-.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
-  border-color: #333;
-  border-style: solid;
-  border-width: 0 5px 5px 0;
-  content: "";
-  display: inline-block;
-  height: 26px;
-  left: 12px;
-  position: absolute;
-  top: 4px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  width: 13px;
-}
-
-.gc-chckbxrdio.form-inline .label-inline {
-  padding-right: 20px;
-}
-
-.gc-chckbxrdio.form-inline .label-inline label {
-  padding-left: 10px;
-}
    -
    -
    -
    -
    -

    Radio buttons

    -

    Large radio buttons target with explicit labels

    -

    When to use: Use radio buttons when only one selection can be made in a list.

    -
    -
    -
    - Which is your favorite pet? -
      -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
    -
    -
    -
    -
    - Code -
    - HTML - 
    <fieldset class="gc-chckbxrdio">
-	<legend>Which is your favorite pet?</legend>
-	<ul class="list-unstyled lst-spcd-2">
-		<li class="radio">
-			<input type="radio" name="animal" id="animal-1">
-			<label for="animal-1">Dog</label>
-		</li>
-		<li class="radio">
-			<input type="radio" name="animal" id="animal-2">
-			<label for="animal-2">Cat</label>
-		</li>
-		<li class="radio">
-			<input type="radio" name="animal" id="animal-3">
-			<label for="animal-3">Rat</label>
-		</li>
-	</ul>
-</fieldset>
    -
    -
    - CSS - 
    
-
-
    -
    -
    -

    Large radio buttons target with explicit labels in an inline form

    -
    -
    -
    - Choose an option: -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    - Code -
    - HTML - 
    <fieldset class="gc-chckbxrdio form-inline">
-	<legend>Choose an option</legend>
-	<div class="label-inline">
-		<input id="inlineRadio1" type="radio" name="optradio">
-		<label for="inlineRadio1">Option 1</label>
-	</div>
-	<div class="label-inline">
-		<input id="inlineRadio2" type="radio" name="optradio">
-		<label for="inlineRadio2">Option 2</label>
-	</div>
-	<div class="label-inline">
-		<input id="inlineRadio3" type="radio" name="optradio">
-		<label for="inlineRadio3">Option 3</label>
-	</div>
-</fieldset>
    -
    -
    - CSS - 
    .provisional.gc-chckbxrdio label {
-	cursor: pointer;
-	display: block;
-	font-size: 20px;
-}
-.provisional.gc-chckbxrdio legend {
-	float: none;
-	font-size: 22px;
-	font-weight: 700;
-	margin-bottom: 15px;
-	margin-top: 0;
-}
-.provisional.gc-chckbxrdio input[type="radio"] {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-}
-.provisional.gc-chckbxrdio input[type="radio"][disabled] + label {
-	cursor: not-allowed;
-	opacity: .5;
-}
-.provisional.gc-chckbxrdio input[type="radio"] + label {
-	display: inline-block;
-	line-height: 2;
-	margin-left: 36px;
-	width: auto;
-}
-.provisional.gc-chckbxrdio input[type="radio"] + label::before {
-	border: 4px solid #fff;
-	-webkit-box-shadow: 0 0 0 2px #000;
-	box-shadow: 0 0 0 2px #000;
-	content: "";
-	display: inline-block;
-	height: 36px;
-	left: 0;
-	position: absolute;
-	top: 2px;
-	width: 36px;
-}
-.provisional.gc-chckbxrdio input[type="radio"] + label:hover::before {
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
-	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
-}
-.provisional.gc-chckbxrdio input[type="radio"]:focus + label::before {
-	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-}
-.provisional.gc-chckbxrdio input[type="radio"] + label::before {
-	border-radius: 50%;
-}
-.provisional.gc-chckbxrdio input[type="radio"]:checked + label::before {
-	background: #444;
-}
-.provisional.gc-chckbxrdio.form-inline .label-inline {
-	padding-right: 20px;
-}
-.provisional.gc-chckbxrdio.form-inline .label-inline label {
-	padding-left: 10px;
-}
    -
    -
    -
    -
    -

    Configuration options

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    OptionDescriptionHow to configure
    Large input targetsDesign for large checkbox and radio buttons.Add the gc-chckbxrdio class to the fieldset or the container element surrounding the checkbox/radio-button inputs.
    TickboxesSmall checkboxes when there is a single item that can be checked, such as for confirmations.The class gc-chckbxrdio and the class checkbox have to be enabled on the container element surrounding the targeted checkbox.
    Disabled state Disabled inputs will not be clickable. Visual indications include greying out the control and adding a "stop" cursor icon on hover.To toggle a disabled state, add a disabled attribute to the input field
    Inline formatInline radio buttons or checkboxes will display side by side on larger screens and wrap to new lines, rather than vertically.Add the form-inline class to surrounding container of the checkboxes or radio buttons. Also add the label-inline class to each checkbox or radio button container.
    -
    -

    Research and blog posts

    -

    We successfully tested the use of interactive checklists during an optimization project with the Canada Revenue Agency and to create checklists for travel restrictions due to COVID-19.

    - -
    -

    Latest changes

    -
    -
    Version 0.1:
    - - -
    -
    Launched the beta version of the checkboxes and radio buttons pattern.
    -
    -
    -
    -

    Discussion

    -

    Discuss the pattern in github issues

    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - diff --git a/common-design-patterns/_collapsible-content.html b/common-design-patterns/_collapsible-content.html deleted file mode 100644 index cbae81d268..0000000000 --- a/common-design-patterns/_collapsible-content.html +++ /dev/null @@ -1,462 +0,0 @@ ---- ---- - - - - - - -Expand/collapse - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    Expand/Collapse - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -

    The expand/collapse pattern (also known as accordion) allows content to be hidden until requested. The pattern consists of a trigger link that shows or hides the content.

    -
    -

    Example:

    -
    - You must click on this area to expand and collapse the content -

    This text is hidden until it is revealed.

    -
    -
    -

    On this page

    - -
    - -

    When to use

    -

    The expand/collapse pattern can be used in 2 situations:

    - -

    1. Presenting a choice between mutually exclusive answers

    -

    Use this pattern when people need to get different answers depending on their situation and when these answers are mutually exclusive.

    -

    This reduces the risk of having people wrongly think they got the answer that applies to their situation.

    -

    2. Presenting secondary information

    -

    Use this pattern to prevent secondary content from interfering with the main task.

    -

    This can be content that applies to most people, but that only a few people may need to use (for example, a privacy statement or additional details not needed to accomplish the main task).

    -

    It can also be content that applies only to a minority of people (such as when there is specific information for a specific audience).

    -
    -
    -

    What to avoid

    - -

    Don't use this pattern if:

    -
      -
    • the majority of people need the content to accomplish the main task (unless the answers are mutually exclusive)
      • -
    • people need to answer several questions to get the answer that applies to them (use interactive questions instead)
      • -
    • one of the mutually exclusive answers has multiple sub-tasks or more than one page of supporting content (use interactive questions instead)
      • -
    - - -
    -
    -

    How to implement

    -

    Presenting a choice between mutually exclusive answers

    -
    -

    Determine if you are in a shared custody situation

    -

    Does the child spend their time:

    -
      -
    • -
      - about equally between both parents -

      If the child shares their time about equally between the parents, then both parents are considered to have shared custody of that child...

      -
      -
      • -
    • -
      - mostly with you -

      If the child lives with you most of the time, you are considered to have primary custody for the purposes of the Canada child benefit...

      -
      -
      • -
    • -
      - mostly with the other parent -

      If the child lives with the other parent most of the time, the other parent is considered to have primary custody for the purposes of the Canada child benefit...

      -
      -
      • -
    -
    - -
    -Code -
    <h3>Determine if you are in a shared custody situation</h3>
-<p>Does the child spend their time:</p>
-<ul class="list-unstyled">
- <li>
-  <details>
-   <summary>about equally between both parents</summary>
-   <p>If the child shares their time about equally between the parents, then both parents are considered to have <strong>shared custody</strong> of that child...</p>
-  </details>
- </li>
- <li>
-  <details>
-   <summary>mostly with you</summary>
-   <p>If the child lives with you most of the time, you are considered to have <strong>primary custody</strong> for the purposes of the Canada child benefit...</p>
-  </details>
- </li>
- <li>
-  <details>
-   <summary>mostly with the other parent</summary>
-   <p>If the child lives with the other parent most of the time, the other parent is considered to have <strong>primary custody</strong> for the purposes of the Canada child benefit...</p>
-  </details>
- </li>
-</ul>
    -
    - -

    Presenting secondary information

    -
    -

    Estimate your payments

    -

    Use the estimator to help you plan your budget.

    -

    For example, you can estimate what amount you would get if:

    -
      -
    • you have a new child
      • -
    • your income changes
      • -
    • you start or end shared custody
      • -
    -
    - See the math behind Canada child benefit payments -

    How are payments calculated

    -

    Every month, Canada child benefit payments are adjusted based on:

    -
      -
    • the number of children in your care
      • -
    • the age of your children
      • -
    • your marital status
      • -
    • your family net income from the previous year
      • -
    -

    ...

    -
    -
    - -
    - Code - 
    <h3>Estimate your payments</h3>
-<p>Use the estimator to help you plan your budget.</p>
-<p>For example, you can estimate what amount you would get if:</p>
-<ul>
- <li>you have a new child</li>
- <li>your income changes</li>
- <li>if you start or end shared custody</li>
-</ul>
-<details>
- <summary>See the math behind Canada child benefit payments</summary>
- <h3>How are payments calculated</h3>
- <p>Every month, Canada child benefit payments are adjusted based on:</p>
- <ul>
-  <li>the number of children in your care</li>
-  <li>the age of your children</li>
-  <li>your marital status</li>
-  <li>your family net income from the previous year</li>
- </ul>
- <p>...</p>
-</details>
-
    -
    -
    -
    -

    Research and blog posts

    -

    We successfully tested the use of the expand/collapse pattern to encourage people to choose between mutually exclusive options during 2 optimization projects with the Canada Revenue Agency.

    - - -

    Latest changes

    -

    2019-11-28: guidance was changed to allow the use of expand/collapse for mutually exclusive answers.

    - -

    Discussion

    -

    Discuss the pattern in github issues

    - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_contact-information.html b/common-design-patterns/_contact-information.html deleted file mode 100644 index 89114bb664..0000000000 --- a/common-design-patterns/_contact-information.html +++ /dev/null @@ -1,383 +0,0 @@ ---- ---- - - - - - - -Contact information - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    Contact information - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -
    -

    There are 2 patterns for presenting contact information on Canada.ca pages. The contact information pattern is a standardized block that presents the street or mailing address, email address and telephone numbers, while the contact links pattern presents links to contact pages.

    -
    -

    When to use this pattern

    -
      -
    • Present contact information consistently in a variety of contexts
      • -
    • Provide access to multiple contact options.
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • The heading is “Contact us”
      • -
    • Do not add borders to this block -
        -
      • the aim is to reduce visual noise and avoid “banner blindness” (where people automatically interpret content in boxes as ads)
        • -
      -
      • -
    • For the contact address pattern: -
        -
      • when street or mailing address information is available, place it first, followed by other contact channels
        • -
      • follow the Canada.ca Content Style Guide when writing text for this block
        • -
      • label telephone, email, TTY, etc., numbers appropriately, for example “Telephone:” for a telephone number
        • -
      • where possible, the email link must point to a web form rather than presenting a mailto link
        • -
      -
      • -
    • For the contact links pattern: -
        -
      • use standard link styles
        • -
      • use bullets, not numbered lists
        • -
      • links point to contact pages (see the Contact us templates section)
        • -
      -
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Examples

    -
    -
    -
    -
    -
    -
    Contact address pattern
    - Screenshot illustrating the contact address pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    Contact links pattern
    - Screenshot illustrating the contact links pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    - - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_contextual-alerts.html b/common-design-patterns/_contextual-alerts.html deleted file mode 100644 index bc6669dc50..0000000000 --- a/common-design-patterns/_contextual-alerts.html +++ /dev/null @@ -1,453 +0,0 @@ ---- ---- - - - - - -Contextual alerts - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Contextual alerts: Canada.ca design system

    -
    -
    -
      -
    • Last updated: 2022-08-24
      • -
    -
    -
    -
    -

    Alerts are short, prominent notices meant to draw attention to an important message or change. They are often time-sensitive. The label, colour, and icon indicate the type of message and its urgency.

    -
    -
    -

    Alert heading

    -

    Alert description

    -
    -
    -
    -

    On this page

    - -
    -
    -

    When to use

    -

    Use contextual alerts to:

    -
      -
    • bring a person’s attention to an important change at the page or subsection level like a service or site outage
      • -
    • draw attention to important recent or upcoming changes to a process or service
      • -
    • provide the result of a user-action, for example, confirm success, or notify a person of an error
      • -
    • warn a person of a consequence of an action or inaction related to their task
      • -
    -

    To use contextual alerts during urgent service disruptions, follow these guidelines:

    - -
    -
    -

    What to avoid

    -

    Do not use contextual alerts:

    -
      -
    • to provide information about a normal step in a process or task
      • -
    • to simply add emphasis to content
      • -
    • in cases where a warning is neither high risk nor frequently experienced
      • -
    • to create labels, use this component instead: - -
      • -
    -
    -
    -

    How to implement

    -

    Write alert text for a grade 6 to 8 reading level.

    -

    Keep alert text very brief. Provide further details in the appropriate section or page.

    -

    Remove alert text once the issue is resolved or enough time has passed that the information provided is no longer new.

    -

    Strictly limit the number of alerts on the page to avoid alert fatigue.

    -

    Place the alert in the appropriate context:

    -
    -
    Applies to the entire site
    -
    Place it at the top of the page above the main heading
    -
    Applies to the page
    -
    Place it underneath the page heading
    -
    Applies to a subsection of the page
    -
    Place it within that subsection, generally underneath the subsection heading or between 2 paragraphs
    -
    -

    Use the appropriate type of alert:

    -
      -
    1. Danger alert
      2. -
    2. Warning alert
      3. -
    3. Info alert
      4. -
    4. Success alert
      5. -
    -

    1. Danger alert

    -

    When to use: Use the danger alert to draw attention to a situation that could place someone in danger, such as a do not travel warning. You can also use it to alert a person of a technical issue that could cause them to be unable to complete their task, such as an invalid submission of data in a form.

    -
    -
    -

    If pregnant or considering pregnancy - Notice regarding both partners

    -

    Avoid travel to Costa Rica if you are pregnant or planning to conceive a child in the next 3 months.

    -
    -
    -
    - Code - 
    <section class="alert alert-danger">
-  <h3>If pregnant or considering pregnancy - Notice regarding both partners</h3>
-  <p>Avoid travel to Costa Rica if you are pregnant or planning to conceive a child in the next 3 months.</p>
-</section>
    -
    -
    -
    -

    2. Warning alert

    -

    When to use: Use the warning alert to draw attention to:

    -
      -
    • a possible consequence of an action or inaction, such as legal penalty that could apply
      • -
    • the date of an upcoming change to a policy or process that will affect a significant number of people, such as a change to travel requirements
      • -
    -
    -
    -

    Changes to impaired driving and cannabis-related crime laws

    -

    New penalties for impaired driving and cannabis-related crimes may affect your immigration status in Canada. If you commit one of these crimes, you may not be able to come to or stay in Canada.

    -

    New penalties and how you could be afected

    -
    -
    -
    - Code - 
    <section class="alert alert-warning">
- <h3>Changes to impaired driving and cannabis-related crime laws</h3>
- <p>New penalties for impaired driving and cannabis-related crimes may affect your immigration status in Canada. If you commit one of these crimes, you may not be able to come to or stay in Canada.</p>
- <p><a href="https://www.canada.ca/en/immigration-refugees-citizenship/news/notices/impaired-driving-cannabis-penalties-affect-immigration-status.html">New penalties and how you could be afected</a></p>
-</section>
    -
    -
    -
    -
    -

    Starting April 1, 2022, pre-entry tests will no longer be required for fully vaccinated travellers entering Canada by land, air, or water. Until then, follow the pre-entry test requirements.

    -

    News release

    -
    -
    -
    - Code - 
    <section class="alert alert-warning">
-
-<p><strong>Starting April 1, 2022,</strong> pre-entry tests will no longer be required for fully vaccinated travellers entering Canada by land, air, or water. Until then, follow the pre-entry test requirements.</p>
-<p><a href="https://www.canada.ca/en/public-health/news/2022/03/government-of-canada-will-remove-pre-entry-test-requirement-for-fully-vaccinated-travellers-on-april-1.html">News release</a></p>
-</section>
    -
    -
    -
    -

    3. Info alert

    -

    When to use: Use the info alert to draw attention to a clarification of surrounding content or helpful advice, such as the number of weeks it will take to receive a refund when an application is sent by mail vs by phone.

    -
    -
    -

    Current status of the call for applications: Closed

    -

    Thank you for your interest in Canada Summer Jobs. Applications are now closed.

    -
    -
    -
    - Code - 
    <section class="alert alert-info">
-  <h3>Current status of the call for applications: Closed</h3>
-  <p>Thank you for your interest in Canada Summer Jobs. Applications are now closed.</p>
-</section>
    -
    -
    -
    -

    4. Success alert

    -

    When to use: Use success alert to draw attention to a successful action, such as to confirm a submission or the completion of a task.

    -
    -
    -

    Your request for publicly available data from the list of charities has been successful

    -

    The turnaround time to process your request may take up to four (4) weeks. We will contact you if we need more information.

    -
    -
    -
    - Code - 
    <section class="alert alert-success">
-  <h3>Your request for publicly available data from the List of charities has been successful</h3>
-  <p>The turnaround time to process your request may take up to four (4) weeks. We will contact you if we need more information.</p>
-</section>
    -
    -
    -

    Research and blog posts

    -

    This style of alert was used successfully during a project to improve content on travel advisories:

    - -

    Latest changes

    -
    -
    -
    - -
    -
    Added an additional warning alert example that includes a date.
    -
    - Added link to a blog post on alert fatigue.
    -
    - Adjusted definition and implementation advice.
    -
    -
    -
    - -
    -
    Promoted the beta alert pattern to the stable alert pattern.
    -
    -
    -
    -

    Discussion

    -

    Discuss the pattern in github issues

    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - diff --git a/common-design-patterns/_contributors.html b/common-design-patterns/_contributors.html deleted file mode 100644 index d814e848b8..0000000000 --- a/common-design-patterns/_contributors.html +++ /dev/null @@ -1,331 +0,0 @@ ---- ---- - - - - - - - Contributors - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    Contributors - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -
    -
    -

    When to use this pattern

    -

    Links to institutions or organizations that support the content on the page.

    -
    -
    -

    How to use this pattern

    -
      -
    • Lists supporting institutions and provides links to their respective institutional profiles (or organization profiles or Partnering and collaborative arrangement profiles, as applicable)
      • -
    • Link text is the institutions’ applied title
      • -
    • Label the heading “Contributors”
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Contributors pattern
    - Screenshot illustrating the contributors pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_date-modified.html b/common-design-patterns/_date-modified.html deleted file mode 100644 index 535a9af618..0000000000 --- a/common-design-patterns/_date-modified.html +++ /dev/null @@ -1,360 +0,0 @@ ---- ---- - - - - - - - Date modified - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    - -

    Date modified: Canada.ca design - pattern

    - - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat -

    -
    - -
    -
    -
    -

    Mandatory on all pages

    - -

    The date modified component indicates how recently the content of a web page has been updated.

    -
    -
    Date modified section
    - Screenshot of a webpage: button labeled 'Report a problem on this page' appears on the left. 'Share this page' appears on the right, and 'Date modified: 2017-12-05' appears highlighted below. - -
    -
    -
    -

    Objectives

    -

    Use the date modified component to provide a person with the date that the content was last updated.

    -
    -
    -

    When to use the Date modified pattern

    -

    The Date modified pattern is mandatory on all pages. In applications, it can be replaced by a version number. For - more information, go to the Mandatory - elements of the design system.

    -
    -
    -

    When to update the Date modified

    -

    This component:

    -
      -
    • should generally only be updated when significant content changes occur
      • -
    • should generally not be updated for corrections to typographical errors or changes to the underlying HTML code -
      • -
    • can be updated manually to signify that the content has been fully reviewed and is still valid as of that date -
      • -
    -

    For applications, the component can be replaced by a “Version number” if desired.

    -
    -
    -

    How to implement the Date modified

    -
      -
    • This component always starts with the words “Date modified:” followed by a date.
      • -
    • The date appears using the common numeric method, for example: 2016-10-04.
      • -
    • Placement: left-aligned, below the main content area. If used in conjunction with the Report a problem pattern, - this - component appears after the button to report a problem with the page.
      • -
    -
    - -
    - -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_disclaimer-overlay.html b/common-design-patterns/_disclaimer-overlay.html deleted file mode 100644 index 6fcc0fc61d..0000000000 --- a/common-design-patterns/_disclaimer-overlay.html +++ /dev/null @@ -1,337 +0,0 @@ ---- ---- - - - - - - -Disclaimer overlay - Canada.ca design pattern- Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    Disclaimer overlay - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -
    -

    The disclaimer overlay pattern ensures that terms of use, privacy statements and similar forms of disclaimer are available where required, but do not obstruct access to the main content of the page. It consists of a trigger link that activates a dismissible overlay where the disclaimer text appears.

    -
    -

    When to use this pattern

    -
      -
    • Use where disclaimers (privacy statements, terms of use, etc.) are required, to avoid linking away from the current page
      • -
    • Never use for content that is essential to completing the primary task of the page
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Label the trigger link with “Terms and conditions,” “Privacy statement,” or similar
      • -
    • When triggered, the overlay displays the disclaimer content in a secondary window (modal dialogue)
      • -
    • Disclaimer overlays must only include one action, which is to close them – this action is enabled by a clickable “X” in the upper right corner and a button labeled “Close” at the bottom of the overlay
      • -
    • Closing the overlay returns a person to the page containing the link that was used to activate it
      • -
    • Until the overlay is dismissed, the window under the disclaimer overlay is inert; people cannot interact with content outside of the overlay window (to avoid issues with assistive technology interpreting what is displayed)
      • -
    • Use only WET Centred popup (Lightbox) for this pattern
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Disclaimer overlay pattern
    - Screenshot illustrating the Web Experience Toolkit (WET) centered overlay pop-up, being used to display disclaimers and legal information on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_doc-template-en.html b/common-design-patterns/_doc-template-en.html deleted file mode 100644 index bf4f5aaa7d..0000000000 --- a/common-design-patterns/_doc-template-en.html +++ /dev/null @@ -1,377 +0,0 @@ ---- ---- - - - - - - [Pattern name] - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    [Pattern name]: Canada.ca design system

    - -
    -
    -
      -
    • Beta
      • -
    • Last updated: [Date]
      • - -
    -
    - -
    - - -

    [Description of what the pattern does]

    - -
    -

    [Optional image or coded example of the pattern so it can be visually identified quickly]

    -
    -
    -

    On this page

    - -
    -
    -

    When to use

    -

    [Describe when this pattern should be used]

    - -
    -
    -

    What to avoid

    -

    [Details of what should be avoided when using this pattern]

    -
    -
    -

    How to implement

    -

    [Coded examples of main variants, with optional specific When to to use and What to avoid for specific variants]

    -
      -
    1. Variant 1
      2. -
    2. Variant 2
      3. -
    -

    1. Variant 1

    -

    When to use: [When to use this variant]

    -

    What to avoid: [What to avoid with this variant] -

    -

    [Coded example of variant 1]

    -
    -
    - Code - 
    <p>[Coded example of variant 1]</p>
    -
    -

    2. Variant 2

    -

    When to use: [When to use this variant]

    -

    What to avoid: [What to avoid with this variant] -

    -

    [Coded example of variant 2]

    -
    -
    - Code - 
    <p>[Coded example of variant 2]</p>
    -
    -

    Customizing [pattern] (optional)

    - - - - - - - - - - - - - - - - - - - - - - - - - -
    OptionDescriptionHow to use
    [Option 1][Description of option 1][How to use, modify or customize option 1]
    [Option 2][Description of option 2][How to use, modify or customize option 2]
    [Option 3][Description of option 3][How to use, modify or customize option 3]
    -
    -

    Research and blog posts

    -

    [Optional: Links to blog posts and research summaries that support the use of the pattern]

    -

    Latest changes

    -
    -
    -
    -
    [Description of change]
    -
    -
    -
    -

    Discussion

    -

    Discuss the pattern in github issues

    -
    - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - diff --git a/common-design-patterns/_download-links.html b/common-design-patterns/_download-links.html deleted file mode 100644 index 4415249dea..0000000000 --- a/common-design-patterns/_download-links.html +++ /dev/null @@ -1,303 +0,0 @@ ---- ---- - - - - - - -Download links - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    - - - -
    -

    Download links - Canada.ca design pattern

    -
    -
    -

    From: Treasury Board of Canada Secretariat

    -
    -

    Download links are used for referencing and linking to non-HTML files on Canada.ca web pages.

    -
    -

    When to use this pattern

    -
      -
    • Only use this pattern for non-HTML files like PDFs and Excel documents that already have an HTML equivalent
      • -
    • Do not use this pattern when linking to HTML pages
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Include a thumbnail or generic image indicating that this link is to a non-HTML resource
      • -
    • Include the name of the non-HTML file as a text link
      • -
    • Include file type and file size information in parentheses
      • -
    • Do not place the download links block in line with text blocks, for example within a paragraph; instead, place it in between text blocks
      • -
    • The default alignment is flush left
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Download links pattern
    - Screenshot illustrating the download link pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_feature-banner.html b/common-design-patterns/_feature-banner.html deleted file mode 100644 index f79ea18f81..0000000000 --- a/common-design-patterns/_feature-banner.html +++ /dev/null @@ -1,334 +0,0 @@ ---- ---- - - - - - - - Promotional feature banner - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    Promotional feature banner - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -
    -

    Promotional feature banners are in-page components used to promote government-wide and institution-specific activities, initiatives, programs, and services.

    -
    -

    When to use this pattern

    -
      -
    • Use this component to promote timely, current activities and initiatives
      • -
    • Only use this component on navigation or landing pages; do not use with destination content
      • -
    • Do not use this component when a person’s flow must not be interrupted, as in a transactional process
      • -
    • Do not duplicate content from other promotional components on the page
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Promotional feature banners are full-width, narrow-height components that comprise text, imagery, and links
      • -
    • A maximum of 65 characters is allowed for all text (including link label)
      • -
    • Both text and imagery must be linked, but all links in the feature banner must point to the same destination; alternatively, the entire container must operate as a single linked area
      • -
    • Textual elements must be coded as HTML text—do not embed text into imagery
      • -
    • To ensure responsiveness at varying screen sizes, do not use a single static image for this component
      • -
    • Use the defined presentation classes included in the Canada.ca WET theme
      • -
    • For image sizing details, consult the Canada.ca GitHub page
      • -
    -
    -
    -
    -

    Example

    -
    -
    -
    -
    Promotional feature banner pattern
    - Screenshot illustrating the promotional feature banner pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - - -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_feature-tiles.html b/common-design-patterns/_feature-tiles.html deleted file mode 100644 index c22e885ead..0000000000 --- a/common-design-patterns/_feature-tiles.html +++ /dev/null @@ -1,331 +0,0 @@ ---- ---- - - - - - - -Context-specific features - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    - - - -
    -

    Context-specific features - Canada.ca design pattern

    -
    -
    -

    From: Treasury Board of Canada Secretariat

    -
    -

    Context-specific features are in-page components used to promote government activities, initiatives, programs and services.

    -
    -

    When to use this pattern

    -
      -
    • Use this component to promote government activities, initiatives, programs and services that are relevant to the page on which they appear
      • -
    • Do not use this component to promote activities and initiatives that are not relevant to their context
      • -
    • Do not use this component when a person's flow must not be interrupted, as in a transactional process
      • -
    • Do not duplicate content or links from other components on the page
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Context-specific features always comprise a link and an image, with optional header and description text
      • -
    • On navigation templates (such as theme or topic pages), use 2 or 3 features side-by-side, with each link placed above the image and the description placed underneath the image
      • -
    • On destination templates (such as generic pages), limit use to a single feature with the image placed to the left of the link and description
      • -
    • On navigation pages, always use a header. The default wording for this block is “Features.” Use more specific headings where possible to provide stronger context for a person
      • -
    • On destination pages, use of a header is optional. When using a header, always use a specific wording to provide context
      • -
    • Position context-specific features after the main content of the page, but before the footer section
      • -
    • Use a maximum of 40 characters for the hyperlink text
      • -
    • When applying images in contextual features, follow specifications in the images pattern
      • -
    • Keep the description text short and concise -
        -
      • 1 or 2 lines is ideal
        • -
      • do not exceed 3 lines of text (which works out to approximately 145 characters with spaces)
        • -
      -
      • -
    • The description link text and header must be different -
        -
      • do not repeat multi-word phrases in any of the header, link or description text
        • -
      -
      • -
    • Use the defined presentation classes included in the Canada.ca WET theme
      • -
    • For image sizing details, consult the Canada.ca GitHub page
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Destination page example with a single feature

    -
    -
    -
    -
    Promotional feature tiles pattern
    - Screenshot illustrating a the context-specific feature pattern with a single heading, image, link and description on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -

    Navigation page example with three features

    -
    -
    -
    -
    Promotional feature tiles pattern
    - Screenshot illustrating the context-specific features pattern with a group of 3 sets of links, images and descriptions placed under a single heading on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_global-header-workshop.html b/common-design-patterns/_global-header-workshop.html deleted file mode 100644 index 6a2e3ed63f..0000000000 --- a/common-design-patterns/_global-header-workshop.html +++ /dev/null @@ -1,376 +0,0 @@ ---- ---- - - - - - - Global header - Canada.ca design pattern - Canada.ca - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Global header - Canada.ca design pattern

    -
    -
    - - -

    From: Treasury Board of Canada Secretariat

    -

    Mandatory

    - update pictures -
    -
    -
    Global header – large screen
    - Diagram of global header for large screens. Text version below: -
    - Text version -

    The global header has the Government of Canada signature in the top left. Under the signature is the theme and topic menu, and under the menu is the breadcrumb trail. The language toggle link is at the rop right. Under the language toggle is the site search box.

    -
    -
    -
    -
    -
    -
    Global header – small screen
    - Diagram of global header for small screens. Text version below: -
    - Text version -

    The global header has the Government of Canada signature in the top left. The language toggle link is at the rop right. Under the signature and the language toggle is the site search box. Under the search box is the theme and topic menu. Under the theme and topic menu is the breadcrumb trail.

    -
    -
    -

    The global header is at the top of each Government of Canada web page.

    -

    The header consists of the following elements:

    -
      -
    • Background colour (white)
      • -
    • Government of Canada signature
      • -
    • Link to canada.ca landing page from Government of Canada signature
      • -
    • Language toggle
      • -
    • Site search box
      • -
    • Sign in button
      • -
    • Theme and topic menu
      • -
    • Key line
      • -
    • Breadcrumb trail
      • -
    -
    - -

    How to implement

    -

    Elements can be configured for the type of asset you’re creating.

    - -
      -
    • Standard web page: Pages where people can navigate away without losing data, triggering errors or terminating their - session.
      • -
    • Transactional page: Pages with an interaction task where people might lose data, trigger errors, or terminate their - session if they navigate away from the page.
      • -
    • Campaigns: Landing pages for external marketing or advertising campaigns. The flexibility in layout allows institutions - to match elements of their external campaign with the landing page.
      • -
    • Web application: Government of Canada Web applications that require authentication.
      • -
    -

    When to use

    -

    The global header should be on all pages from the Goverment of Canada. Some elements are optional in these situations:

    -
      -
    • Transactional scenarios: Pages where people are engaged in a transactional process such that mistakenly following other links would result in errors, loss of data or accidental termination of the session.
      • -
    • Campaigns: Landing pages for external marketing or advertising campaigns. The flexibility in layout allows institutions to match elements of their external campaign with the landing page.
      • -
    -

    How to implement

    -

    If you're not on the Managed Web Service, you can implement the global header by using the Centrally Deployed Templates Solution (CDTS).

    -

    Follow these requirements:

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Global header requirements
    Header elementStandard pageCampaign pageTransactional page
    Government of Canada signature (linked to Canada.ca home)MandatoryMandatoryMandatory, but link to Canada.ca home page is optional
    Language toggleMandatoryMandatoryMandatory table 1 note 1
    Site search boxMandatoryOptionalOptional
    Theme and topic menuMandatoryOptionalOptional
    Breadcrumb trailMandatoryOptionalOptional
    Background colour (white)MandatoryOptionalMandatory
    -

    Table 1 Notes

    -
    -
    Table 1 Note 1
    -
    -

    Transactional web applications must be developed so that people can toggle between official languages on any given page or screen. Some legacy web applications may not have been designed this way. Such applications should be updated to allow this functionality. Until they are replaced or updated, the language toggle can be omitted if its use would result in a loss of data.

    -

    Return to table 1 note 1 referrer

    -
    -
    -
    -

    Latest changes

    -

    2020-06-25: the small screen version was modified to a slimmer version

    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - diff --git a/common-design-patterns/_icons.html b/common-design-patterns/_icons.html deleted file mode 100644 index 9d4c9eb1ec..0000000000 --- a/common-design-patterns/_icons.html +++ /dev/null @@ -1,345 +0,0 @@ ---- ---- - - - - - - - Icons - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    Icons - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -
    -

    Icons are symbols for communicating actions or states on Canada.ca.

    -
    -

    When to use this pattern

    -

    Use the following icons when assisting people with site functionality:

    -
      -
    • buttons
      • -
    • alerts
      • -
    • form fields
      • -
    • external or email links
      • -
    • links to non-HTML files like a PDF or Excel files
      • -
    -

    Do not use icons:

    -
      -
    • to add decoration to navigation labels or headings
      • -
    • to style links internal to Canada.ca
      • -
    • to add emphasis to text
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Do not use 2 icons in the same context
      • -
    • Ensure icons are always accompanied by a text label
      • -
    • Place an icon in line with its associated text label
      • -
    • Only use the defined icon sets included with WET
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Icons pattern
    - Screenshot illustrating the icon pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_images.html b/common-design-patterns/_images.html deleted file mode 100644 index 71e118ca90..0000000000 --- a/common-design-patterns/_images.html +++ /dev/null @@ -1,374 +0,0 @@ ---- ---- - - - - - - - Images - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    Images - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -
    -

    Images are visual content that complements or enhances text, including photographs, graphics, drawings, or diagrams.

    -
    -

    When to use this pattern

    -
      -
    • Avoid unnecessary decoration on Canada.ca – only use imagery when it provides more information than can be provided through text alone
      • -
    • Refer to the Canada.ca Content Style Guide for details on when to use images
      • -
    • Do not use images as stand-alone clickable elements providing navigation or functionality
      • -
    • Images must be clickable when accompanied by text links, but are secondary to the links
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Size and place images appropriately for the context they are in -
        -
      • images must appear connected to the content, and complement it
        • -
      -
      • -
    • Do not place images in line with text blocks, for example within a paragraph; instead, place them in between text blocks
      • -
    • Where images include people, they should reflect Canada’s diverse population
      • -
    • Images must appear square or rectangular; round or oval images may not be used
      • -
    • Where captions and attributions are required, place them immediately under the image they refer to
      • -
    • Images must only be clickable when accompanied by a text link to the same destination -
        -
      • in such cases, the default position for text links is immediately above the image
        • -
      -
      • -
    • Align links, captions or attributions with the left edge of the image they refer to
      • -
    • Do not use images or videos copied from other websites
      • -
    • Do not use images to display text -
        -
      • text on feature images may be difficult to read on a small screen
        • -
      • images may instead focus on photography and illustration
        • -
      • incidental snippets of text, such as text appearing on photographed objects, wordmarks in logos, #hashtags, etc., are acceptable
        • -
      -
      • -
    -
    -
    -

    Licensing

    -
      -
    • Institutions are responsible for the proper use of images purchased through a licensing agreement -
        -
      • if the image is licensed only to one institution, it can only be used by that institution on Canada.ca
        • -
      • read the licensing agreement carefully for any other restrictions on the use of purchased images
        • -
      -
      • -
    • Verify that you have the appropriate rights to publish images on Canada.ca. Specifically: -
        -
      • get a signed release from a person (or legal guardian) before you publish any image of him or her
        • -
      • have documentation showing you have the appropriate rights to publish licensed (or rights-managed) images
        • -
      -
      • -
    • Images that are no longer licensed for use by an institution must be removed from Canada.ca
      • -
    • Purchase the highest-resolution available for an image, to be able to use the image in any size
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Images pattern
    - Screenshot illustrating the image pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_in-page-toc.html b/common-design-patterns/_in-page-toc.html deleted file mode 100644 index eaec869d04..0000000000 --- a/common-design-patterns/_in-page-toc.html +++ /dev/null @@ -1,339 +0,0 @@ ---- ---- - - - - - - - In-page table of contents - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    In-page table of contents - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - - - -
    -

    The in-page table of contents pattern is a list of links that lead to subsections of the same page. This pattern is intended for long documents that exist as a single page.

    -
    -

    Objective

    -

    Use the in-page table of contents pattern to:

    -
      -
    • provide an outline for the content of a single page that has multiple subsections
      • -
    • provide an alternative method to jump to specific content on the page, without using the scroll bar
      • -
    -

    Use this pattern when:

    -
      -
    • excessive scrolling is required to view all of the content on the page
      • -
    • the page is divided into subsections, each with its own headings
      • -
    -

    Do not use this pattern when the document exists across several web pages. Instead, use the multi-page table of contents pattern.

    -
    -
    -

    How and when to use an in-page table of contents

    -
      -
    • Always position the in-page table of contents pattern at the start of the page, before the substantive content of the page begins
      • -
    • Label the pattern “On this page” to distinguish it from other page content and to provide consistency throughout the site
      • -
    • Present links using list elements—bullets for an unordered list, numbers for an ordered list
      • -
    • Use standard linking styles to ensure that the links present as clickable elements
      • -
    • Present the in-page table of contents aligned to the left, as a vertical list, as opposed to using a column layout
      • -
    -
    -
    -
    -
    -
    Figure 23. In-page table of contents pattern
    - Image of in-page table of contents pattern. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    -
    - - -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_institutional-byline.html b/common-design-patterns/_institutional-byline.html deleted file mode 100644 index a2a58679aa..0000000000 --- a/common-design-patterns/_institutional-byline.html +++ /dev/null @@ -1,329 +0,0 @@ ---- ---- - - - - - - -Institutional byline - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    - - - -
    -

    Institutional byline - Canada.ca design pattern

    -
    -
    -

    From: Treasury Board of Canada Secretariat

    -
    -

    The institutional byline provides people with a link to the institution or institutions responsible for the content.

    - -
    -

    When to use this pattern

    -
      -
    • Use only on destination pages such as service initiation or generic pages; do not use on navigation pages like themes, topic pages, institutional/organizational profiles
      • -
    • Use only once on the page to provide a link to the institution, organization or similar entity responsible for the content
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • The link to the institution or organization is introduced by the word “From:”
      • -
    • Only links pointing to institutional profile pages, organizational profile pages, or partnering/collaborative arrangement profile pages are permitted
      • -
    • Only one institution or organization should appear in the institutional byline
      • -
    • The link label must be the same as the name that appears on the institutional or organizational profile page being linked to
      • -
    • Position the institutional byline directly underneath the page title, aligned to the left
      • -
    • Use standard paragraph and link styles
      • -
    • Do not place this block in line with other text blocks or layout elements; it stands alone
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Institutional byline pattern
    - Screenshot illustrating the institutional byline pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_interactive-questions.html b/common-design-patterns/_interactive-questions.html deleted file mode 100644 index 1b9b276108..0000000000 --- a/common-design-patterns/_interactive-questions.html +++ /dev/null @@ -1,384 +0,0 @@ ---- ---- - - - - - - - Interactive questions - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - -
    - - -

    Interactive questions - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - - -
    -

    The interactive questions pattern is used to present people with a sequence of simple questions that leads to the specific answer they need to continue with or complete their task. The interactive questions pattern can be used to help people understand eligibility criteria, applicability of rules, or compliance requirements that depend on specific situations or conditions.

    -
    -

    When to use this pattern

    -
      -
    • Use to guide people to an appropriate answer by asking them a series of questions
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Use defined presentation classes for the field flow interface included in WET
      • -
    -
    -

    Introducing interactive questions

    -
      -
    • The heading for this pattern must express the goal of the set of interactive questions -
        -
      • for example, “Find out if you can renew your passport online”
        • -
      -
      • -
    • Optionally provide an overview of the results people can expect from completing the interactive questionnaire
      • -
    • Optionally provide brief instructions above the questions
      • -
    -
    -
    -

    Presenting questions

    -
      -
    • Keep the number of questions to a minimum (no more than 7 per sequence)
      • -
    • Each question must be written to a person reading it (use “you” and “your”)
      • -
    • Present choices or options immediately after each question, ensuring they are written as possible answers to the question above
      • -
    • When presenting choices, use standard form controls like radio buttons, checkboxes, and drop-down menus; ensure you cover off all possible choices
      • -
    • Where possible, pre-select the most common or optimal choice
      • -
    -
    -
    -

    Grouping questions

    -
      -
    • Present questions one at a time to keep focus on the current question; keep each subsequent question on the same page in the same place as the previous question
      • -
    • Always place questions in context (for example, on the eligibility page within the Service Initiation template)
      • -
    -
    -
    -

    Moving through the sequence of questions

    -
      -
    • Always use buttons for navigating though the sequence of questions (buttons labeled “continue” or “next” to trigger the next question or the answer)
      • -
    • Ensure people are able to go back to undo or change an earlier selection, via buttons or links (such as a link labeled “change your selection”)
      • -
    • Any buttons used for navigating through the questions must be labeled appropriately for the context (for example, “Continue” might make sense in one situation, but a clearer choice in another might be, “Find out if you’re eligible”)
      • -
    • When interactive questions are combined with the multi-page navigation pattern (such as in a service initiation template), avoid using “next” to avoid confusion between the 2 types of buttons
      • -
    -
    -
    -

    Presenting answers

    -
      -
    • Always summarize the choices people have made and ensure they can go back to undo or change an earlier selection
      • -
    • Explain the answer clearly and simply
      • -
    • Provide links to the next action that people should take based on the answer they are given
      • -
    -
    -
    - -

    Research and blog posts

    - - - -
    -

    Working example

    - -
    -
    -

    Example

    -
    -
    -
    -
    Interactive questions pattern
    - Screenshot illustrating a demonstration of the interactive questions pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_labels.html b/common-design-patterns/_labels.html deleted file mode 100644 index 8dfd4d2963..0000000000 --- a/common-design-patterns/_labels.html +++ /dev/null @@ -1,408 +0,0 @@ ---- ---- - - - - - -Labels - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Labels: Canada.ca design system

    - -
    -
    -
      -
    • Last updated: 2021-02-08
      • - -
    -
    - -
    -
    -

    Labels are visual indicators that assign a tag to items such as events, products, programs or services.

    - -
    - Default - Primary - Success - Information - Warning - Danger -
    - -
    -

    On this page

    - -
    -
    -

    When to use

    -

    Use labels to:

    - -
      -
    • signal that an item belongs to a category (for example, to show if some programs are open, some closed, and some will open soon)
      • -
    • label or stamp items with additional information, like the date an item was updated, or the closure of an area
      • -
    • show different stages of progress in a list of items (for example, to show which vaccines are under review and which ones are approved)
      • -
    - -

    In your design, ensure labels are placed very close to the item they apply to.

    -
    -
    -

    What to avoid

    -
      -
    • Don't use long labels or full sentences - keep them short
      • -
    • Don't use labels that have overlapping meaning
      • -
    • Don't use labels to add style to text
      • - -
    -
    -
    -

    How to implement

    - - -

    Use the right type of label:

    -
      -
    1. Default
      2. -
    2. Primary
      3. -
    3. Success
      4. -
    4. Information
      5. -
    5. Warning
      6. -
    6. Danger
      7. -
    - - -

    1. Default label

    -

    When to use: Use to give additional information about an item, like adding dates to a list of items.

    - -
    - Evaluation of the Citizenship Program July 2020 -
    -
    - Code - 
    <a href="#">Evaluation of the Citizenship Program</a> <span class="label label-default">July 2020</span>
    -
    -

    2. Primary label

    -

    When to use: Use to signal an important information about an item, like when a new program is not yet open but will be soon.

    - -
    -

    Canada Recovery Benefit (CRB) Opening October 12

    -
    -
    - Code - 
    <h3 class="h5"><a href="#">Canada Recovery Benefit (CRB)</a> <span class="label label-primary">Opening October 12</span></h3>
    -
    -

    3. Success label

    -

    When to use: Use to signal an item is open, available or approved.

    - -
    -

    Protecting Canada’s Fresh Water Open - Accepting input

    - -
    -
    - Code - 
    <p><a href="#">Protecting Canada’s Fresh Water</a> <span class="label label-success">Open - Accepting input</span></p>
    -
    -

    4. Information label

    -

    When to use: Use to tag an item with a value, like identifying a new blog post. "New" labels should be temporary.

    - - -
    -

    Labelling study: which words work best New

    -
    -
    - Code - 
    <h3 class="h5"><a href="#">Labelling study: which words work best</a> <span class="label label-info">New</span></h3>
    -
    -

    5. Warning label

    -

    When to use: Use when you want to bring attention to an item to warn people of a change, like if a program is ending soon.

    - -
    -

    Canada Emergency Response Benefit (CERB) Ending soon

    -
    -
    - Code - 
    <h3 class="h5"><a href="#">Canada Emergency Response Benefit (CERB)</a> <span class="label label-warning">Ending soon</span></h3>
    -
    - - -

    6. Danger label

    -

    When to use: Use when an item is no longer available, like when a program has ended or an area is closed.

    - -
    -

    Canada Emergency Response Benefit (CERB) Closed

    -
    -
    - Code - 
    <h3 class="h5"><a href="#">Canada Emergency Response Benefit (CERB)</a> <span class="label label-danger">Closed</span></h3>
    -
    - - -
    -

    Research and blog posts

    -

    We tested the use of labels successfully during the transition period between the Canada Economic Response Benefit and the new benefits that replaced it. Adding labels to the different programs on the topic page made it easier for people to understand what was available to them.

    - -

    Latest changes

    -
    -
    -
    -
    Added label documentation to the design system
    -
    -
    -
    -

    Discussion

    -

    Discuss the pattern in github issues

    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - diff --git a/common-design-patterns/_latest-news.html b/common-design-patterns/_latest-news.html deleted file mode 100644 index 0651c4d98e..0000000000 --- a/common-design-patterns/_latest-news.html +++ /dev/null @@ -1,426 +0,0 @@ ---- ---- - - - - - -Latest news - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    - -

    Latest news: Canada.ca design system

    -
    -
    -
      -
    • Last updated: 2022-09-23
      • -
    -
    -
    - -
    -

    The Latest news pattern features the most recent news items posted by the institution, organization or entity.

    - -
    -

    On this page

    - -
    - -
    -

    When to use

    -

    Use this pattern on the following templates:

    - -
    - -
    -

    What to avoid

    -

    Make sure this pattern doesn't get in the way of top task content.

    -
    - -
    -

    How to implement

    - -

    You can use either the beta or the stable version of this pattern.

    - -

    Beta latest news

    -

    The beta version is used on the institutional landing page. The code is still under review. It may still be subject to minor changes.

    -

    The beta version will eventually replace the stable version.

    - - -
    -
    -
    -
    -

    News

    - - - -

    More: [Institution] news

    -
    -
    -

    Features

    -
    -
    - -
    # -
    [Featured hyperlink text]
    -

    Brief description of the feature being promoted.

    -
    -     -
    -
    - -
    # -
    [Featured hyperlink text]
    -

    Brief description of the feature being promoted.

    -
    -     -
    -
    -
    - -
    -Code -
    <div class="row col-lg-12">
-<section class="col-md-4 wb-feeds limit-3 gc-nws">
- <h2 class="h3">News</h2>
-<!-- demonstrates the layout - use json feed where applicable -->
-<ul class="feeds-cont list-unstyled lst-spcd feed-active">
- <li><a href="#">[News title]</a><br> <small class="feeds-date">YYYY-MM-DD HH:MM</small></li>
- <li><a href="#">[News title]</a><br> <small class="feeds-date">YYYY-MM-DD HH:MM</small></li>
- <li><a href="#">[News title]</a><br> <small class="feeds-date">YYYY-MM-DD HH:MM</small></li>
-</ul>
-<!-- json feed for news example
-<ul class="feeds-cont list-unstyled lst-spcd">
- <li> <a data-ajax="https://www.canada.ca/content/canadasite/api/nws/fds/en/web-feeds/revenue-agency.json" href="https://www.canada.ca/en/revenue-agency.atom.xml" rel="external">Canada Revenue Agency news items</a> </li>
- </ul>
--->
-<p>More: <a href="#" class="admin">[Institution] news</a></p>
-</section>
-<section class="col-md-8 gc-prtts">
- <h2 class="h3">Features</h2>
-  <div class="row wb-eqht">
-   <div class="col-md-6 mrgn-bttm-md">
-    <a class="figcaption hght-inhrt" href="#">
-     <figure class="well well-sm brdr-rds-0 hght-inhrt"><img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png">
-      <figcaption class="h5">[Featured hyperlink text]</figcaption>
-        <p>Brief description of the feature being promoted.</p>
-        </figure>
-       </a>
-      </div>
-    <div class="col-md-6 mrgn-bttm-md">
-     <a class="figcaption hght-inhrt" href="https://www.canada.ca/en/revenue-agency/campaigns/my-benefits-credits.html">
-     <figure class="well well-sm brdr-rds-0 hght-inhrt"><img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png">
-      <figcaption class="h5">[Featured hyperlink text]</figcaption>
-      <p>Brief description of the feature being promoted.</p>
-        </figure>
-     </a>
-     </div>
-    </div>
-  </section>
- </div>
-</div>
    -
    -
    - -
    -

    Stable latest news

    -

    The beta version will eventually replace the stable version.

    -
    - Guidance for the latest news stable version -
      -
    • It features the most recent news items posted by the entity
      • -
    • The heading is labelled “Latest”
      • -
    • 2 of the featured news items must include an image, a headline hyperlink, additional information and a description text: -
        -
      • can include promotional content, and be prioritized at the institution’s discretion
        • -
      • keep description text short and concise
        • -
      -
      • -
    • The types of news products that must be listed as text-only are limited to only those available through news.gc.ca: -
        -
      • media advisories
        • -
      • backgrounders
        • -
      • news releases
        • -
      • speeches
        • -
      • statements
        • -
      -
      • -
    • Consult the Canada.ca GitHub page for details on image sizing
      • -
    -
    - -

    Working example

    - -
    -
    -

    Examples

    -
    -
    -
    - -
    -
    Latest news pattern: 2 images
    - Screenshot illustrating the latest news pattern with 2 images on Canada.ca. Details on this graphic can be found in the surrounding text.
    - -
    -
    -
    -
    -
    - -
    -

    Discussion

    -

    Discuss the pattern in github issues

    -
    - -
    - -
    - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_more-information.html b/common-design-patterns/_more-information.html deleted file mode 100644 index 2732f60591..0000000000 --- a/common-design-patterns/_more-information.html +++ /dev/null @@ -1,337 +0,0 @@ ---- ---- - - - - - - - More information for - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    - - -

    More information for - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -
    -
    -

    When to use this pattern

    -
      -
    • It is used to connect to a related government-wide audience page or to an audience topic page
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • It is used to connect the topic page to a related government-wide audience page or to an audience topic page. Government-wide audiences are: -
        -
      • Indigenous peoples
        • -
      • youth
        • -
      • veterans
        • -
      • -
    • For more details on Government of Canada audiences go to Audience pages
      • -
    • Label the heading “More information for”
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    More information for pattern
    - Screenshot illustrating the more information for pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_most-requested.html b/common-design-patterns/_most-requested.html deleted file mode 100644 index e43cd58a43..0000000000 --- a/common-design-patterns/_most-requested.html +++ /dev/null @@ -1,303 +0,0 @@ ---- ---- - - - - - - -Most requested - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    - - - -
    -

    Most requested - Canada.ca design pattern

    -
    -
    -

    From: Treasury Board of Canada Secretariat

    -
    -
    -

    When to use this pattern

    -
      -
    • Features top tasks related to the page it is on
      • -
    • For example, on a topic page or organizational profile it will list the top tasks related to that topic or organization, based on metrics and user-research
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • It lists top tasks specific to the page it is on based on page-view metrics and user research
      • -
    • Ideally, keep it to a maximum of 3 links, as people generally don't click on links beyond the first 3
      • -
    • A maximum of 7 links is allowed
      • -
    • Items can only link to destination content, or related topic links that do not already appear on the page
      • -
    • Link titles may not consist of program or publication names, unless these are meaningful to their target audience
      • -
    • Label the heading “Most requested”
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Most requested for pattern
    - Screenshot illustrating the most requested pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_multimedia.html b/common-design-patterns/_multimedia.html deleted file mode 100644 index 3d18fb5860..0000000000 --- a/common-design-patterns/_multimedia.html +++ /dev/null @@ -1,339 +0,0 @@ ---- ---- - - - - - - -Multimedia - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    - - - -
    -

    Multimedia - Canada.ca design pattern

    -
    -
    -

    From: Treasury Board of Canada Secretariat

    -
    -

    Multimedia is time-based media of a visual or auditory nature that complements or enhances text, including video clips and audio recordings.

    -
    -

    When to use this pattern

    - -
    -
    -

    How to use this pattern

    -
      -
    • Size and place multimedia appropriately for the context it is in. Embedded multimedia must appear connected to the content, and complement it
      • -
    • Do not place multimedia in line with text blocks, for example within a paragraph; place them in between text blocks instead
      • -
    • Where multimedia includes people, it should reflect Canada’s diverse population
      • -
    • Embedded multimedia must appear square or rectangular
      • -
    • Use only the WET multimedia player, which provides accessible playback controls
      • -
    • Always include descriptive transcripts accompanying multimedia content – place the link to the transcript immediately under the multimedia
      • -
    • The link must point to a separate page for longer transcripts or open a details-summary element for shorter transcripts
      • -
    • Where additional captions and attributions are required, place them immediately under the link to the transcript for the multimedia that they refer to
      • -
    • Align links, captions or attributions with the left edge of the embedded multimedia that they refer to
      • -
    • Avoid using multimedia from sources outside the Government of Canada
      • -
    -
    -
    -

    Licensing

    -
      -
    • Institutions are responsible for the proper use of multimedia purchased through a licensing agreement
      • -
    • If the multimedia is licensed only to one institution, it can only be used by that institution on Canada.ca
      • -
    • Read the licensing agreement carefully for any other restrictions on the use of purchased multimedia
      • -
    • Verify that you have the appropriate rights to publish multimedia on Canada.ca, specifically: -
        -
      • get a signed release from a person (or legal guardian) before you publish any representation of him or her
        • -
      • have documentation showing you have the appropriate rights to publish licensed (or rights-managed) multimedia
        • -
      -
      • -
    • Multimedia that is no longer licensed for use by an institution must be removed from Canada.ca
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Multimedia player pattern
    - Screenshot illustrating the multimedia player pattern embedded on a generic page on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -

    1: WET media player

    -

    Mandatory

    -

    The video and audio player components of the Web Experience Toolkit have been developed and tested to meet Canada.ca coding and accessibility standards. No other multimedia players are permitted on Canada.ca.

    -
    -
    -

    2: Transcript

    -

    Mandatory

    -

    All video and audio posted to Canada.ca must include a written transcript immediately following the WET player.

    -

    Shorter transcripts should be placed on the same page following the player, while longer transcripts can be hidden inside a details/summary element or placed on a separate page. When placing the transcript on a separate page, a link must appear in this spot which leads to the page containing the transcript.

    -
    -
    -

    3: Captions or descriptions

    -

    Optional

    -

    Captions, descriptions or attributions associated with multimedia content must be placed after the link to the transcript, left-aligned to the edge of the WET player.

    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_ordered-multipage.html b/common-design-patterns/_ordered-multipage.html deleted file mode 100644 index b070679dd7..0000000000 --- a/common-design-patterns/_ordered-multipage.html +++ /dev/null @@ -1,347 +0,0 @@ ---- ---- - - - - - - - Ordered multi-page navigation - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    - - -

    Ordered multi-page navigation - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - - -
    -

    The ordered multi-page navigation pattern:

    -
      -
    • is a set of links to a group of several pages intended to be read in a preferred order
      • -
    • includes previous/next links to guide a person through the page set in the preferred order
      • -
    -
    -

    Objective

    -

    Use the ordered multi-page navigation pattern to provide:

    -
      -
    • an outline of content that spans multiple pages and has a default or preferred order (for example, guides, service initiations, sequential instructions)
      • -
    • a method of jumping to any page within the sequence, bypassing the default order of the pages
      • -
    -

    Do not use this pattern when:

    -
      -
    • the content exists as a single page requiring scrolling to view all the subsections (use the In-page table of contents pattern)
      • -
    • the content exists as a set of multiple pages that does not have a default or preferred order
      • -
    • the default order of the content must not be circumvented that is when the preferred order is crucial and people cannot be permitted to move between pages in a different order
      • - -
    -
    -
    -

    How and when to use ordered multi-page navigation

    -
      -
    • Always position the ordered multi-page navigation pattern at the start of the page, before the substantive content of the page begins
      • -
    • Ensure that the order and position of the page links are identical on each page of the set
      • -
    • Number the step-by-step links to indicate the preferred order. Not all links necessarily need to be numbered, if they represent pages/steps that are not part of the sequence
      • -
    • Highlight the link for the current page. Do not highlight with the same colour used on primary action buttons
      • -
    • Position previous/next links immediately below the substantive content on the page
      • -
    • Accompany the previous/next labels with arrow icons to reinforce the concept
      • -
    • Position previous/next links consistently (for example, “previous” on the left, “next” on the right)
      • -
    • On the first page of the document, omit the “previous” link; on the last page of the document, omit the “next” link
      • -
    -
    -
    -
    -
    -
    Ordered multi-page navigation pattern
    - Image of ordered multi-page navigation pattern. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    -
    - - - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_privacy-disclaimer.html b/common-design-patterns/_privacy-disclaimer.html deleted file mode 100644 index ef394ead00..0000000000 --- a/common-design-patterns/_privacy-disclaimer.html +++ /dev/null @@ -1,396 +0,0 @@ ---- ---- - - - - - - -Privacy disclaimer- Canada.ca design pattern- Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - - - -
    - - -

    Privacy disclaimer: Canada.ca design - system

    - -
    -
    -
      -
    • Last updated: 2021-01-20
      • - -
    -
    -
    - - -

    The disclaimer expand/collapse pattern ensures that terms of use, privacy statements and similar forms of disclaimer are available where required, but do not obstruct access to the main content of the page.

    - -
    -
    Privacy disclaimer -

    The personal information provided is governed in accordance with the Privacy Act. This personal information is being collected as part of the Government of Canada’s...

    - -

    [Include the full privacy disclaimer in the expand/collapse, including headings, sub-headings, etc.]

    - -
    -
    - - - -
    -

    On this page

    - -
    - - - -
    -

    When to use

    -
      -
    • Use where disclaimers (privacy statements, terms of use, etc.) are required
      • -
    • Use the pattern on the same page as the content subject to the disclaimer
      • -
    • Label the expand/collapse with “Terms and conditions,” “Privacy statement,” or something similar
      • -
    -
    - -
    -

    What to avoid

    -
      -
    • Don't use privacy disclaimers to hide any important details about the page content itself - keep it specifically for legal information
      • -
    • Don't create a barrier by forcing users to go through a page with only a disclaimer or privacy statement before they can reach the task content
      • -
    • Don't link away from the current page
      • -
    - - -
    - -
    -

    How to implement

    - -
    -
    Privacy disclaimer -

    The personal information provided is governed in accordance with the Privacy Act. This personal information is being collected as part of the Government of Canada’s...

    - -

    [Include the full privacy disclaimer in the expand/collapse, including headings, sub-headings, etc.]

    -
    -
    - Code - 
    <details>
- <summary>Privacy disclaimer</summary>
- <p>[Disclaimer text]</p>
-</details>
    -
    - - - -
    - -

    Research and blog posts

    -

    While working on the ArriveCAN content, we noticed that a long privacy statement at the top of the page created a barrier for some screen reader users.

    - -

    Latest changes

    -
    -
    -
    -
    Changed the guidance on disclaimers to use an expand/collapse
    -
    -
    -
    -

    Discussion

    -

    Discuss the pattern in github - issues

    -
    - -
    - - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_related-links.html b/common-design-patterns/_related-links.html deleted file mode 100644 index 65b98002db..0000000000 --- a/common-design-patterns/_related-links.html +++ /dev/null @@ -1,344 +0,0 @@ ---- ---- - - - - - - - Related links - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    - - -

    Related links - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - -
    -

    The related links pattern is a list of links to content that is related to the page on which it appears

    - -
    -

    When to use this pattern

    -
      -
    • Use this pattern to provide links to content that is directly relevant to the content on the current page
      • -
    • Do not use the related links pattern when a person’s flow must not be interrupted such as in a transactional process
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • Position the list of links after the main content of the page, but before the footer section -
        -
      • a consistent location at the bottom of the content area helps a person recognize the function of this pattern
        • -
      -
      • -
    • The default heading is "Related links" -
        -
      • use more specific headings where possible to provide stronger context for a person
        • -
      -
      • -
    • Do not add borders to this block -
        -
      • the aim is to reduce visual noise and avoid "banner blindness" (where people automatically interpret content in boxes as ads)
        • -
      -
      • -
    • Use standard link styles
      • -
    • Use bullets, not numbered lists
      • -
    -
    -
    -
    -

    Example

    -
    -
    -
    -
    Related links pattern
    - Screenshot illustrating the related links pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - - - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_report-problem.html b/common-design-patterns/_report-problem.html deleted file mode 100644 index 61b7810bc8..0000000000 --- a/common-design-patterns/_report-problem.html +++ /dev/null @@ -1,540 +0,0 @@ ---- ---- - - - - - - - Report a problem - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    -

    Report a problem: Canada.ca design - pattern

    - - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat -

    -
    - -
    -
    -

    The Report a problem pattern allows people to provide feedback via a form for any problems they experience with the - web page they are on.

    -

    This pattern enables page-level feedback. When people click on the Report a problem button on this page, they are - presented with common issues to select using checkboxes. If none of these issues are applicable, they may select - “Other” to provide more details.

    - -
    -

    On this page

    - -
    - -
    -

    When to use

    -

    Use this pattern to enable page-level feedback.

    -
    - -
    -

    What to avoid

    -

    Ensure that the feedback you receive is actionable. If you can, avoid implementing a form where people cannot - give details on the issues they are experiencing.

    -
    - -
    -

    How to implement

    - -
    -

    Using CDTS to implement the Canada.ca theme

    -

    Do not implement this pattern through CDTS. To turn off the page footer in CDTS:

    -
      -
    • use the CDTS version for GCWeb applications, instead of the one for static HTML pages
      • -
    • remove the reference for the 'prefooter'
      • -
    -

    You should then set up the report a problem form in its place.

    -
    - -

    The button, label, placement and privacy statement are mandatory:

    -
      -
    • the pattern is presented as a button using the button component styled for secondary - actions, which triggers a feedback form to expand when clicked
      • -
    • the label reads: “Report a problem on this page”
      • -
    • placement: positioned directly below the main content area, left-aligned
      • -
    • privacy statement: positioned within a dismissible overlay
      • -
    -

    The pattern for the contents of the feedback form is recommended. If meaningful data is not being received, a - mailto link can be used as an alternative.

    -

    Sending the form: Make sure to replace the "#" placeholder in the form action line with whatever your - institution uses to collect the data from the form. Consider sending the form to a generic email inbox if you - don't have a server set up to handle this type of form.

    - -
    - -
    -
    -
    - Report a problem on this page -
    -
    -
    -
    -
    - Please select all that apply: -
    - -
    -
    - - -
    -
    - -
    -
    - - -
    -
    - -
    -
    - - -
    -
    - -
    -
    - - -
    -
    - -
    -
    - - -
    -
    - -
    -
    - - -
    -
    -

    Privacy statement

    -
    -
    -

    Privacy statement

    -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo - urna.

    -
    -
    - -
    -
    -
    -

    Thank you for your help!

    -

    You will not receive a reply. For enquiries, please contact us.

    -
    -
    -
    -
    -
    - -
    - - -
    -
    - Code - 
    <div class="row">
-	 <div class="col-sm-6 col-md-5 col-lg-4">
-	  <details class="brdr-0" open="">
-	   <summary class="btn btn-default text-center">Report a problem on this page</summary>
-	   <div class="well row">
-	    <div class="gc-rprt-prblm">
-	     <div class="gc-rprt-prblm-tggl" id="wb-auto-7">
-	      <form action="#">
-	       <fieldset>
-	        <legend><span class="field-name">Please select all that apply: </span></legend>
-	        <div class="checkbox">
-	         <label for="problem1"><input type="checkbox" data-reveal="#broken" name="problem" value="Something is broken" id="problem1">Something is broken</label>
-	        </div>
-	        <div class="form-group hide" id="broken">
-	         <label for="problem1-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem1-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem2"><input type="checkbox" data-reveal="#spelling" name="problem" value="It has spelling or grammar mistakes" id="problem2">It has spelling or grammar mistakes</label>
-	        </div>
-	        <div class="form-group hide" id="spelling">
-	         <label for="problem2-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem2-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem3"><input type="checkbox" data-reveal="#wrong" name="problem" value="The information is wrong" id="problem3">The information is wrong</label>
-	        </div>
-	        <div class="form-group hide" id="wrong">
-	         <label for="problem3-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem3-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem4"><input type="checkbox" data-reveal="#outdated" name="problem" value="The information is outdated" id="problem4">The information is outdated</label>
-	        </div>
-	        <div class="form-group hide" id="outdated">
-	         <label for="problem4-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem4-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem5"><input type="checkbox" data-reveal="#find" name="problem" value="I can’t find what I’m looking for" id="problem5">I can’t find what I’m looking for</label>
-	        </div>
-	        <div class="form-group hide" id="find">
-	         <label for="problem5-detail">Describe what you’re looking for (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem5-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem6"><input type="checkbox" data-reveal="#confusing" name="problem" value="Other" id="problem6">Other</label>
-	        </div>
-	        <div class="form-group hide" id="confusing">
-	         <label for="problem6-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem6-detail">
-	        </div>
-	       </fieldset>
-	       <button type="submit" class="btn btn-primary wb-toggle wb-init wb-toggle-inited" data-toggle="{&quot;stateOff&quot;: &quot;hide&quot;, &quot;stateOn&quot;: &quot;show&quot;, &quot;selector&quot;: &quot;.gc-rprt-prblm-tggl&quot;}" aria-controls="wb-auto-7 wb-auto-8">Submit</button>
-	      </form>
-	     </div>
-	     <div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" id="wb-auto-8">
-	      <h3>Thank you for your help!</h3>
-	      <p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
-	     </div>
-	    </div>
-	   </div>
-	  </details>
-	 </div>
-	</div>
    -
    -
    - -
    -

    Discussion

    -

    Discuss the pattern in github - issues

    -
    - -
    -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_services-information.html b/common-design-patterns/_services-information.html deleted file mode 100644 index a064ada162..0000000000 --- a/common-design-patterns/_services-information.html +++ /dev/null @@ -1,394 +0,0 @@ ---- ---- - - - - - - -Services and information - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    - - - -
    -

    Services and information - Canada.ca design pattern

    -
    -
    -

    From: Treasury Board of Canada Secretariat

    -
    -

    Services and information is a pattern for presenting sets of links with accompanying descriptions (also known as doormat). Each link with its description provides an accurate and concise description of what a person will find on the destination page. Together, these sets of links and descriptions provide clear and distinct choices for people trying to complete their task.

    -
    -

    When to use this pattern

    -
      -
    • Use this pattern to provide links to topics or destination content related to the page it is on
      • -
    • Use when the primary purpose of the page is to provide clear choices to navigate to tasks
      • -
    -
    -
    -

    How to use this pattern

    -
    -

    Content requirements

    -
      -
    • Content for each link and description pairing is written for a grade 6-8 reading level
      • -
    • Keep punctuation simple
      • -
    • Use popular keywords that the target audience will likely know and use; base choices on research and evidence
      • -
    • Don’t use acronyms or abbreviations unless most people know these better than the long-form equivalent
      • -
    • See the Canada.ca Content Style Guide for more information on how to write content for this pattern
      • -
    -
    -
    -

    Link requirements

    -
      -
    • Link text must make sense within the context of the page -
        -
      • It does not need to exactly match the destination page title
        • -
      • It does not need to be unique across Canada.ca
        • -
      • It must be descriptive, unique within the page, and clearly distinguishable from the other links on the page
        • -
      • Don’t end linked text with punctuation (for example, “How do you apply for funding?”)
        • -
      • The linked text must speak to a person (for example, “Apply for funding”)
        • -
      -
      • -
    • The optimal character limit for links is 45 characters (with spaces) for both official languages, but can extend to 75 characters (with spaces)
      • -
    • Use only standard link styles as defined in the Web Experience Toolkit (WET)
      • -
    -
    -
    -

    Link descriptions

    -
      -
    • The link description complements the link it accompanies to provide greater detail and clarity about the scope of the link itself -
        -
      • Recommended style is to list keywords or keyword phrases separated by commas; full sentences are not required
        • -
      • Don’t use introductory phrases such as “Includes…”, “Information on…” or “Learn more about…”
        • -
      • Don’t include links
        • -
      • Don’t include promotional messaging
        • -
      -
      • -
    • The character limit for link descriptions is 120 characters (with spaces) in both official languages
      • -
    • Drop-down menus are permitted in place of a link description in specific circumstances: -
        -
      • When used to provide access to a large number of items at the same level (for example, lists of countries or species)
        • -
      • When the destination page consists primarily of a list of links, and so can be completely replaced by the drop-down menu
        • -
      -
      • -
    • Use only standard presentation styles as defined in WET
      • -
    -
    -
    -

    Grouping sets of links with accompanying descriptions

    -

    The following styles may be used:

    -
      -
    • Demand-based -
        -
      • Prioritization is based on demand (for example, based on web metrics), with higher demand links appearing ahead of lower demand ones
        • -
      -
      • -
    • Sequential -
        -
      • Use sequential, numbered doormats when links must be followed in a step-by-step order (for example, confirming eligibility, registering and then charging for GST/HST)
        • -
      • Use to allow people to skip over optional/non-applicable steps or steps they have previously completed
        • -
      -
      • -
    • Subheadings -
        -
      • Use to group links and descriptions that are very similar, in cases where it wouldn’t make sense to move the group into a sub-topic page
        • -
      • Use to avoid information overload; ideally no more than 9 links with descriptions per subheading
        • -
      -
      • -
    • Combinations of the above, as appropriate; however, limit application to avoid overly complex sets of links and descriptions
      • -
    -

    In all cases, priority sequencing is as follows:

    -
      -
    • In a single column layout, the priority sequencing is top to bottom
      • -
    • In using across multiple columns, the priority sequencing is from left to right, then top to bottom
      • -
    -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Examples

    -
    -
    -
    -
    -
    -
    Doormat links in 2 columns pattern
    - Screenshot illustrating a set of doormat links in 2 columns on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    Doormat links in single column pattern
    - Screenshot illustrating a set of doormat links in a single column on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    -
    -
    Sequential doormat links in single column pattern
    - Screenshot showing a set of sequential doormat links in a single column. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    Doormat links in 2 columns grouped with headings pattern
    - Screenshot showing a set of doormat links in 2 columns, grouped with headings on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_share-page.html b/common-design-patterns/_share-page.html deleted file mode 100644 index b23a35d8e3..0000000000 --- a/common-design-patterns/_share-page.html +++ /dev/null @@ -1,380 +0,0 @@ ---- ---- - - - - - - - Share this page - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    -

    Share this page: Canada.ca design - pattern

    - - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat -

    -
    - -
    -
    -
    -

    The Share this page component is intended to allow people to share the content of the page to other users.

    -
    -

    Objectives

    -

    The Share this page component allows people to share the current web page via a selection of sharing platforms - and delivery services.

    -
    -
    -

    When to use Share this page

    -

    The Share this page pattern is optional on all pages. For more information, go to the Mandatory - elements of the design system.

    -
    -
    -

    How to implement Share this page

    -
      -
    • The component is presented as a button using WET style for - secondary actions
      • -
    • The label reads: “Share this page”, preceded by the sharing icon in the defined icon set included in WET
      • -
    • Placement: positioned below the main content area, right-alignwed.
      • -
    • When clicked, a dismissible overlay is triggered: -
        -
      • the overlay is labeled “Share this page” and includes buttons for a selection of sharing platforms and - delivery services, and the message “No endorsement of any products or services is expressed or implied.” -
        • -
      • on large screens, the buttons appear in 2 columns
        • -
      • on small screens, a person is presented with a single column of buttons
        • -
      -
      • -
    • Within the overlay, the button for each sharing platform or delivery service uses WET style for secondary actions
      • -
    • The label for each button within the overlay includes the name of the sharing platform or delivery service, - preceded by a relevant logo or icon
      • -
    • When clicked, each button within the overlay triggers a link to that platform or service, including - appropriate parameters, such as the URL or title of the page being shared -
        -
      • these links open in new browser tabs or windows where feasible
        • -
      -
      • - -
    -
    -
    Share this page overlay (Large screen version)
    - Diagram of share this page overlay for large screens. Text version below: -
    - Text version -

    This large screen example of “share this page” contains links to various social media platforms.

    -
    -
    -
    -
    Share this page overlay (Small screen version)
    - Diagram of share this page overlay for small screens. Text version below: -
    - Text version -

    This small screen example of “share this page” contains links to various social media platforms that are - arranged in one column.

    -
    -
    -
    -
    - - - -
    - -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_site-footer-content.html b/common-design-patterns/_site-footer-content.html deleted file mode 100644 index d1406008b4..0000000000 --- a/common-design-patterns/_site-footer-content.html +++ /dev/null @@ -1,310 +0,0 @@ ---- ---- - - - - - - -Content footer - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    - - - -
    -

    Content footer: Canada.ca design - pattern

    -
    -
    -

    From: Treasury Board of Canada Secretariat

    -
    -
    - -
    -
    -
    -

    Mandatory

    -

    The content footer appears at the bottom of the content area for each web page.

    -

    Use the content footer in conjunction with the global footer pattern.

    -

    See Global footer for guidance on how to apply the contextual footer band, main footer band and sub-footer band.

    -

    How to implement the content footer

    -

    The content footer displays up to 3 components:

    - -

    Insert the content footer within the content area block so that its margins are aligned with the main page content.

    -

    Page feedback tool pilot

    -

    The Page feedback tool is a pilot product. Add the pattern to the content footer instead of the “Report a problem” - pattern to actively collect user feedback.

    -

    Page feedback tool

    -
    -

    Example

    -
    -
    -
    Content footer
    - Diagram of content footer. -
    - Text version -

    The content footer contains the following components: Report a problem, Share this page and Date modified.

    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_social-media-channels.html b/common-design-patterns/_social-media-channels.html deleted file mode 100644 index 00a0774a8b..0000000000 --- a/common-design-patterns/_social-media-channels.html +++ /dev/null @@ -1,313 +0,0 @@ ---- ---- - - - - - - -Social media channels - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    - - - -
    -

    Social media channels - Canada.ca design pattern

    -
    -
    -

    From: Treasury Board of Canada Secretariat

    -
    -

    The social media channels block (“follow box”) is an in-page component that allows people to follow official Government of Canada social media accounts from various social media platforms.

    -
    -

    When to use this pattern

    -
      -
    • Use the follow box on pages where official GC social media accounts are relevant to the current context
      • -
    • Do not use this component when a person’s flow must not be interrupted, as in a transactional process
      • -
    • Do not duplicate content from other promotional components on the page
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • The social media channels follow box is made up of the heading “Follow” and icons linking to official GC social media accounts or RSS feeds that are relevant to the page
      • -
    • Accounts referred to in the follow box must be fully compliant with the Directive on the Management of Communications
      • -
    • Display a maximum of 7 icons aligned in a horizontal row, using the standard icon set available in the Canada.ca WET theme
      • -
    • Use only one icon per social media platform; if there is more than one account from a single platform -
        -
      • make them available via a clickable drop-down menu
        • -
      • populate the drop-down menu with up to 8 text links, using the names of the accounts as labels
        • -
      • if more than 8 links are required, include a “view all” link as the final item in the list; this link must point to the relevant section of the Canada.ca social media gallery, where all relevant accounts will be listed
        • -
      -
      • -
    • Position the follow box so that it does not interfere with the primary content of the page
      • -
    • Emphasize the box shape of this component by using a background colour that is darker than the surrounding page area’s background colour
      • -
    • Use the defined presentation classes included in the Canada.ca WET theme
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Social media channels block (follow box) pattern
    - Screenshot illustrating the social media channels block (follow box) pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_social-media-feeds.html b/common-design-patterns/_social-media-feeds.html deleted file mode 100644 index 4257d31587..0000000000 --- a/common-design-patterns/_social-media-feeds.html +++ /dev/null @@ -1,310 +0,0 @@ ---- ---- - - - - - - -Social media feeds - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    Government of Canada / Gouvernement du Canada
    -
    -

    Search

    - -
    -
    -
    - - -
    - - - -
    -

    Social media feeds - Canada.ca design pattern

    -
    -
    -

    From: Treasury Board of Canada Secretariat

    -
    -

    The social media feeds widget is an in-page component that allows the latest posts from official Government of Canada social media accounts to be embedded on Canada.ca pages

    -
    -

    When to use this pattern

    -
      -
    • Use the social media feeds widget on pages where official GC social media accounts are relevant to the current context
      • -
    • Do not use this component when a person’s flow must not be interrupted, as in a transactional process
      • -
    • Do not duplicate content from other promotional components on the page
      • -
    -
    -
    -

    How to use this pattern

    -
      -
    • The social media feeds widget consists of a heading with panels for up to 3 social media accounts, each featuring a feed of recent posts
      • -
    • The default heading for this widget is “Stay connected”
      • -
    • Each feed panel includes -
        -
      • a heading that indicates which social media platform the account’s feed is drawn from, for example Facebook or YouTube
        • -
      • a feed of the recent posts from that account, arranged in reverse chronological order
        • -
      • the 3 most recent posts as the default setting, with a link to the account from which the feed is drawn to allow people to see more
        • -
      -
      • -
    • Use the defined presentation classes included in the Canada.ca WET theme
      • -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    Social media feeds widget pattern
    - Screenshot illustrating the social media feeds widget pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    You will not receive a reply. Telephone numbers and email addresses will be - removed.
    - Maximum 300 characters

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    -{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_subway-navigation-new.html b/common-design-patterns/_subway-navigation-new.html deleted file mode 100644 index 3ead5b9ad0..0000000000 --- a/common-design-patterns/_subway-navigation-new.html +++ /dev/null @@ -1,582 +0,0 @@ ---- ---- - - - - - - Subway navigation - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    - - Subway navigation: - Canada.ca design system - -

    -
    -
    -
      -
    • Beta
      • -
    • Last updated: 2020-12-17
      • -
    -
    -
    -

    Break up a service or content into sections that each focus on a step or specific answer people need to do before moving to the next step or section.

    -
    -

    [Optional image or coded example of the pattern so it can be visually identified quickly]

    -
    -
    -

    On this page

    - -
    -
    -

    When to use

    -

    Use to group related task pages together and provide navigation between these pages.

    -

    Keep the number of pages tied together to a reasonable numner (maximum 6).

    -
    -
    -

    What to avoid

    -

    Don't use numbers when you use this pattern for sequenced steps. Testing has shown that Canadians are less likely to get to the section they need if the elements are numbered.

    -

    Sub-steps haven't been tested properly yet - avoid using them.

    -
    -
    -

    How to implement

    -

    This pattern is still in beta, and the code is still under review. Use it sparingly, as it may still be subject to changes.

    -

    You will need to use provisional CSS to use this design pattern.

    -
      -
    1. Index page
      2. -
    2. Step page
      3. -
    -

    1. Index page

    -

    When to use: use as the landing page for a set of related pages that use the subway naviation.

    -
    -

    [Coded example of variant 1]

    -
    -
    - Code - 
    <p>[Coded example of variant 1]</p>
    -
    -

    2. Step page

    -

    When to use: Use on each page tied by the subway navigation.

    -
    -
    - -

    [Service/step name 3]

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit.

    -

    Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis.

    -
    -
    - -
    - -
    - Code -
    - HTML - 
    <nav class="provisional gc-subway">
-		<h1>[Service name]</h1>
-		<ul class="gc-subway-steps">
-			<li><a href="#">[Step / section page name 1]<span class="wb-inv">: [Service name]</span></a></li>
-			<li><a href="#">[Step / section page name 1]<span class="wb-inv">: [Service name]</span></a></li>
-			<li><a href="#">[Step / section page name 2]<span class="wb-inv">: [Service name]</span></a></li>
-			<li class="active"><a aria-current="page">[Step / section page name 3]<span class="wb-inv">: [Service name]</span></a></li>
-			<li><a href="#">[Step / section page name 4]<span class="wb-inv">: [Service name]</span></a></li>
-			<li><a href="#">[Step / section page name 5]<span class="wb-inv">: [Service name]</span></a></li>
-		</ul>
-		</nav>
-		<h1 property="name" id="wb-cont" class="provisional gc-thickline">[Step / section page name 3]</h1>
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit.</p>
-		<p>Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis.</p>
    -
    -
    - CSS - 
    .provisional.gc-subway {
-		  border-radius: 0px 6px 6px 0px;
-		  border-right: 4px solid #26374a;
-		  border-top: 4px solid #26374a;
-		  margin-top: 38px;
-		}
-		.provisional.gc-subway ul {
-		  clear: both;
-		  list-style: none;
-		  padding-left: .57em;
-		  padding-top: 10px;
-		  position: relative;
-		}
-		.provisional.gc-subway ul li {
-		  border-left: 4px solid #26374a;
-		  padding: 0px 20px 30px 1em;
-		}
-		.provisional.gc-subway ul li::first-line {
-		  line-height: 1 !important;
-		}
-		.provisional.gc-subway ul li :first-child::before {
-		  background-color: #fff;
-		  border: 3px solid #26374a;
-		  border-radius: 50%;
-		  content: "";
-		  height: 1.2em;
-		  left: .05em;
-		  position: absolute;
-		  -webkit-transition: width .2s, height .2s, left .2s, margin-top .2s;
-		  transition: width .2s, height .2s, left .2s, margin-top .2s;
-		  width: 1.2em;
-		}
-		.provisional.gc-subway ul li.active > :first-child::before {
-		  background-color: #26374a;
-		}
-		.provisional.gc-subway ul li a[href]:hover::before,
-		.provisional.gc-subway ul li a[href]:focus::before {
-		  height: 1.4em;
-		  left: -.05em;
-		  margin-top: -.1em;
-		  width: 1.4em;
-		}
-		.provisional.gc-subway ul li:last-child {
-		  border-bottom: 4px solid #26374a;
-		  border-bottom-left-radius: 6px;
-		  border-left: 4px solid #26374a;
-		}
-		.provisional.gc-subway ul li ul {
-		  margin-top: 20px;
-		  padding-left: .55em;
-		}
-		.provisional.gc-subway ul li ul li:last-child {
-		  border-bottom-width: 0px;
-		  padding-bottom: 0px;
-		}
-		.provisional.gc-subway ul li ul.noline li {
-		  -o-border-image: none;
-		  border-image: none;
-		  border-left: 4px solid transparent;
-		}
-		.provisional.gc-subway h1 {
-		  float: left;
-		}
-		.provisional.gc-subway h1,
-		.provisional.gc-subway-section .gc-subway-h1 {
-		  background-color: #fff;
-		  border-bottom-width: 0px;
-		  color: #555;
-		  font-size: 1.3em;
-		  margin-right: 20px;
-		  margin-top: -19px;
-		  padding: 0px 20px 10px 0px;
-		}
-		@media screen and (min-width: 992px) {
-		  .provisional.gc-subway {
-			border-right: 0;
-			border-top: 0;
-			display: none;
-			margin-top: 25px;
-			padding-left: 15px;
-		  }
-		  .provisional.gc-subway.no-blink {
-			display: block;
-		  }
-		  .provisional.gc-subway .gc-subway-menu-nav {
-			float: right;
-			width: 33.33%;
-		  }
-		  .provisional.gc-subway ul li:last-child {
-			border-bottom: 0;
-			border-left: 4px solid transparent;
-		  }
-		  .provisional.gc-subway-section {
-			padding-right: 15px;
-			width: 66.66%;
-		  }
-		  .provisional.gc-subway-section .gc-subway-h1,
-		  .provisional.gc-subway-section h1 {
-			margin-top: 0;
-		  }
-		  .provisional.gc-subway-section .gc-subway-h1 {
-			font-family: Lato, sans-serif;
-			font-weight: inherit;
-			margin-bottom: 0;
-			margin-right: 0;
-			padding-bottom: 0 !important;
-			padding-left: 0;
-		  }
-		  .wb-disable .provisional.gc-subway {
-			display: block;
-		  }
-		}
    -
    -
    - JS - 
    ( function( $, window, wb ) {
-		"use strict";
-
-		var $document = wb.doc,
-		  componentName = "gc-subway",
-		  selector = ".provisional." + componentName,
-		  initEvent = "wb-init ." + componentName,
-		  views = {
-			xxs: "xxsmallview",
-			xs: "xsmallview",
-			sm: "smallview",
-			md: "mediumview",
-			lg: "largeview",
-			xl: "xlargeview"
-		  },
-		  mainClass = "gc-subway-section",
-		  toggleClass = "wb-inv",
-		  desktopInited = false,
-		  $html = wb.html,
-		  $h1, $h2, $h1Copy, $menu, $main,
-
-		  /**
-		   * @method init
-		   * @param {jQuery Event} event Event that triggered the function call
-		   */
-		  init = function( event ) {
-
-			// Start initialization
-			// returns DOM object = proceed with init
-			// returns undefined = do not proceed with init (e.g., already initialized)
-			var elm = wb.init( event, componentName, selector ),
-			  $elm;
-
-			if ( elm ) {
-			  $elm = $( elm );
-
-			  // trigger resizing
-			  onResize( $elm );
-
-			  // Identify that initialization has completed
-			  wb.ready( $elm, componentName );
-			}
-		  },
-
-		  /**
-		   * Mutate DOM depending on breakpoint
-		   * @method onResize
-		   * @param {jQuery DOM element | jQuery Event} $elm Element targeted by this plugin, which is the nav | Resizing event
-		   */
-		  onResize = function( $elm ) {
-
-			if ( !$elm.length ) {
-			  $elm = $( selector );
-			}
-
-			// Desktop view, setup and mutate H1s
-			if ( $html.hasClass( views.md ) || $html.hasClass( views.lg ) ||
-			  $html.hasClass( views.xl ) ) {
-
-			  // Initiate desktop mode only once
-			  if ( !desktopInited ) {
-				initDesktop( $elm );
-			  }
-			  $h1.addClass( toggleClass );
-			  $h1Copy.prependTo( $main );
-			  $h2.prependTo( $menu );
-			} else if ( ( $html.hasClass( views.sm ) || $html.hasClass( views.xs ) || $html.hasClass( views.xxs ) ) && desktopInited ) {
-
-			  // Mobile view, mutate back to mobile first if needed
-			  $h1.removeClass( toggleClass );
-			  $h1Copy.remove();
-			  $( "h2:first-child", $menu ).remove();
-			}
-		  },
-
-		  /**
-		   * Initiate setup for desktop mode
-		   * @method initDesktop
-		   * @param {jQuery DOM element} $elm Element targeted by this plugin, which is the nav
-		   */
-		  initDesktop = function( $elm ) {
-			$h1 = $( "h1", $elm );
-			$h2 = $( "" );
-			$h1Copy = $( "" );
-			$( "ul", $elm ).first().wrap( "
    " );
-			$menu = $( ".gc-subway-menu-nav", $elm );
-			$elm.nextUntil( ".pagedetails, .gc-subway-section-end" ).wrapAll( "
    " );
-			$main = $elm.next();
-
-			// Prevent on-load blinking on desktop
-			$elm.addClass( "no-blink" );
-
-			desktopInited = true;
-		  };
-
-		// Listen for resizing and mutate the DOM accordingly
-		$document.on( wb.resizeEvents, onResize );
-
-		// Bind the init event of the plugin
-		$document.on( "timerpoke.wb " + initEvent, selector + ".provisional", init );
-
-		// Add the timer poke to initialize the plugin
-		wb.add( selector );
-
-		} )( jQuery, window, wb );
    -
    -
    -
    - - -
    -

    Research and blog posts

    -

    This pattern was developed with CRA during an optimization project on the Canada Child Benefit. It has shown to work well to show the relationship between related pages and to work well on mobile devices.

    -

    Latest changes

    -
    -
    -
    -
    Launched the subway navigation pattern in Beta
    -
    -
    -
    -

    Discussion

    -

    Discuss the pattern in github issues

    -
    - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/common-design-patterns/_subway-navigation.mdx b/common-design-patterns/_subway-navigation.mdx deleted file mode 100644 index 80e092d835..0000000000 --- a/common-design-patterns/_subway-navigation.mdx +++ /dev/null @@ -1,664 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/configurations-conception-communes/navigation-metro.html -date: null -dateModified: '2023-07-12' -description: null -title: Subway navigation ---- - - -
    -
    -
      -
    • - - Beta - -
      • -
    • - Last updated: 2023-07-12 -
      • -
    -
    -
    - -

    - Break up long and complex content into pages that each focus on a step or specific answer people need before moving to the next step or section. Ideal for presenting services and processes. -

    - -
    -

    - On this page -

    - -
    - -
    -

    - When to use -

    -

    - Use to group related task pages together and provide navigation between these pages. -

    -

    - Keep the number of pages tied together to a reasonable number (ideally 6 or less, maximum 8). -

    -
    - -
    -

    - What to avoid -

    -

    - Don't use numbers when you use this pattern for sequenced steps. Testing has shown that Canadians are less likely to get to the section they need if the elements are numbered. -

    -
    - -
    -

    - How to implement -

    -

    - This pattern is still in beta, and the code is still under review. Use it sparingly, as it may still be subject to change. -

    -

    - You will need to use provisional CSS to use this design pattern. -

    -
      -
    1. - - Index page - -
      2. -
    2. - - Step page - -
      3. -
    -

    - 1. Index page -

    -

    - - When to use: - - use as the landing page for a set of related pages that use the subway navigation. -

    - -
    - - Code - -
    - - HTML - - 
    <h1 property="name" id="wb-cont" class="gc-thickline">[Name of service]</h1>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut [...].</p>
-<nav class="provisional gc-subway">
-	<h2>Sections</h2>
-	<dl>
-		<dt>
-			<a href="gc-subway-en.html">[Step / section page name 1]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="page2-en.html">[Step / section page name 2]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="#">[Step / section page name 3]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="#">[Step / section page name 4]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="#">[Step / section page name 5]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="#">[Step / section page name 6]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-	</dl>
-</nav>
    -
    -
    - - CSS - - 
    .provisional.gc-subway {
-	border-radius: 0px 6px 6px 0px;
-	border-right: 4px solid #26374a;
-	border-top: 4px solid #26374a;
-	margin-top: 38px;
-}
-.provisional.gc-subway ul {
-	clear: both;
-	list-style: none;
-	padding-left: .57em;
-	padding-top: 10px;
-	position: relative;
-}
-.provisional.gc-subway ul li {
-	border-left: 4px solid #26374a;
-	padding: 0px 20px 30px 1em;
-}
-.provisional.gc-subway ul li::first-line {
-	line-height: 1 !important;
-}
-.provisional.gc-subway ul li :first-child::before {
-	background-color: #fff;
-	border: 3px solid #26374a;
-	border-radius: 50%;
-	content: "";
-	height: 1.2em;
-	left: .05em;
-	position: absolute;
-	-webkit-transition: width .2s, height .2s, left .2s, margin-top .2s;
-	transition: width .2s, height .2s, left .2s, margin-top .2s;
-	width: 1.2em;
-}
-.provisional.gc-subway ul li.active > :first-child::before {
-	background-color: #26374a;
-}
-.provisional.gc-subway ul li a[href]:hover::before,
-.provisional.gc-subway ul li a[href]:focus::before {
-	height: 1.4em;
-	left: -.05em;
-	margin-top: -.1em;
-	width: 1.4em;
-}
-.provisional.gc-subway ul li:last-child {
-	border-bottom: 4px solid #26374a;
-	border-bottom-left-radius: 6px;
-	border-left: 4px solid #26374a;
-}
-.provisional.gc-subway ul li ul {
-	margin-top: 20px;
-	padding-left: .55em;
-}
-.provisional.gc-subway ul li ul li:last-child {
-	border-bottom-width: 0px;
-	padding-bottom: 0px;
-}
-.provisional.gc-subway ul li ul.noline li {
-	-o-border-image: none;
-	border-image: none;
-	border-left: 4px solid transparent;
-}
-.provisional.gc-subway h1 {
-	float: left;
-}
-.provisional.gc-subway h1,
-.provisional.gc-subway-section .gc-subway-h1 {
-	background-color: #fff;
-	border-bottom-width: 0px;
-	color: #555;
-	font-size: 1.3em;
-	margin-right: 20px;
-	margin-top: -19px;
-	padding: 0px 20px 10px 0px;
-}
-@media screen and (min-width: 992px) {
-	.provisional.gc-subway {
-		border-right: 0;
-		border-top: 0;
-		display: none;
-		margin-top: 25px;
-		padding-left: 15px;
-	}
-	.provisional.gc-subway.no-blink {
-		display: block;
-	}
-	.provisional.gc-subway .gc-subway-menu-nav {
-		float: right;
-		width: 33.33%;
-	}
-	.provisional.gc-subway ul li:last-child {
-		border-bottom: 0;
-		border-left: 4px solid transparent;
-	}
-	.provisional.gc-subway-section {
-		padding-right: 15px;
-		width: 66.66%;
-	}
-	.provisional.gc-subway-section .gc-subway-h1,
-	.provisional.gc-subway-section h1 {
-		margin-top: 0;
-	}
-	.provisional.gc-subway-section .gc-subway-h1 {
-		font-family: Lato, sans-serif;
-		font-weight: inherit;
-		margin-bottom: 0;
-		margin-right: 0;
-		padding-bottom: 0 !important;
-		padding-left: 0;
-	}
-	.wb-disable .provisional.gc-subway {
-		display: block;
-	}
-}
    -
    -
    -

    - 2. Step page -

    -

    - - When to use: - - Use on each page tied by the subway navigation. -

    - -
    -
    - - Code - -
    - - HTML - - 
    <nav class="provisional gc-subway">
-	<h1 id="gc-document-nav">[Service name]</h1>
-	<ul>
-		<li>
-			<a href="#" class="active" aria-current="page">[Page 1]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 2]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 2]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 3]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 3]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 4]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 4]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 5]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 5]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 6]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 6]</a>
-		</li>
-	</ul>
-</nav>
-
-<h1 property="name" id="wb-cont" class="gc-thickline">[Page 1]</h1>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit.</p>
-<p>Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis. Aliquam erat volutpat. Ut maximus euismod auctor. Ut ac gravida nunc. Nam non efficitur neque. Pellentesque tincidunt, libero luctus condimentum laoreet, turpis magna maximus nibh, at cursus lectus tellus in augue. Aenean scelerisque eros dui, at tincidunt eros tristique nec.</p>
-<nav class="mrgn-bttm-lg mrgn-tp-lg">
-	<h3 class="wb-inv">Document navigation</h3>
-	<ul class="pager">
-		<li class="next"><a href="#wb-cont" rel="next"><span class="wb-inv">Next: </span>[Page 2]</a></li>
-	</ul>
-</nav>
    -
    -
    - - CSS - - 
    .provisional.gc-subway {
-		border-radius: 0px 6px 6px 0px;
-		border-right: 4px solid #26374a;
-		border-top: 4px solid #26374a;
-		margin-top: 38px;
-	}
-	.provisional.gc-subway ul {
-		clear: both;
-		list-style: none;
-		padding-left: .57em;
-		padding-top: 10px;
-		position: relative;
-	}
-	.provisional.gc-subway ul li {
-		border-left: 4px solid #26374a;
-		padding: 0px 20px 30px 1em;
-	}
-	.provisional.gc-subway ul li::first-line {
-		line-height: 1 !important;
-	}
-	.provisional.gc-subway ul li :first-child::before {
-		background-color: #fff;
-		border: 3px solid #26374a;
-		border-radius: 50%;
-		content: "";
-		height: 1.2em;
-		left: .05em;
-		position: absolute;
-		-webkit-transition: width .2s, height .2s, left .2s, margin-top .2s;
-		transition: width .2s, height .2s, left .2s, margin-top .2s;
-		width: 1.2em;
-	}
-	.provisional.gc-subway ul li.active > :first-child::before {
-		background-color: #26374a;
-	}
-	.provisional.gc-subway ul li a[href]:hover::before,
-	.provisional.gc-subway ul li a[href]:focus::before {
-		height: 1.4em;
-		left: -.05em;
-		margin-top: -.1em;
-		width: 1.4em;
-	}
-	.provisional.gc-subway ul li:last-child {
-		border-bottom: 4px solid #26374a;
-		border-bottom-left-radius: 6px;
-		border-left: 4px solid #26374a;
-	}
-	.provisional.gc-subway ul li ul {
-		margin-top: 20px;
-		padding-left: .55em;
-	}
-	.provisional.gc-subway ul li ul li:last-child {
-		border-bottom-width: 0px;
-		padding-bottom: 0px;
-	}
-	.provisional.gc-subway ul li ul.noline li {
-		-o-border-image: none;
-		border-image: none;
-		border-left: 4px solid transparent;
-	}
-	.provisional.gc-subway h1 {
-		float: left;
-	}
-	.provisional.gc-subway h1,
-	.provisional.gc-subway-section .gc-subway-h1 {
-		background-color: #fff;
-		border-bottom-width: 0px;
-		color: #555;
-		font-size: 1.3em;
-		margin-right: 20px;
-		margin-top: -19px;
-		padding: 0px 20px 10px 0px;
-	}
-	@media screen and (min-width: 992px) {
-		.provisional.gc-subway {
-		border-right: 0;
-		border-top: 0;
-		display: none;
-		margin-top: 25px;
-		padding-left: 15px;
-		}
-		.provisional.gc-subway.no-blink {
-		display: block;
-		}
-		.provisional.gc-subway .gc-subway-menu-nav {
-		float: right;
-		width: 33.33%;
-		}
-		.provisional.gc-subway ul li:last-child {
-		border-bottom: 0;
-		border-left: 4px solid transparent;
-		}
-		.provisional.gc-subway-section {
-		padding-right: 15px;
-		width: 66.66%;
-		}
-		.provisional.gc-subway-section .gc-subway-h1,
-		.provisional.gc-subway-section h1 {
-		margin-top: 0;
-		}
-		.provisional.gc-subway-section .gc-subway-h1 {
-		font-family: Lato, sans-serif;
-		font-weight: inherit;
-		margin-bottom: 0;
-		margin-right: 0;
-		padding-bottom: 0 !important;
-		padding-left: 0;
-		}
-		.wb-disable .provisional.gc-subway {
-		display: block;
-		}
-	}
    -
    -
    - - JS - - 
    ( function( $, window, wb ) {
-"use strict";
-
-var $document = wb.doc,
-	componentName = "gc-subway",
-	selector = ".provisional." + componentName,
-	initEvent = "wb-init ." + componentName,
-	views = {
-		xxs: "xxsmallview",
-		xs: "xsmallview",
-		sm: "smallview",
-		md: "mediumview",
-		lg: "largeview",
-		xl: "xlargeview"
-	},
-	mainClass = "gc-subway-section",
-	toggleClass = "wb-inv",
-	desktopInited = false,
-	skipLink = false,
-	$html = wb.html,
-	$h1, $h2, $h1Copy, $menu, $main,
-
-	/**
-	 * @method init
-	 * @param {jQuery Event} event Event that triggered the function call
-	 */
-	init = function( event ) {
-
-		// Start initialization
-		// returns DOM object = proceed with init
-		// returns undefined = do not proceed with init (e.g., already initialized)
-		var elm = wb.init( event, componentName, selector ),
-			h1,
-			$elm;
-
-		if ( elm ) {
-			$elm = $( elm );
-			$h1 = $( "h1", $elm );
-			h1 = $h1.get( 0 );
-
-			// Ensure the element have an ID
-			if ( !h1.id ) {
-				h1.id = wb.getId();
-			}
-
-			// Add subway H1 to skip links
-			if ( !skipLink ) {
-				skipLink = wb.addSkipLink( wb.i18n( "skip-prefix" ) + " " + h1.textContent, { href: "#" + h1.id } );
-			}
-
-			// trigger resizing
-			onResize( $elm );
-
-			// Identify that initialization has completed
-			wb.ready( $elm, componentName );
-		}
-	},
-
-	/**
-	 * Mutate DOM depending on breakpoint
-	 * @method onResize
-	 * @param {jQuery DOM element | jQuery Event} $elm Element targetted by this plugin, which is the nav | Resizing event
-	 */
-	onResize = function( $elm ) {
-
-		if ( !$elm.length ) {
-			$elm = $( selector );
-		}
-
-		// Ensure the page contains at least two heading level 1
-		if ( $( "main h1" ).length < 2 ) {
-			$document.off( wb.resizeEvents, onResize );
-			$elm.addClass( "no-blink p-0" );
-			return;
-		}
-
-		// Desktop view, setup and mutate H1s
-		if ( $html.hasClass( views.md ) || $html.hasClass( views.lg ) ||
-			$html.hasClass( views.xl ) ) {
-
-			// Initiate desktop mode only once
-			if ( !desktopInited ) {
-				initDesktop( $elm );
-			}
-			$h1.addClass( toggleClass );
-			$h1Copy.prependTo( $main );
-			$h2.prependTo( $menu );
-		} else if ( ( $html.hasClass( views.sm ) || $html.hasClass( views.xs ) || $html.hasClass( views.xxs ) ) && desktopInited ) {
-
-			// Mobile view, mutate back to mobile first if needed
-			$h1.removeClass( toggleClass );
-			$h1Copy.remove();
-			$( "h2:first-child", $menu ).remove();
-		}
-	},
-
-	/**
-	 * Initate setup for desktop mode
-	 * @method initDesktop
-	 * @param {jQuery DOM element} $elm Element targetted by this plugin, which is the nav
-	 */
-	initDesktop = function( $elm ) {
-		$h2 = $( "<h2 class='h3 hidden-xs visible-md visible-lg mrgn-tp-0'>Sections</h2>" );
-		$h1Copy = $( "<div class='gc-subway-h1' aria-hidden='true'>" + $h1.text() + "</div>" );
-		$( "ul", $elm ).first().wrap( "<div class='gc-subway-menu-nav'></div>" );
-		$menu = $( ".gc-subway-menu-nav", $elm );
-		$elm.nextUntil( ".pagedetails, .gc-subway-section-end" ).wrapAll( "<section class='provisional " + mainClass + "'>" );
-		$main = $elm.next();
-
-		// Prevent on-load blinking on desktop
-		$elm.addClass( "no-blink" );
-
-		desktopInited = true;
-	};
-
-// Listen for resizing and mutate the DOM accordingly
-$document.on( wb.resizeEvents, onResize );
-
-// Bind the init event of the plugin
-$document.on( "timerpoke.wb " + initEvent, selector + ".provisional", init );
-
-// Add the timer poke to initialize the plugin
-wb.add( selector );
-
-} )( jQuery, window, wb );
    -
    -
    -
    -
    - -

    - Research and blog posts -

    - -

    - This pattern was developed with CRA during an optimization project on the Canada Child Benefit. It works well on mobile devices and is an effective way to show the relationship between related pages. -

    - -

    - Latest changes -

    - -
    -
    -
    - -
    -
    - Updated the Subway pattern to remove 'avoid sub-steps'. This reflects that there may be instances where more complex processes would benefit from the use of sub-steps. -
    -
    - -
    -
    - Clarified that index page is required -
    -
    - -
    -
    - Changed 'sections' to 'pages' in introduction -
    -
    - -
    -
    - Launched the subway navigation pattern in Beta -
    -
    -
    - -
    -

    - Discussion -

    -

    - - Discuss the pattern in github issues - -

    -
    - - - - - diff --git a/common-design-patterns/_tabbed-interface.html b/common-design-patterns/_tabbed-interface.html deleted file mode 100644 index 81a6dfef90..0000000000 --- a/common-design-patterns/_tabbed-interface.html +++ /dev/null @@ -1,338 +0,0 @@ ---- ---- - - - - - - - Tabbed interface - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    - - -

    Tabbed interface - Canada.ca design pattern

    - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - - -
    -

    The tabbed interface pattern separates related content into different panes that are viewable one at a time when the respective tab is clicked.

    -
    -

    Objective

    -

    Use the tabbed interface pattern to group and present different aspects of content that are closely related, such as:

    -
      -
    • Geographic places, where the tabs can be used to present content relating to a place’s location, demographics, economy, etc.
      • -
    • Product catalogues, where the tabs can be used to present consistent facets of each product in the catalogue, such as specifications, features, etc.
      • -
    -

    Do not use the tabbed interface pattern when:

    -
      -
    • content must be presented in a specific sequential order (instead, use a step-by-step pattern)
      • -
    • content needs to be compared and contrasted, which would lead to repeated switching between tabs (instead, use tables or other patterns that allow all content to be presented at once)
      • -
    • content is lengthy or detailed, because of space limitations in the tabbed interface
      • -
    • content presentation includes only 2 tabs (for greater efficiency, use subheadings)
      • -
    -
    -
    -

    How and when to use a tabbed interface

    -
      -
    • Use defined presentation classes for the tabbed interface included in WET
      • -
    • Ensure that tab headers are clear and concise; avoid lengthy labels
      • -
    • When repeating the tabbed interface across a set of related pages (for example, on country pages), always ensure the tab headers are presented consistently
      • -
    • Make the default active tab first on page load; but another tab may be used as the active tab on page load if required
      • -
    -
    -
    -
    -
    -
    Tabbed interface pattern
    - Image of tabbed interface pattern. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    -
    -
    -
    - - - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_tables.html b/common-design-patterns/_tables.html deleted file mode 100644 index f19f03549b..0000000000 --- a/common-design-patterns/_tables.html +++ /dev/null @@ -1,460 +0,0 @@ ---- ---- - - - - - - Data tables - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Tables: Canada.ca design - system -

    -
    -
    -
      -
    • Last updated: 2021-05-21
      • -
    -
    -
    -

    Data tables allow you to communicate data efficiently using rows and columns.

    -
    -

    On this page

    - -
    -
    -

    When to use

    -
      -
    • Use to present data visually
      • -
    • Use to organize related information, such as contact numbers and details
      • -
    • Use - tables to organize data (Canada.ca Content Style Guide) - -
      • -
    -
    -
    -

    What to avoid

    - -
    -
    -

    How to implement

    -

    You can use either the beta or the stable version of this pattern. The beta tables use provisional CSS to make the tables responsive on small screens.

    -

    The beta version will eventually replace the stable version.

    -
    - Beta (responsive) data tables -

    Beta responsive tables are:

    -
      -
    • supported only for simple WET tables that don't have merged rows or columns
      • -
    • not supported by IE 11
      • -
    -

    Responsive tables create cards in mobile and small tablet view.

    -

    Because this is still in beta, make sure to test your tables in different views, especially if you add a lot of customization.

    -
    -
    -
    - - - -
    -
    -
    -
    - Code - 
    <table class="provisional gc-table table" id="myTable1">
- <caption>Population growth in Canadian cities</caption>
- <thead>
-  <tr>
-   <th>City</th>
-   <th>Population in 2007</th>
-   <th>Population in 2017</th>
-   <th>Percentage change</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td data-label="City">Toronto</td>
-   <td data-label="Population in 2007">5,418,207</td>
-   <td data-label="Population in 2017">6,346,088</td>
-   <td data-label="Percentage change">17.1%</td>
-  </tr>
-  <tr>
-   <td data-label="City">Montréal</td>
-   <td data-label="Population in 2007">3,714,846</td>
-   <td data-label="Population in 2017">4,138,254</td>
-   <td data-label="Percentage change">11.4%</td>
-  </tr>
-  <tr>
-   <td data-label="City">Vancouver</td>
-   <td data-label="Population in 2007">2,218,134</td>
-   <td data-label="Population in 2017">2,571,262</td>
-   <td data-label="Percentage change">15.9%</td>
-  </tr>
-  <tr>
-   <td data-label="City">Ottawa–Gatineau</td>
-   <td data-label="Population in 2007">1,188,073</td>
-   <td data-label="Population in 2017">1,377,016 </td>
-   <td data-label="Percentage change">15.9%</td>
-  </tr>
- </tbody>
-</table>
    -
    -

    Customizing tables

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    OptionDescriptionHow to use
    Table bordersAdds a border to help visually separate the table cells when they have a lot of contentAdd the class table-bordered to the <table>
    Condensed spacingNarrows the height of the cells within the tableAdd the class table-condensed to the <table>
    Striped rowsAlternates the colour of the table rows from white to greyAdd the class table-striped to the <table>
    Hover rowsCauses the background to darken when a mouse hovers over a rowAdd the class table-hover to the <table>
    Left alignedAlign the text in any cell on mobile cardsAdd the class text-left to the HTML item in the <td> you wish to align left, like a <span> or a <ul>
    Simple filterProvides simple filtering for the tableAdd the class wb-filter to the <table>
    Enable DataTables pluginProvides searching, sorting, filtering, pagination, etc. DataTables plugin documentationAdd the class wb-tables to the <table> and add the appropriate - data-wb-tables="" values -
    -
    -
    - Stable data tables -
      -
    • Use defined presentation classes for tables included in WET
      • -
    • Ensure each column treats only one data facet
      • -
    • - Where possible, use WET 4 tables to enable sorting and filtering controls -
        -
      • this is recommended when there are more than 12 rows
        • -
      -
      • -
    • Add optional pagination controls for any table with more than 12 rows
      • -
    • Never include tabular data as an image
      • -
    -

    Working example

    - -
    -
    -

    Example

    -
    -
    -
    -
    Data tables pattern
    - Screenshot illustrating the data table pattern on Canada.ca. Details on this graphic can be found in the surrounding text. -
    -
    -
    -
    -
    -

    Research and blog posts

    -

    We tested the use of responsive tables successfully during optimization projects with Health Canada for recalls and safety, with CRA for organizing contact information, and across various COVID-19 content. Responsive tables are easier for users on small screens to use without having to scroll sideways to see all the content.

    - -
    -
    -

    Latest changes

    -
    -
    -
    Updated to include the provisional code for responsive cards
    -
    -
    -
    -

    Discussion

    -

    Discuss the pattern in github - issues -

    -
    -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    - -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - - - - - - - - - diff --git a/common-design-patterns/_what-we-are-doing.html b/common-design-patterns/_what-we-are-doing.html deleted file mode 100644 index 07542f3071..0000000000 --- a/common-design-patterns/_what-we-are-doing.html +++ /dev/null @@ -1,393 +0,0 @@ ---- ---- - - - - - - - What we are doing - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    - - -

    What we are doing - Canada.ca design pattern

    - - - - -
    - - - -

    From: Treasury Board of Canada Secretariat

    - - -
    -

    What we are doing is a pattern that presents links to content that provides background or explanations of GC activities in support of creating or improving public policy.

    -
    -

    When to use this pattern

    -
      -
    • Use this pattern to provide relevant links to content that falls within the program and policy development user-need category
      • -
    • Use when the primary purpose of the page is to provide navigation choices
      • -
    -
    -
    -

    How to use this pattern

    -
    -

    Content requirements

    -
      -
    • Label the heading “What we are doing”
      • -
    • Organize links by content type; label subheadings only using content type names (see Content types for Canada.ca)
      • -
    • Provide links to only the following content types: -
        -
      • from the Research, statistics and data category: -
          -
        • assessments
          • -
        • datasets
          • -
        • research
          • -
        • statistics
          • -
        • surveys
          • -
        -
        • -
      • from the Consultations and engagement category: -
          -
        • consultations
          • -
        -
        • -
      • from the News, promotions and public awareness category: -
          -
        • backgrounders
          • -
        • news releases
          • -
        • speeches
          • -
        • statements
          • -
        -
        • -
      • from the Corporate information category: -
          -
        • program results
          • -
        -
        • -
      • from the Government-wide reporting category: -
          -
        • audits
          • -
        -
        • -
      -
      • -
    • With the permitted types above, only include links to content that provides a view into the work that the government is doing to evaluate, improve or change programs, policies and services; for example, only a news release that announces a new funding program (whereas a news release that announces funding being awarded under and existing program would not be included here)
      • -
    • Only include links that are relevant to the page on which this pattern appears
      • -
    • Never provide links to content types that fall under the following content type categories: -
        -
      • services, like forms or service initiation (instead, place links to this content under services and information or most requested)
        • -
      • contact us, such as emergency contact or find an office (instead, place links to this content under the appropriate contact page or pattern, or most requested, if a high-demand task)
        • -
      • policy and guidance (instead, place links to this content under services and information, most requested or corporate information)
        • -
      • treaties, laws and regulations (instead, place links to this content on the transparency page under corporate information, services and information or most requested, if a high-demand task)
        • -
      • navigation and administration like navigation pages, website terms and conditions
        • -
      -
      • -
    -
    -
    -

    Presentation requirements

    -
      -
    • When there are more than 3 subheadings, continue on a second row
      • -
    • A minimum of 2 links per subheading is required
      • -
    • A maximum of 4 links per subheading is allowed
      • -
    • When the number of links exceeds 4, provide a link to “All related [content type name]”
      • -
    -
    -
    -
    -

    Working example

    - -
    -
    -
    -

    Example

    -
    -
    -
    -
    What we are doing pattern
    - Screenshot illustrating the what we are doing pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
    -
    -
    -
    - - -
    - -
    - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/fragments/_basic.mdx b/common-design-patterns/fragments/_basic.mdx deleted file mode 100644 index 31b479fddc..0000000000 --- a/common-design-patterns/fragments/_basic.mdx +++ /dev/null @@ -1,8 +0,0 @@ ---- -altLangPage: null -breadcrumbs: [] -date: null -dateModified: null -description: null -title: null ---- diff --git a/common-design-patterns/fragments/_gc-subway-index.mdx b/common-design-patterns/fragments/_gc-subway-index.mdx deleted file mode 100644 index 36d3932c6b..0000000000 --- a/common-design-patterns/fragments/_gc-subway-index.mdx +++ /dev/null @@ -1,70 +0,0 @@ ---- -altLangPage: null -breadcrumbs: [] -date: null -dateModified: null -description: null -title: '[Name of service]' ---- - - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut [...]. -

    - - - diff --git a/common-design-patterns/fragments/_gc-subway-page.mdx b/common-design-patterns/fragments/_gc-subway-page.mdx deleted file mode 100644 index 1978f110c4..0000000000 --- a/common-design-patterns/fragments/_gc-subway-page.mdx +++ /dev/null @@ -1,112 +0,0 @@ ---- -altLangPage: null -breadcrumbs: [] -date: null -dateModified: null -description: null -title: '[Service name]' ---- - - - - - -

    - [Page 1] -

    - -

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit. -

    - -

    - Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis. Aliquam erat volutpat. Ut maximus euismod auctor. Ut ac gravida nunc. Nam non efficitur neque. Pellentesque tincidunt, libero luctus condimentum laoreet, turpis magna maximus nibh, at cursus lectus tellus in augue. Aenean scelerisque eros dui, at tincidunt eros tristique nec. -

    - - - diff --git a/community/_contribution-process.html b/community/_contribution-process.html deleted file mode 100644 index bb19146ec5..0000000000 --- a/community/_contribution-process.html +++ /dev/null @@ -1,221 +0,0 @@ ---- ---- - - - - - - Design system community - Canada.ca - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Contribution process

    - - - -
    - -

    The GC design system needs to be constantly improving. The goal of this framework is to foster continuous improvement of the guidance through experimentation. It creates a space for departments to experiment and innovate, and contribute their findings for the benefit of the whole GC web community.

    -

    On this page

    - -

    Identify: submit a proposal for improvement

    -

    While designing content for Canadians or while testing your current design, you may determine that either:

    -
      -
    • an existing component, pattern or template needs to be improved
      • -
    • a new component, pattern or template is needed to fill a gap in the design system
      • -
    -

    Consult the backlog and the experiments in progress

    -

    The first step is to find out if the improvement has already been identified. To do so, consult the backlog:

    - -

    If your suggestion is not already identified

    -

    If the pattern or template you identified for improvement is not in the backlog, you can submit a proposal by opening an issue in GitHub.

    -

    The proposal must include at least:

    -
      -
    • a description of the issue or gap identified
      • -
    • a hypothesis on how to fix it
      • -
    -

    Suggestions will be reviewed on a case-by-case basis by the community.

    -

    Design: from prototype to stable

    -

    Once an idea has been identified, anybody can work on tackling the issue.

    -

    Initial design and prototype

    -

    As soon as some form of prototype exists, it can be moved from the "to do" column to the the backlog to the "Design and prototyping" column in the backlog project board.

    -

    Update the corresponding issue in GitHub to share the prototype with the community.

    -

    Alpha

    -

    To go from early prototype to Alpha, the prototype needs to be accompanied with documentation that includes at the minimum:

    -
      -
    • a hypothesis of how to solve the issue
      • -
    • a mock-up or a coded prototype
      • -
    - -

    The Alpha phase is used to test the hypothesis, conduct research, deal with accessibility considerations, and code a working example for testing.

    -

    Beta

    -

    To go from Alpha to Beta, you need the following:

    -
      -
    • a fully working coded example
      • -
    • any CSS/JS overrides needed to implement in the latest WET theme for Canada.ca
      • -
    • assessment of accessibility
      • -
    • rationale for design choices - this can be results from research or a strong rationale
      • -
    • some guidance on "When to use" this component, pattern or template
      • -
    • documentation in both official languages
      • -
    -

    Use the Beta phase to scale up the experiment and fix any issues you encounter.

    -

    Beta updates are available through the main design system library, and departments can use them, as long as they consider it an experiment and are willing to report back on findings.

    - -

    Stable

    -

    To go from Beta to Stable, the following must be done:

    -
      -
    • integrated to core framework (WET)
      • -
    • completely valid code
      • -
    • no accessibility issues left unresolved
      • -
    • comments from the community have been resolved
      • -
    -

    Iterate: back to the drawing board

    -

    Once a new or updated pattern has moved to stable, it becomes the new baseline guidance.

    -

    But it doesn't mean that it's now perfect. If this improvement hasn’t solved all the issues, or if new issues arise, the component, pattern or template can be added back to the backlog and be the subject of another design round.

    - -
    - -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/community/_landing.html b/community/_landing.html deleted file mode 100644 index cd4f21c6ad..0000000000 --- a/community/_landing.html +++ /dev/null @@ -1,201 +0,0 @@ ---- ---- - - - - - - Design system community - Canada.ca - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Design system community

    - - - -
    - -

    Anyone can contribute to the Canada.ca design system.

    -

    On this page

    - -
    -

    Community principles

    -

    Follow these principles when you contribute to the Canada.ca design system. These principles are heavily inspired by the GOV.UK design system community principles.

    -

    1. Start with what already exists

    -

    Start with the current library. There already may be something you can use, or something you can improve upon.

    -

    The existing components, patterns and layouts are evidence-based, and they are a great starting point. Know what's there to identify gaps and possible improvements.

    -

    Look at the community backlog to see if your idea has already been identified.

    -

    Reach out to community to find what others already have done.

    -

    2. Share your learnings with the community

    -

    As you do research, share your findings with the whole community.

    -

    Try to contribute back design components and patterns that are scalable, reusable and can evolve over time.

    -

    If you find something that doesn't work (a gap, an error, a contradiction, a flawed design), speak up. Let the community know.

    -

    When working on a contribution, gather evidence, and share it.

    -

    3. Work in the open, and be open

    -

    To avoid duplication of effort, when you are working on something, let the community know.

    -

    Share your work as early as possible, so others can contribute too.

    -

    Be honest and humble: share what works, what doesn't, and the research you did to understand that.

    -

    Be kind and respectful, and be open to feedback and changes to your work.

    -

    Be inclusive from the get go, and value what others can bring.

    -
    -
    -

    How to contribute

    -

    Anyone can contribute to the Canada.ca design system.

    -

    A contribution could be:

    -
      -
    • suggesting an improvement to a component
      • -
    • working on a new pattern or page layout
      • -
    • clarifying guidance
      • -
    • correcting an error
      • -
    • anything that makes the design system better for the community
      • -
    - -

    Contribution process

    - -

    Backlog

    -

    The community backlog is on GitHub. It documents all the ideas to work on and their status.

    - Community backlog - -
    - -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/continuous-improvement/_choosing.html b/continuous-improvement/_choosing.html deleted file mode 100644 index 8175302fb2..0000000000 --- a/continuous-improvement/_choosing.html +++ /dev/null @@ -1,365 +0,0 @@ ---- ---- - - - - - - Choosing what to improve - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Choosing what to improve: Continuous improvement of web content

    - -
    -

    On this page

    - -
    - -

    Use a task-based approach

    -

    Canada.ca is the Government of Canada primary service delivery channel.

    - -

    People visit Canada.ca to do things like:

    -
      -
    • learn about health risks
      • -
    • apply for passports
      • -
    • pay their taxes
      • -
    • receive benefits
      • -
    • find jobs
      • -
    • learn about product recalls
      • -
    • better understand current international trade negotiations
      • -
    - -

    People come to Canada.ca to complete tasks that let them fulfill their goals or objectives. For example, the tasks might be to check eligibility requirements and apply for a benefit. The goal is to receive the benefit payment.

    - -

    Improving services on Canada.ca means ensuring that people are able to complete their tasks as efficiently and easily as possible.

    - - -

    Top tasks

    -

    Use a people-centred and data-driven way to focus and prioritize improvement efforts on the web by focusing on top tasks.

    - -

    Determining what the top tasks are for your organization is crucial to focusing on what matters.

    - -

    The GC Task Success Survey offers you a people-centred and data-driven way to prioritize your improvement efforts:

    - - - - -

    Improving the right thing

    - -

    You won’t be able to improve everything. Some tasks are much more important to your users – and to your mandate – than others.

    - -

    To choose what to improve, focus on 3 things:

    - -
      -
    • identify what tasks are causing the greatest challenges
      • -
    • understand how these problems are affecting your users and internal resources
      • -
    • choose what is feasible for you to improve, given time limits, organizational culture and interest levels
      • -
    - - - -

    Use data from task success surveys, direct feedback, call centres and other sources to determine your priorities.

    - -
    - - - -

    If the team doesn’t agree on the big picture, then they certainly won’t agree on a single feature.

    -

    Jory Mackay, 7 Ways to Prioritize Features and Product Improvements

    -
    - - -

    Task success survey results

    -

    Results and feedback from task success surveys will help you identify which tasks could be good candidates for improvement.

    - -

    The GC Task Success Survey lets you measure and monitor results:

    - - -

    Frustration expressed through direct feedback

    - -

    Analyzing direct feedback from people using your information through exit surveys, page feedback, and previous usability testing can help you narrow in on specific problems.

    - - -

    Call drivers, complaints, social media listening

    - -

    Are you getting more calls, or more complaints from your users about specific services? Is your front-line staff describing areas of struggle? Is there a sudden flurry of posts related to your services on social media? These are clear indicators of areas you may need to focus on.

    - - - - -

    There are different methods and scorecards you can use to help prioritize problems that users are experiencing. These resources can help you learn more about prioritization methods:

    - - - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    - -
    - {% include footer-en.html %} - - - - - - - - - - diff --git a/continuous-improvement/_designing.html b/continuous-improvement/_designing.html deleted file mode 100644 index 61c9bafdf5..0000000000 --- a/continuous-improvement/_designing.html +++ /dev/null @@ -1,456 +0,0 @@ ---- ---- - - - - - - Designing content - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Designing content: Continuous improvement of web content

    - -

    When you design content for Canada.ca, you design for people. The goal is to help people get what they need from the government.

    - - - - -
    -

    On this page

    - -
    - -
    - - -

    Focus on task success

    - -

    First, determine the task at hand: what is it that users are trying to do when they get to the page or set of pages?

    - -

    Tasks can be things like:

    - -
      -
    • apply for a benefit
      • -
    • get a copy of an official document
      • -
    • look for jobs
      • -
    • find out if a business name is available
      • -
    - -

    One question should drive all design decisions: does it help people succeed in completing the task?

    - - - - -
    - -

    Foster trust

    - -

    People need to know they'll find information they can trust.

    - -

    A consistent brand

    - -

    Using a consistent look throughout the Government of Canada web presence is crucial to building a trustworthy experience for people. People need to know they'll find information they can trust.

    - - - -

    Use the mandatory elements of the Canada.ca design system to implement this trusted brand.

    - -

    The mandatory elements you need to follow are:

    - -
      -
    • Canada.ca domain
      • -
    • mandatory styles (typography, colours and layouts)
      • -
    • standard header and footer
      • -
    • a handful of high-level mandatory templates to establish a consistent institutional presence and the Canada.ca topic tree
      • -
    - -

    Once you've applied this uniform brand, you can still use creativity within the body of the page to come up with the best design to help people complete their tasks.

    - - - - -

    Provide the answers people are looking for

    -

    The best way to foster trust is to provide people the answers they are looking for.

    -

    When someone can confidently take action based on the information you provided, you know you’ve built a trustworthy product.

    -

    Make sure you understand what people are trying to get from your content. Use evidence from research and data to make it easy for people to find, use and understand these answers.

    - - - -

    Make content findable

    -

    People can’t succeed at a task if they can’t find where to initiate it.

    -

    To improve findability, you can work on:

    -
      -
    • navigation
      • -
    • internal and external search
      • -
    - -

    Navigation

    - -

    Some people will navigate to their task on the Canada.ca site. To support this, making a clear path for people's tasks is crucial. That means planning your navigation structure and taking time to understand what labels will work best for your audience.

    - - - -

    Internal and external search

    -

    Some people will search on Canada.ca or external search engines.

    -

    Using the right keywords, organizing your content properly and adding good metadata can help improve search results. Adding structured data can also be a useful technique.

    - - - -

    Help people understand

    - -

    Once people find the page they need, they have to be able to understand what they read. The way we write and the words we use make an enormous difference.

    - -

    Use the words people actually use, not your internal jargon.

    -

    Stick to the essentials, and provide just enough information for people.

    -

    Write simple sentences and short paragraphs. Make good use of headings to help people scan the page and focus on the parts they’re looking for.

    - - - - -

    Make content easy to use

    -

    Use patterns and layouts that make it easy for people to use the content to complete their tasks. This could be simple text, a filterable table, a button, an interactive checklist or other patterns.

    - -

    If you can't find an existing pattern or template in the library that does everything you need, you can get creative as long as you respect the mandatory elements of the design system. If your solution works well, we may add it to the Canada.ca design system for others to use when they have similar needs.

    - -

    Do usability testing to make sure your design really does help people complete their tasks.

    - - - -

    Build in accessibility and inclusivity

    - -

    Accessibility and inclusivity have to be at the forefront of your design. Just like translation, accessibility and inclusivity are non-negotiable.

    - -

    Make sure your design is accessible as you develop it, not as an after-thought.

    - -

    The Standard on Web Accessibility requires all GC web pages to meet level AA of the Web Content Accessibility Guidelines (WCAG ) 2.0 requirements.

    -

    But this is only the minimum standard: if possible, shoot for AAA and WCAG 2.1 requirements.

    - - - - -

    Checklist for finalizing content

    -
    - Before going live with improvements, you need to finalize the content: -
      -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • - -
    • - - -
      • - -
    • - - -
      • - -
    -
    - - - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - - - diff --git a/continuous-improvement/_monitoring.html b/continuous-improvement/_monitoring.html deleted file mode 100644 index 48c75b7547..0000000000 --- a/continuous-improvement/_monitoring.html +++ /dev/null @@ -1,323 +0,0 @@ ---- ---- - - - - - - Monitoring and measuring task success - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Monitoring and measuring task success: Continuous improvement of web content

    - -

    On this page

    - - -

    Monitor and measure content after it goes live. Continuous improvements throughout the content’s life cycle avoids high-effort optimization projects down the road.

    - -

    Establish performance indicators

    - -

    For continuous improvement to work well, you need to establish performance indicators and identify data sources that help you evaluate how your content or service is performing.

    - -

    We can use data to make sure that:

    - -
      -
    • people can complete their task
      • -
    • content is easy to find and understand
      • -
    • information is up to date and accurate
      • -
    - - -

    GC Task Success Survey

    - -

    As part of reporting requirements for the Government of Canada, Treasury Board of Canada Secretariat has adopted the task success survey method as a primary means of measuring the performance of web content and services.

    - -

    All departments and agencies subject to the Directive on the Management of Communications are required to implement the GC Task Success Survey on their web properties.

    - - - - - -

    Monitoring other performance indicators

    - -

    Monitoring other data sources and performance indicators can uncover potential problems with your content or service.

    - -

    Combining data from multiple sources gives you a richer picture of how your content or service is performing.

    - -

    Additional data sources include:

    - -
      -
    • user feedback
      • -
    • call centre data (calls, emails)
      • -
    • social media monitoring
      • -
    • web analytics
      • -
    • interviews (users, front-line staff)
      • -
    • usability tests with talk-aloud protocol
      • -
    • others (financial statements, public opinion research, etc.)
      • -
    - -

    It’s best to combine metrics with usability testing to validate proposed improvements.

    - - - - -

    Continuous improvement

    - -

    Use the data you’ve been monitoring (such as user feedback, analytics, and user research) to find ways to improve your content. Evaluate proposed improvements with usability testing.

    - -

    Over time, programs and policies change and your content will need to change accordingly. With each change comes a new opportunity to research, prototype, and test out solutions before going live.

    - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - - - diff --git a/continuous-improvement/_research.html b/continuous-improvement/_research.html deleted file mode 100644 index a372a63351..0000000000 --- a/continuous-improvement/_research.html +++ /dev/null @@ -1,636 +0,0 @@ ---- ---- - - - - - - Research and prototyping - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Research and prototyping: Continuous improvement of web content

    - - -

    On this page

    - - -

    Process

    - -

    There is no single method for continuous optimization, but most approaches will follow a similar process. You identify a problem, research the issue, gather a baseline, prototype and test (as many times as needed), go live, and finally measure the impact of your work.

    - -

    The method described here is how the Digital Transformation Office approaches content optimization projects.

    - - -
    - A long description can be found after the image. -
    -
    - DTO optimization process -

    Step 1: Initiation. Project start-up, define the problem.

    -

    Step 2: Discovery. Initial research, determine tasks.

    -

    Step 3: Baseline study. Test the current service with users.

    -

    Step 4: Design and prototype. Develop prototype, test and iterate.

    -

    Step 5: Comparison study. Test prototype with users, iterate to improve.

    -

    Step 6: Transition. Prototype hand-off and transition to live.

    -
    - -

    Initiation

    - -

    You need to identify all of the stakeholders - particularly those who will have an impact on whether what you’re doing goes live. If the right people aren’t involved early on, you may experience significant delays. In the worst case scenario, your work may never see the light of day.

    - -

    Agree on what you’re trying to accomplish and make sure to have a good understanding of the barriers that may prevent implementation.

    - - -

    At the DTO we use a project tracking sheet where we can link to all of the important study artifacts:

    - - - -

    Discovery phase

    - -

    The purpose of the discovery phase is to conduct user research that will:

    - -
      -
    • tell you about the people using your content
      • -
    • identify the tasks they are trying to complete
      • -
    • pinpoint the challenges people are facing
      • -
    • help you form hypotheses for a usability testing plan
      • -
    • help define or refine the specific goals for your project
      • -
    - -

    Avoid making assumptions or thinking about solutions before discovery research is complete. It’s important to understand the problems that people are having first. You will tackle potential solutions through prototypes in the next phase.

    - -

    Common research methods in the discovery phase

    -
    - -

    Asking your own questions and knowing how to find the answers is a critical part of being a designer

    -

    Source: Erika Hall, Just Enough Research

    -
    - - -

    To create research questions, you need to understand gaps and weaknesses with the current situation. Use all or some of these methods to analyze your current situation.

    - - -

    Qualitative research

    - -
      -
    • Feedback from users
      • -
    • User interviews
      • -
    • Previous usability studies
      • -
    • Usability studies: first click tests, card sorting, tree jacks
      • -
    • Surveys or other behavioral insights reports
      • -
    • Social listening: web forums, social media
      • -
    - -

    Quantitative research

    - -
      -
    • Content inventories and maps
      • -
    • Call centre reports
      • -
    • Web analytics
      • -
    • GC Task Success Survey results
      • -
    - -

    Learn about people using your content

    -

    By understanding the people who use your content, you will know more about who they are and their behaviours. This will help you narrow down who you need to recruit for usability testing.

    - -

    Record your findings and the challenges people are facing

    -

    Some ways to summarize these findings include:

    - -
      -
    • kanban board
      • -
    • spreadsheets with analytics
      • -
    • concept maps
      • -
    • interview transcripts
      • -
    • journey maps
      • -
    - -

    Identify the specific tasks people are doing

    - -

    Decide which specific tasks you will address as part of the optimization work.

    - -

    You will build the solutions you prototype around these tasks.

    - -

    Some examples of specific tasks from the Canada Child Benefit program:

    -
      -
    • How much will the payment be?
      • -
    • When will the payment be sent / deposited?
      • -
    • Check if you are eligible to receive the Canada Child Benefit
      • -
    • How to update your address
      • -
    - -

    Sharing the discovery research

    - -

    Summarizing and sharing what you’ve learned is an important milestone. This is a living document that you add to as you learn more through your research. You’ll refer back to these artifacts often.

    - -

    Baseline measurement phase

    - -

    A baseline measurement gives you a direct comparison of how a task performed before you optimize it.

    - -

    If having a direct comparison is important to demonstrate the impact and value of your solutions, this is an important step to include. Make sure to use the same measurement method before and after optimization if you want comparable results.

    - - -

    If your project is completely new you may not have anything to baseline test.

    - -

    Additionally, if your proposed solution is small or you have another metric (like call centre data or GC Task Success Survey data) that you will use to evaluate effectiveness, you could skip running a baseline study.

    - -

    Why run a baseline usability study

    - -

    Watching real people use your content is one of the most effective ways to gather evidence about the problems you’re looking to solve.

    -

    Perform moderated or unmoderated baseline studies with people trying scenarios on existing web content.

    - -

    When to use moderated and unmoderated testing

    - - - - - - - - - - - -
    Moderated is best for:Unmoderated is best for:
    -
      -
    • a complicated process or concept
      • -
    • when you want to ask follow-up questions if a participant is stuck or confused
      • -
    • working with a specialized group of participants
      • -
      -
    • quick results
      • -
    • studying a few very specific tasks
      • -
    • if you only need to select participants using basic demographics (age or income)
      • - -
    - - - - -

    At the DTO, we include 16-18 participants in moderated baseline studies when we want to generate percentage task success scores that have reproducible results.

    -

    You can run smaller studies with fewer participants to gain insights about specific parts of your site. In our work at the DTO, we often run qualitative usability tests with 6-8 participants, but you can run studies with as few as 3-5 participants and still get useful results.

    -

    In small studies, do not report success or failure as percentages since the results are not reproducible.

    - -
    -
    -

    Correct

    -

    2 / 8 participants were able to complete the task successfully

    - - -
    -
    -

    Incorrect

    -

    25% of participants were able to complete the task successfully

    - -
    -
    - - -

    Recruiting participants

    -

    Recruit people for your usability tests that are representative of the audience for your content or service. You can work with a company to help recruit participants or use screening criteria in unmoderated tools to help find the right people to reduce variability in your results.

    -

    Plan to over-recruit - expect that there will be no-shows or that some unmoderated tests may not work out as expected.

    - -

    Whoever is recruiting participants and conducting research is responsible for protecting the privacy of participants and ensuring they have informed consent before starting the study.

    - - -
    - Collecting personal information - -

    Before collecting participants’ personal information, check in with your privacy group.

    -

    The Privacy Act governs how the federal government handles personal information.

    -
      -
    • Section 3: Definitions
      • -
    • Section 4: Authority to Collect
      • -
    • Section 8 (2): Appropriate Disclosure of Information
      • -
    -

    The Tri-council policy statement on Ethical Conduct for research involving humans outlines best practices for conducting research with participants.

    -
      -
    • Chapter 3 provides guidelines for collecting informed consent.
      • -
    - - -

    The Directive on Privacy Practices provides direction on how to implement effective privacy practices including collecting and notifying participants how their information will be used.

    -
      -
    • Section 6: Requirements
      • -
    • Section 6.2.9: Privacy Notice
      • -
    - -

    When using unmoderated usability testing tools, we include a screening question that tells participants how we may use the recordings. At this point, they are given the choice to opt out.

    - -

    Example privacy screener text

    -

    “We sometimes use recordings in public blog posts, with any personally identifying information hidden and voices altered. Please only accept this test if you consent to us using your recording in this way.”

    - -
    - -

    Write task scenarios

    -

    Research questions

    -

    Using your discovery research, you now have a prioritized list of challenges that you're facing and potential tasks to test.

    -

    Develop research questions based on these tasks. (What do you want to find out? To prove?) Research questions help narrow the scope of your study to the behaviours you want evidence on - make sure everyone agrees on them!

    - - - -

    With your list of research questions in hand, draft tasks that will help you gather evidence and provide insights about ideas to prototype.

    - -

    Tasks

    -

    These must be real things people are trying to accomplish.

    - -

    Hypothesize about what you think may happen during the test.

    - -

    We find that we can test 8-10 small tasks in an hour-long moderated session or 5-6 tasks in an unmoderated 30-minute session.

    - -

    Scenarios

    -

    Scenarios are realistic narratives for a task that the team creates together.

    - -

    Using the job story formula, identify a situation a user may find themselves in and the strategies they use to arrive at a desired outcome.

    - -

    A job story follows this format:

    -

    “When I (situation), I want to (motivation), so I can (expected outcome)”

    - -

    This is a valuable approach to reinforce your understanding of how and why a service is used.

    - -
    -

    Example task
    Change direct deposit bank account details.

    - -

    Job story
    When I move my mortgage to a new bank, I want the CRA to put my tax refund into the new account, so I can pay my mortgage on time.

    - -

    Scenario
    You renewed your mortgage, and you moved all your bank accounts to a new bank. What number would you call to get your personal tax refund into your new bank account? (answer: 1-800-959-8281)

    -
    - -

    Fine-tune these tasks so they tell you as much as possible, are accurate, and feasible for your participants to complete. Make sure each task has a clear answer. Answers may be yes/no, or else something specific such as a number or percentage, a date, a telephone number, etc.

    - -

    Before you run your first official test, make sure you pilot your task scenarios. For example, you can ask a friend or colleague to try doing the task to get a sense of whether participants will understand what you’re asking them to do.

    - - - -

    More information on writing task scenarios

    - - - -

    Running a moderated or unmoderated baseline study

    - -

    You can use an outside firm to run a moderated study for you or set it up yourself. If setting up a moderated study yourself, you will need to select a screen and audio sharing tool. Pay attention to any special installation requirements. If possible, let participants know in advance which tool you will be using so they can prepare their computer or device ahead of time.

    - -

    You can choose from a range of third party services that provide moderated and unmoderated study tools. An unmoderated study can be run outside of work hours and is generally less expensive to run.

    - -

    In both scenarios, you want to have video recordings at the end of each session that you can use to complete a detailed analysis.

    - - -

    Additional resources on moderated and unmoderated testing:

    - - -

    Analyzing baseline results

    - -

    Involve everyone on the team in the analysis process, at least as an observer.

    - -

    Reviewing transcripts and summary reports is helpful but there is no replacement for first-hand observations with real users. Ensure the whole team can participate by watching videos or live sessions.

    - -

    Take notes of key behaviours during the sessions

    - -
      -
    • clicks - note all links clicked, and every click on anything, whether it’s clickable or not
      • -
    • direct quotations of feedback about an issue
      • -
    • scrolling the page
      • -
    • reading headings aloud
      • -
    • skimming text - missing links in skimmed text
      • -
    • observations about issues encountered
      • -
    • the point where they arrived on the page with the answer
      • -
    • if they found the correct answer
      • -
    - - -

    Share any shorthand you use in your notes

    - -
      -
    • use identifiers for clicks on navigation like breadcrumb BC, back button B, menu link M
      • -
    • note search, filter and find attempts with keywords used S keyword, F keyword
      • -
    - -

    When analyzing the data you’ve collected, read through the notes carefully looking for patterns and be sure to add a description of each of the problems. Look for trends and keep a count of problems that occurred across participants.

    - -

    Share your findings

    -

    Summarize the test results in a usability test report with your findings and recommendations. An effective report will include visuals such as screen shots and short video clips to illustrate specific problems.

    - - -

    We recommend presenting the findings in person. This is an effective way to make sure that stakeholders and approvers understand the issues that you are trying to fix. These sessions are a great way to build empathy for users with members of the team that did not observe or participate in analysis of the usability tests.

    - -

    An emailed report is an ignored report!

    - - -

    Outcome of the baseline testing phase

    -
      -
    • You have a baseline score for each task scenario
      • -
    • You have videos of people attempting tasks
      • -
    • Project team members and stakeholders have watched all videos for at least 1 task
      • -
    • You know exactly how many people did what in each case
      • -
    • You have a list of issues that need to be addressed
      • -
    • All project stakeholders understand the issues and want to get them fixed
      • - -
    - - - -

    Prototype ideas to improve success

    - - -

    There are different approaches to prototyping, from basic wireframing to fully working HTML pages.

    -

    Basic designs help in the early stages of ideating for teams to discuss and visualize. Fully working HTML prototypes can make testing easier since they behave exactly, or almost exactly, like the real live content would.

    -

    Make sure prototypes aren’t behind firewalls or in staging/development servers that are not publicly accessible if you’re testing with members of the public.

    - -

    Our preferred way of prototyping at the DTO is HTML, using GitHub pages, but there are other options for creating high-fidelity interactive prototypes including:

    - -
      -
    • Figma
      • -
    • InVision
      • -
    • Axure
      • -
    • Adobe XD
      • - -
    - - -

    Prototypes are a great change management tool. Doing demonstrations using prototypes can bring together diverse perspectives (for instance from communications and policy, or across branch or departmental lines).

    -

    A prototype that can be easily updated during workshops can be very effective. A live editing session can turn ideas from participants into something concrete in real time. It also demystifies content design and coding, which helps create buy-in for an iterative approach.

    -

    Prototyping is a risk-reduction strategy. It lets stakeholders see the proposed approach and comment on it or correct it before it goes live.

    - - - - -

    Comparison testing

    - -

    Once your prototypes are ready, you need to test them to see whether your ideas and solutions work with users. When possible, use the same test questions and testing approach as you did for the baseline study so that you can make direct comparisons and verify whether you met objectives.

    - -

    As testing progresses, you may find it necessary to continue fine-tuning or adjusting your prototypes, if participants continue to struggle. The participants will help you understand what helped, and why.

    - -

    No matter how smart or experienced you are, you will be surprised by what you see people do.

    - -

    Follow up testing with analysis and reporting. The testing report or presentation should communicate improvements or areas that require further work. Include a plan to complete those additional changes.

    - -

    This report will be a critical tool for building the case for change among decision makers during the following implementation phase.

    - - - - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    Date modified:
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - diff --git a/continuous-improvement/_team.html b/continuous-improvement/_team.html deleted file mode 100644 index 1ca021a26b..0000000000 --- a/continuous-improvement/_team.html +++ /dev/null @@ -1,494 +0,0 @@ ---- ---- - - - - - - Organizing and preparing your team - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    -

    Organizing and preparing your team: Continuous improvement of web content

    - -

    On this page

    - - -

    Establish your team

    -

    Web content improvement projects usually require the participation of many people. Different roles are needed to ensure coordination, research, design and delivery.

    - -

    There are different ways you can organize your team, and some people may have more than one role, but the following roles should be covered.

    - - - -

    Project leadership and coordination

    - - -

    The project lead:

    -
      -
    • sees the project through to implementation
      • -
    • ensures a measurement strategy is put in place
      • -
    • understands and plans mitigation of the barriers that prevent implementation
      • -
    • facilitates workshops and meetings to keep everyone working in the same direction
      • -
    - -

    The project coordinator keeps the team organized, maintains spreadsheets, documentation and schedules meetings.

    - -

    User research and usability testing

    - -

    Research-driven improvement projects require impartial usability research specialists who can recruit participants and run replicable tests with multiple participants.

    - -

    Design researchers understand and uncover user behaviours and expectations through various research methods.

    - -

    This group of people could be in-house or through a third party.

    - - -

    Design

    -

    Content designers focus on improvements to language and how content is structured or displayed to help people complete their tasks.

    - -

    Interaction designers build prototypes and provide input on interactive approaches that may enhance the user’s experience.

    - - - -

    Subject matter experts

    - -

    Content improvement must be done with the involvement of subject matter experts, who understand the topic and what needs to be conveyed to the audience. These participants may differ, depending on the program area:

    - -
      -
    • program and policy experts, to ensure a thorough understanding of the context and purpose
      • - - -
    • front-line service agents who can be an invaluable sources of information about customer needs and frustrations
      • - -
    • content developers / contributors
      • -
    • web support team and relevant Canada.ca theme lead
      • -
    - -

    Senior management and decision makers

    - -

    You need to involve senior management to approve decisions on content, design and interactions. You need someone to champion implementation once research and recommendations are done. Designing web materials for task success may conflict with organizational pressures. It's critical that senior management be engaged early and often, to understand the methods, and to participate in crafting appropriate project goals.

    - -

    Some of the greatest risks to project success are:

    - -
      -
    • a lack of organizational experience designing services from the client’s perspective
      • -
    • situations where multiple groups in the organization may be impacted by changes to service delivery
      • -
    • usability testing or analytics evidence contradicting approaches that support competing priorities (political, organizational, regulatory, etc.)
      • -
    • overly long and complex approval processes
      • -
    - -

    Some of the best ways to overcome these risks include:

    - -
      -
    • engaging senior management early and often -
        -
      • we recommend engaging senior management early in the process, as well as on a frequent basis during the project
        • -
      -
      • -
    • keeping senior management up to date on human-centred service design, evidence gathering approaches and usability testing
      • -
    • sharing user stories - especially when audiences struggle with current designs
      • -
    • identifying likely obstacles in advance and tailoring discussions accordingly
      • -
    - -

    Co-design with approvers at the table (blog post)

    - -

    Set up your governance structure

    - -

    Improving content for people often means significant change for organizations. To lead a successful improvement project, people working on it need to agree on the purpose, approach and objectives.

    - -

    Everyone involved needs to be on board.

    - -

    You need:

    - -
      -
    • a high-level agreement on what you want to accomplish with the improvement project
      • -
    • buy-in on the people-centred and evidence-based approach for decision-making
      • -
    • a project team with the right skills, ready to work together
      • -
    • a project lead and well-defined roles and responsibilities
      • -
    • a clear understanding of the potential barriers to implementation and how to address them
      • -
    - - -

    Resource: One page project alignment template (Google Docs)

    - -

    Governance to address barriers

    - -

    Effective and intentional governance can help address the barriers that may get in the way of project success.

    - -

    These barriers include:

    - -
      -
    • challenging traditional decision-making and chains of command with new, research-based approaches to web content
      • -
    • ensuring the right people with the right knowledge are involved
      • -
    • understanding the relationships between design and technical implementation
      • - -
    - - -

    Effective project governance removes ambiguity about who is accountable for which decisions.

    - -

    Tips for good governance

    - -
      -
    • Structure your team to support the project’s objectives by ensuring there is awareness, acceptance and capacity to produce an outcome that supports what people need from you
      • -
    • Make sure decision-makers can support approaches that have been tested and proven to work.
      • -
    • To meet objectives, you will need people in roles to be accountable for: -
        -
      • implementing the improved content
        • -
      • using evidence to drive decisions
        • -
      • engaging with stakeholders effectively
        • -
      • understanding and mitigating risk
        • -
      • ensuring there is a team-wide understanding of the subject
        • -
      • ensuring acceptance of the evidence-based approach among subject matter experts
        • -
      -
      • -
    - -

    Example project governance model

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Example project governance model
    RoleCore taskAccountable for
    Senior managerApproval and oversightImplementation of improvements
    Project leadImplementation of improvementsKey deliverables and timeline
    Project coordinatorContacts, meeting invitations, notes and records of decisionKeeping team consulted and informed
    Design researcherUser research and usability testingProviding the evidence to drive design decisions
    Content designerEvidence-based content improvementsMaking design decisions based on the evidence
    Interaction designerEvidence-based designs and prototypingMaking design decisions based on the evidence
    Subject matter expertsReview content for accuracyAccuracy of content after improvements
    - - - -

    Plan for efficient approvals

    - -

    Approval processes often take time. There are things you can do to make it better.

    - -

    Involve approvers from the get go

    - -

    Don’t wait until the end of the design process to seek input from people who will approve the content. Involve all stakeholders at the beginning of the process, and identify the approvers early on.

    - -

    Make sure everyone who needs to know is aware of the objectives and timelines of the improvement project.

    - - -

    Design and prototype collaboratively

    - -

    Don’t design and prototype all by yourself. Lead content design workshops that involve everyone that has a stake in the content: subject matter experts, policy people, communications, web advisors, etc.

    - - -

    Use demos to show the design to approvers

    - -

    Instead of simply passing around a Word document asking for input, do regular presentations to people who will approve the content. Show the process, the research and the actual prototype, and demonstrate how this is an improvement.

    - -

    The more carefully you prepare content before approvals, the less approvers will need to tweak it. Do the hard work to make it easy for them to give the ok to go live.

    - -

    It’s up to the project team to:

    - -
      -
    • review text in both languages carefully
      • -
    • verify code validity and accessibility
      • -
    • review (QA) coded content for broken links, missing text, etc.
      • -
    • prepare analytics tagging and performance reporting
      • -
    - - -

    Co-design with approvers at the table (blog post)

    - - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - - - diff --git a/crisis/_alerts.html b/crisis/_alerts.html deleted file mode 100644 index b7a6b5a1f6..0000000000 --- a/crisis/_alerts.html +++ /dev/null @@ -1,278 +0,0 @@ ---- ---- - - - - - - Canada.ca alerts and service disruptions - Canada.ca - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    - -

    Canada.ca alerts and service disruptions

    - -
    -
    -

    From: Treasury Board of Canada Secretariat

    -

    Last updated: 2022-05-10

    - -

    These recommendations will help bring consistency to each department's communications on service disruptions during a crisis.

    - - - - -
    - -

    On this page

    - -
    -
    - -

    How to use alerts for service disruptions

    -

    Alerts are meant to draw attention to changes in regular content in 2 ways:

    -
      -
    1. a change to the content of the page on which the alert appears: in this case, place the alert next to the updated content
      2. -
    2. a change that has been made elsewhere, such as new information being published: in this case, link to the new information from within the alert
      3. -
    -

    - -

    What to include in alerts

    -

    Alert content should:

    -
      -
    • be short and simple
      • -
    • describe the impact on the user
      • -
    • be tailored to the page on which it appears
      • -
    • include the dates (if known) when the disruption will take place
      • -
    • use the appropriate verb tense to reflect when the change is taking place
      • - -
    • use links sparingly - if a link is needed, only include one
      • -
    - -

    Limit use of alerts

    -

    Be aware that alert fatigue reduces the effectiveness of the alert over time. The more people see alerts and warning messages the less receptive they are to them. To avoid this, follow these guidelines:

    -
      -
    • only use alerts on a temporary basis (for the time it takes to integrate the information or resolve the situation)
      • -
    • limit the number of alerts on each page
      • -
    • limit the number of alerts used across pages: -
        -
      • use at impacted points of service or information delivery, such as service initiation pages, contact pages, etc.
        • -
      • avoid beyond service or information delivery points - on theme and topic pages, consider using a new doormat instead
        • -
      -
      • -
    • save alerts for significant situations that impact most users: -
        -
      • on the Canada.ca home page, only use when more than 50% of the population is affected
        • -
      • on institutional landing pages, only use when more than 40% of users are impacted
        • -
      -
      • -
    • avoid using alerts just for styling regular content (for emphasis or highlighting)
      • -
    - -
    -

    Which alert to use

    -
    -
    Danger alert (red)
    -
    Use only if the service is cancelled or if there's a risk to health or safety to Canadians in completing an activity.
    -
    Warning alert (yellow)
    -
    Use for delays, closures at certain locations, and other types of service disruptions.
    -
    Info alert (blue)
    -
    Use for the length of time an application method takes, changes in wait times on a phone line, messages that there is no service disruption for a particular service if that is generating inquiries.
    -
    Success alert (green)
    -
    Use when a service disruption is resolved.
    -
    -
    -

    Examples and code

    -
    -
    -

    Limited service availability

    -

    This service is affected by the outbreak of coronavirus (COVID-19).

    - Check service status updates

    -
    -
    -
    - HTML to code an alert -

    Code:

    - 
    <section class="alert alert-warning">
-	<h3>Limited service availability</h3>
-	<p>This service is affected by the outbreak of coronavirus (COVID-19).</p>
-	<a href="#">Check service status updates</a></p>
-</section>
    -

    Change the "alert-warning" class to "alert-info", "alert-danger" or "alert-success" based on the type of alert needed.

    -
    -

    Use the Contextual alerts pattern

    - -

    Additional examples

    -

    Alert examples on specific page types:

    - -
    -
    -

    Alerts that repeat across several pages

    -

    If you need to add the same alert on many different pages, it may make sense to make a single page that all these alerts can link to.

    -

    The central page will:

    -
      -
    • summarize the change in plain language
      • -
    • explain the impact on the users of affected services
      • -
    • be updated as soon as new information arises
      • -
    -

    The breadcrumb for this central page should lead to the Government of Canada's main response page for the crisis.

    -

    How this helps

    -
      -
    • prevents scattered crisis and service disruption pages
      • -
    • encourages a coordinated approach within each department and across the Government of Canada
      • -
    • reduces the work required to maintain various alerts and related updates
      • -
    -
    - - -

    Latest changes

    -
    - - -
    -
    -
    Revised headings to say “service disruption” rather than “crisis”. -

    - Added a recommendation to include dates in the alert and use the correct verb tense. -
    -
    -
    - - - -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - diff --git a/crisis/_content.html b/crisis/_content.html deleted file mode 100644 index 708b63dbe2..0000000000 --- a/crisis/_content.html +++ /dev/null @@ -1,456 +0,0 @@ ---- ---- - - - - - - - Crisis communications content design checklist - Canada.ca - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    - - -

    Crisis communications content design checklist

    - - -
    -
    - - - -

    From: Treasury Board of Canada Secretariat

    - - - - - -
    -

    On this page

    - -
    - -
    - -
    -

    1. Use a mobile-first style

    - -

    The majority of visits to crisis pages are from visitors on phones.

    - -

    A low-prose, mobile-first style makes the content more effective, and takes less time for approvals and translation.

    - - - -
    -
    - -
    -

    2. Do not duplicate content

    - -

    If content already exists, link to it.

    -

    This will avoid outdated content in multiple locations such as:

    -
      -
    • current cases
      • -
    • travel advisories
      • -
    • awareness resources
      • -
    - - -
    - -
    - -
    -

    3. Follow a news-based page structure

    -
      -
    1. alerts (when required)
      2. -
    2. directions
      3. -
    3. background / static content -
      4. -
    - -

    Keep actively changing content (alerts, dates, numbers) separate from static content -

    -
    -
    -
    -

    4. Add the date and timestamp when information changes

    - - -

    Use this for alerts, changes in policies or directions, or data in tables -

    -
    -
    -
    -

    5. Follow guidance for alerts and warnings

    - - - -
    -
    -
    -

    6. Write information as directions

    - - -
      -
    • tell people exactly what to do, directly, simply
      • -
    • use “you” to address the public
      • -
    • use “we” to refer to the Government of Canada
      • -
    -
    - - -
    -
    -

    7. Use headings as answers

    - - - -
    - - -
    -
    -

    8. Use bulleted lists

    - - -
      -
    • easier to scan for desktop and mobile users -
      • -
    • less demand on translation -
      • -
    • if instructions change, it is faster to update than paragraphs -
      • -
    -
    - - -
    -
    -

    9. Use bold text sparingly

    - - -
      -
    • only use to draw attention to keywords -
      • -
    • the more you use it, the less effective it is -
      • -
    -
    - - - -
    -
    -

    10. Pull links out of paragraphs

    - -

    Put links below the text, aligned to the left of the page.

    -
    - - -
    -
    -

    11. Keep sentences short

    - -

    If you do use full sentences, keep paragraphs short so they fit on a phone screen. -

    -
    - - - - -
    -
    -

    12. Words to avoid

    - - -
      -
    • "current" - unless content is updated daily with a date stamp -
      • -
    • “in order to” - Use single words like “to” (more examples) - -
      • - -
    -
    - - -
    -
    -

    13. Keep track of common wording and terms

    -

    Share this list between all communicators (web, social media, strategic communications)

    - -
      -
    • avoid channels saying the same thing differently -
      • -
    • reduce demand on translation
      • - -
    -
    - - - -
    -
    -

    14. Identify pages with emergency related content

    -

    Keep track of your content that will change frequently to avoid conflicting messaging

    - -
    - - - -
    -
    -

    15. Create web content, not documents

    - - -
      -
    • web content is more accessible
      • -
    • web content is mobile friendly
      • -
    • usability testing has shown that people look for content on the page they land on and miss important information hidden in documents/publications -
      • - -
    -
    - - -
    -
    -

    16. Removing content is just as important as publishing it

    - -

    Outdated content:

    -
      -
    • may do harm to users if they follow inaccurate guidance
      • -
    • affects the trustworthiness of the Government of Canada
      • -
    - - -

    Too much content:

    -
      -
    • dilutes key messages and instructions
      • -
    • makes it harder for users to know what they need to do
      • -
    - - -
    - -
    - -
    - - -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    - -
    -
    -
    - - -
    -
    -
    Date modified:
    -
    -
    -
    - -
    -
    - - - - - - - - - - {% include footer-en.html %} - - - - - - - - - - - diff --git a/events/_Canada-ca-fall-update-2019.html b/events/_Canada-ca-fall-update-2019.html deleted file mode 100644 index 44bc7faa7d..0000000000 --- a/events/_Canada-ca-fall-update-2019.html +++ /dev/null @@ -1,139 +0,0 @@ ---- ---- - - - - - - - Canada.ca fall update: November 29, 2019 - Canada.ca - - - - - - - - - - - - - -
    -
    - - - - - -
    - -

    Canada.ca fall update: November 29, 2019

    - -
    - -
    - - - -
    - {% include footer-en.html %} - - - - - - diff --git a/events/_Canada-ca-spring-update-2019-questionnaire.html b/events/_Canada-ca-spring-update-2019-questionnaire.html deleted file mode 100644 index d41e164187..0000000000 --- a/events/_Canada-ca-spring-update-2019-questionnaire.html +++ /dev/null @@ -1,138 +0,0 @@ ---- ---- - - - - - - - Canada.ca: Spring 2019 update questionnaire - Canada.ca - - - - - - - - - - - - - -
    -
    - - - - - -
    - -

    Canada.ca: Spring 2019 update post-event survey

    - -
    - -
    - - - -
    - {% include footer-en.html %} - - - - - - diff --git a/events/_Canada-ca-spring-update-2019.html b/events/_Canada-ca-spring-update-2019.html deleted file mode 100644 index 6931b867a9..0000000000 --- a/events/_Canada-ca-spring-update-2019.html +++ /dev/null @@ -1,134 +0,0 @@ ---- ---- - - - - - - - Canada.ca spring update: June 18, 2019 - Canada.ca - - - - - - - - - - - - - -
    -
    - - - - - -
    - -

    Canada.ca spring update: June 18, 2019

    - -
    - -
    - - - -
    - {% include footer-en.html %} - - - - - - diff --git a/events/_Canada.ca-Update-Authorization-and-Release.html b/events/_Canada.ca-Update-Authorization-and-Release.html deleted file mode 100644 index c2faa9fc7f..0000000000 --- a/events/_Canada.ca-Update-Authorization-and-Release.html +++ /dev/null @@ -1,56 +0,0 @@ ---- ---- - - - - - - - Authorization and Release - - - - - - - - - - - - - - -
    -
    - -
    -

    Authorization and Release

    - -
    -

    - I grant Her majesty the Queen in right of Canada, as represented by the President of Treasury Board of Canada Secretariat (TBS), the right to take, modify, adapt, exhibit, publish, transmit, reproduce, create derivative work from, distribute and otherwise use my name, photograph, video and/or audio recording, likeness, artwork, profile and/or testimonial in any material developed by or on behalf of TBS, including but not limited to current and future publications, Web sites, videos and/or audio recordings for purposes that promotes and supports the mission of the TBS, whether for internal use or public dissemination. -I forever release TBS from any liability from direct, indirect, special, incidental or consequential damages of any kind arising from the use of my name, photograph, video and/or audio recording, likeness, artwork, profile and/or testimonial. -I have read and fully understood the terms and legal effects of this agreement. -

    -

    -Notice: -Our registration tool uses Surveygizmo, a third-party application. Sign-up is voluntary and subject to the Terms of Use for the Surveygizmo platform. When you sign up, your email address and language preference (English or French) is collected. No other personal information is collected. -The collection and use of your personal information is authorized by the Financial Administration Act. Collection and use of your personal information for this site is in accordance with the federal Privacy Act. Your personal information may be used to respond to your inquiries, if applicable, and to help evaluate the effectiveness of Treasury Board of Canada Secretariat (TBS) programs in responding to client needs. In exceptional circumstances (e.g., individuals who make inappropriate remarks or threats), personal information may be disclosed without your consent pursuant to subsection 8(2) of the Privacy Act. -Any personal information that may be collected is described in the Standard Personal Information Bank entitled Outreach Activities, PSU 938, which can be found in the TBS webpage Information about programs and information holdings. -Any questions, comments, concerns or complaints you may have regarding this Statement, your privacy rights and the Privacy Act may be directed to the TBS Access to Information and Privacy Coordinator by email at ATIP.AIPRP@tbs-sct.gc.ca or by telephone at 1-866-312-1511. You may also wish to contact the Office of the Privacy Commissioner of Canada by email at info@priv.gc.ca or by telephone at 1-800-282-1376. You have the right to complain to the Office of the Privacy Commissioner of Canada about the handling of your personal information by TBS. -

    -

    Return to registration page



    -
    - - diff --git a/guidance/_structured-data.html b/guidance/_structured-data.html deleted file mode 100644 index 302416c9b9..0000000000 --- a/guidance/_structured-data.html +++ /dev/null @@ -1,855 +0,0 @@ ---- ---- - - - - - - - Adding structured data on Canada.ca pages - Canada.ca - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - - - -
    -
    -
    - - -
    - - - -
    - - -

    Adding structured data on Canada.ca pages

    - - -
    -
    - - -

    Adding structured data to a webpage can help deliver better answers to people.

    - -
    -

    On this page

    - -
    - -
    -

    What is structured data

    -

    Structured data is a way to tag content in a “machine-readable” way.

    -

    It helps search engines make sense of the page by allowing you to add information that clarifies the meaning of the content.

    It should help deliver:

    - -
      -
    • better and more informative search results (often in Google and Bing)
      • -
    • better voice search results (for services like Alexa and Google Home)
      • -
    - -

    Search engines control how search results appear and what gets featured in snippets. Adding structured data may or may not change search results.

    - -

    Example of a rich snippet

    -
    -A long description can be found after the image. -
    -
    -Example of a rich snippet: searching for "covid benefits" -

    When searching for "covid benefits" on Google, you may get a rich result that shows different sections that can be expanded to provide specific links. Expanding "For individuals" reveals 5 links:

    -
      -
    • Employment Insurance (EI) program
      • -
    • Canada Recovery Benefit (CRB)
      • -
    • Canada Recovery Sickness Benefit (CRSB)
      • -
    • Canada Recovery Caregiving Benefit (CRCB)
      • -
    • All support for individuals
      • -
    -

    -
    - -


    - -

    Structured data needs to be a “true representation” of the page. You can’t add structured data about content that isn't covered in the page.

    - -

    Adding structured data is just one of the techniques you can use to optimize your content for search. Improving the actual content of the page should always be the first step you take.

    - - - -

    How to add structured data

    -

    Step 1: Choose a schema

    -

    A structured data schema is a set of field-and-value pairs you can use to add meaning to your page.

    -

    There are multiple schemas you can choose from.

    -

    Consult the list of schemas on Schema.org or Google, or look at the examples provided on this page.

    - - -

    Step 2: Write JSON-LD code

    - -

    While structured data can be written in RDFa, we suggest using JSON-LD instead. JSON-LD is becoming the preferred structured data language of search engines. It also allows a bit more flexibility, like allowing you to inject HTML in the rich snippets of search results.

    - -

    JSON-LD exists separate from the actual content. If you update the content, remember to adjust the JSON-LD code accordingly.

    - -

    Because some elements may already be coded in RDFa in your templates, make sure there is no collision between the two.

    - -

    Use a validator, such as JSONLint, to make sure your JSON-LD code is valid.

    - -

    Adding JSON-LD in Adobe Experience Manager (AEM)

    -

    If your page is published in AEM, you can add structured data in JSON-LD by using the structured data component in the page properties.

    -

    Follow the instructions in GCPedia (only available on the GC network).

    - - - -

    Step 3: Test the structured data code

    -

    You can copy code snippets or full URLs to test your code in the Rich results test.

    - -

    It shows which rich result types (supported by Google) were found on the page, as well as any errors or suggestions for your structured data

    - -

    By pasting the URL or the code of the page, you can see if it’s valid, and if the values assigned to different fields are the correct ones.

    - -

    Step 4: Validate HTML code and check accessibility

    -

    Before you publish the page with structured data, make sure that the HTML is valid and the page is accessible. You can use online validators to help you with this:

    - - - -

    Step 5: Publish the page, reindex and monitor

    -

    Once your structured data is published, Google and Bing should reindex the page within a few days.

    - -

    Check the status of your code in the Canada.ca Google Search Console.

    - -

    How to measure the impact of structured data

    -

    You can measure the impact of structured data by looking at the Google Search console. You can get statistics on how the rich snippet is performing, such as:

    - -
      -
    • the proportion of the clicks to a page generated from a rich snippet
      • -
    • the search queries that generate rich snippets
      • -
    • whether the click-through rate is different with a rich snippet
      • -
    - -

    Adding tracking (UTM) codes to hyperlinks in the rich data can also help you understand when people are clicking the links in the rich snippet.

    - - -

    Schema code and examples

    - -
    -

    SpecialAnnouncement

     -

    When to use

    -

    The SpecialAnnouncement schema is a new experimental schema developed for announcements related to COVID-19. It's mainly for health related information (symptoms, quarantine, testing, etc.), but also for closures, reopenings, and special government benefits.

    - -

    Official guidance

    - - - -
    -
    -

    Code

    -
    -
    -
    - JSON-LD -
      -
    • Add id attribute to the JSON-LD HTML script element named “wb-script”.
      • -
    • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
      • -
    - - 
    <script id="wb-script"
-type="application/ld+json">
- {
-  "@context":"http://schema.org",
-  "@type":"SpecialAnnouncement",
-  "@id": "#wb-main",
-  "mainEntityOfPage":{
-   "@type":"WebPage",
-   "@id":"https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html"
-   },
-  "name":"Coronavirus disease (COVID-19): information from the government of Canada",
-  "text":"Coronavirus disease (COVID-19) information for Canadians including links to disease updates, travel advice, how to be prepared, symptoms, prevention, risk, Canada's response, current case numbers, answers to questions and links to printable resources.",
-  "spatialCoverage": {
-   "@type": "Country",
-   "name": "Canada"
-   },
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "category":"https://www.wikidata.org/wiki/Q81068910",
-  "datePosted":"2020-05-09",
-  "diseasePreventionInfo":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks.html",
-  "diseaseSpreadStatistics":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection.html",
-  "newsUpdatesAndGuidelines":"https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html",
-  "quarantineGuidelines":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks.html",
-  "travelBans":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/latest-travel-health-advice.html",
-  "governmentBenefitsInfo": {
-   "@type": "GovernmentService",
-   "name": "Canada's COVID-19 Economic Response Plan",
-   "url":  "https://www.canada.ca/en/department-finance/economic-response-plan.html",
-   "provider": {
-    "@id": "#wb-publisher"
-    },
-   "serviceType": "Emergency relief",
-   "audience": {
-   "@type": "Audience",
-   "name": "Canadians affected by COVID-19"
-   }
-  }
- }
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
- </main>
-</body>
    -
    -
    - AEM -

    Add the code in the Structured data component in the page properties.

    - - 
    {
-  "@context":"http://schema.org",
-  "@type":"SpecialAnnouncement",
-  "@id": "#wb-main",
-  "mainEntityOfPage":{
-   "@type":"WebPage",
-   "@id":"https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html"
-   },
-  "name":"Coronavirus disease (COVID-19): information from the government of Canada",
-  "text":"Coronavirus disease (COVID-19) information for Canadians including links to disease updates, travel advice, how to be prepared, symptoms, prevention, risk, Canada's response, current case numbers, answers to questions and links to printable resources.",
-  "spatialCoverage": {
-   "@type": "Country",
-   "name": "Canada"
-   },
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "category":"https://www.wikidata.org/wiki/Q81068910",
-  "datePosted":"2020-05-09",
-  "diseasePreventionInfo":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks.html",
-  "diseaseSpreadStatistics":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection.html",
-  "newsUpdatesAndGuidelines":"https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html",
-  "quarantineGuidelines":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks.html",
-  "travelBans":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/latest-travel-health-advice.html",
-  "governmentBenefitsInfo": {
-   "@type": "GovernmentService",
-   "name": "Canada's COVID-19 Economic Response Plan",
-   "url":  "https://www.canada.ca/en/department-finance/economic-response-plan.html",
-   "provider": {
-    "@id": "#wb-publisher"
-    },
-   "serviceType": "Emergency relief",
-   "audience": {
-   "@type": "Audience",
-   "name": "Canadians affected by COVID-19"
-   }
-  }
- }
    -
    -
    -
    -
    -
    - -
    -

    FAQPage

     -

    When to use

    -

    Use to add a set of headings and their respective content that provide answers for the key tasks associated with a page.

    - -

    Use on:

    -
      -
    • service initiation pages
      • -
    • guidance documents
      • -
    • actual FAQs
      • -
    -

    FAQ pages are strongly discouraged on Canada.ca in most cases.

    -
  • Avoiding FAQs, with one exception (blog post)
    • - -

    Official guidance

    - -
    -
    -

    Code

    -
    -
    -
    - JSON-LD -
      -
    • Add id attribute to the JSON-LD HTML script element named “wb-script”.
      • -
    • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
      • -
    - 
    <script id="wb-script"
-type="application/ld+json">
- {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type": "FAQPage",
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "headline": "How much you can get",
-  "description":"Calculate your payments, shared custody and your payments, payments are recalculated in July, Related provincial and territorial benefits, children with a disability, repaying an overpayment",
-  "mainEntity": [{
-   "@type": "Question",
-   "name": "Calculate your payments",
-   "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-   "acceptedAnswer": {
-    "@type": "Answer",
-    "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-    "text": "<p>Use the child and family benefits calculator to help plan your budget.</p>
-     <p><a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/child-family-benefits-calculator.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q1-001'>  Calculate how much you can get</a></p>
-
-     <p><a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q1-002#math'>See the math behind CCB payments</a></p>"
-     }
-	  },
- {
-   "@type": "Question",
-   "name": "Shared custody and your payments",
-   "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-   "acceptedAnswer": {
-    "@type": "Answer",
-    "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-    "text": "
-     <p>Each parent with shared custody will get 50% of what they would have gotten if they had full custody of the child, calculated based on their own adjusted family net income.</li>
-     <p>The CRA will not split the amount using other percentages, or give the full amount to one of the parents if CRA considers you to have shared custody.</li>
-     <p>If a child only lives with you <strong>part time</strong>, go to  <a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-before-you-apply.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q2-001#shared'>Custody arrangements and your benefits</a> to find out if you are considered to have shared custody.</p>"
-    }
-  }]
- }
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
- </main>
-</body>
    -
    -
    - AEM -
      -

      Add the code in the Structured data component in the page properties.

      -
    - 
    {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type": "FAQPage",
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "headline": "How much you can get",
-  "description":"Calculate your payments, shared custody and your payments, payments are recalculated in July, Related provincial and territorial benefits, children with a disability, repaying an overpayment",
-  "mainEntity": [{
-   "@type": "Question",
-   "name": "Calculate your payments",
-   "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-   "acceptedAnswer": {
-    "@type": "Answer",
-    "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-    "text": "<p>Use the child and family benefits calculator to help plan your budget.</p><p><a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/child-family-benefits-calculator.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q1-001'>  Calculate how much you can get</a></p><p><a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q1-002#math'>See the math behind CCB payments</a></p>"
-     }
-	  },
- {
-   "@type": "Question",
-   "name": "Shared custody and your payments",
-   "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-   "acceptedAnswer": {
-    "@type": "Answer",
-    "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-    "text": "<p>Each parent with shared custody will get 50% of what they would have gotten if they had full custody of the child, calculated based on their own adjusted family net income.</li><p>The CRA will not split the amount using other percentages, or give the full amount to one of the parents if CRA considers you to have shared custody.</li><p>If a child only lives with you <strong>part time</strong>, go to  <a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-before-you-apply.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q2-001#shared'>Custody arrangements and your benefits</a> to find out if you are considered to have shared custody.</p>"
-    }
-  }]
- }
    -
    - -
    -
    -
    -
    -
    - -
    -

    HowTo

     -

    When to use

    -

    Use for tasks that require a very clear step-by-step approach.

    - -

    Official guidance

    - - -
    -
    -

    Code

    -
    -
    -
    - JSON-LD -
      -
    • Add id attribute to the JSON-LD HTML script element named “wb-script”.
      • -
    • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
      • -
    - 
    <script id="wb-script"
-type="application/ld+json">
- {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type":"HowTo",
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "description":"The Canada child benefit (CCB) is a tax-free monthly payment made to eligible families to help with the cost of raising children under 18 years of age. ",
-  "name":"Canada child benefit",
-  "step":[{
-   "@type":"HowToStep",
-   "image":"http://test.canada.ca/covid-19-guidance/proto/structured_data/step_1.svg",
-   "name":"Who can apply",
-   "url":"https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-before-you-apply.html",
-   "Position":1,
-   "text":"Who can get the Canada child benefit, who is primarily responsible for the care and upbringing of the child, and impact of shared custody on your benefits"
-   },
-   {"@type":"HowToStep",
-   "image":"http://test.canada.ca/covid-19-guidance/proto/structured_data/step_2.svg",
-   "name":"Apply",
-   "url":"http://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-apply.html",
-   "position":2,
-   "text":"When and how to apply, and when you need to provide additional documents"
-   }
-  ]}
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
- </main>
-</body>
    -
    -
    - AEM -

    Add the code in the Structured data component in the page properties.

    - 
    {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type":"HowTo",
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "description":"The Canada child benefit (CCB) is a tax-free monthly payment made to eligible families to help with the cost of raising children under 18 years of age. ",
-  "name":"Canada child benefit",
-  "step":[{
-   "@type":"HowToStep",
-   "image":"http://test.canada.ca/covid-19-guidance/proto/structured_data/step_1.svg",
-   "name":"Who can apply",
-   "url":"https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-before-you-apply.html",
-   "Position":1,
-   "text":"Who can get the Canada child benefit, who is primarily responsible for the care and upbringing of the child, and impact of shared custody on your benefits"
-   },
-   {"@type":"HowToStep",
-   "image":"http://test.canada.ca/covid-19-guidance/proto/structured_data/step_2.svg",
-   "name":"Apply",
-   "url":"http://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-apply.html",
-   "position":2,
-   "text":"When and how to apply, and when you need to provide additional documents"
-   }
-  ]}
    -
    - -
    -
    -
    -
    -
    - -
    -

    Speakable

     -

    When to use

    -

    Use to identify any section of content that would be best suitable for text-to-speech: the part of the page that encapsulates the most important content people are looking for on that page.

    - -

    You can use this schema on any page.

    - -

    Official guidance

    - - -
    -
    -

    Code

    -
    -
    -
    - JSON-LD -
      -
    • Add id attribute to the JSON-LD HTML script element named “wb-script”.
      • -
    • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
      • -
    - 
    <script id="wb-script"
-type="application/ld+json">
- {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type": "WebPage",
-  "name": "How much Canada Child Benefit you could get",
-  "speakable":{
-   "@type": "SpeakableSpecification","cssSelector": [".speakable1"]
-   },
-  "url":"https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html"}
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
-  <p class="speakable1	">The maximum Canada child benefit you could get is $6,639 per year for children under 6, and $5,602 per year for children aged 6 to 17.</p>
- </main>
-</body>
    -
    -
    - AEM -

    Add the code in the Structured data component in the page properties.

    - 
    {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type": "WebPage",
-  "name": "How much Canada Child Benefit you could get",
-  "speakable":{
-   "@type": "SpeakableSpecification","cssSelector": [".speakable1"]
-   },
-  "url":"https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html"}
    -
    -
    -
    -
    -
    - - -
    -

    Event

     -

    When to use

    -

    Use for events.

    - -

    Official guidance

    - - - -
    -
    -

    Code

    -
    -
    -
    - JSON-LD -
      -
    • Add id attribute to the JSON-LD HTML script element named “wb-script”.
      • -
    • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
      • -
    - - 
    <script
-type="application/ld+json">
- {
-  "@context": "http://schema.org",
-  "@type": "Event",
-  "name": "Great event under the sun",
-	"@id": "#wb-main",
-  "startDate": "2020-07-15",
-  "location": {
-   "@type": "Place",
-   "name": "Parliament Hill",
-    "address": {
-    "@type": "PostalAddress",
-    "addressLocality": "Ottawa",
-    "addressRegion": "ON",
-    "postalCode": "K1A 0A9",
-    "streetAddress": "Wellington Street"
-    }
-   },
-  "image": "./canada-day.jpg",
-  "description": "Celebrating the sun in the nation's capital."
- }
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
- </main>
-</body>
    -
    -
    - AEM -

    Add the code in the Structured data component in the page properties.

    - - 
    {
-"@context": "http://schema.org",
-"@type": "Event",
-"name": "Great event under the sun",
-"@id": "#wb-main",
-"startDate": "2020-07-15",
-"location": {
-"@type": "Place",
-"name": "Parliament Hill",
-"address": {
-"@type": "PostalAddress",
-"addressLocality": "Ottawa",
-"addressRegion": "ON",
-"postalCode": "K1A 0A9",
-"streetAddress": "Wellington Street"
-}
-},
-"image": "./canada-day.jpg",
-"description": "Celebrating the sun in the nation's capital."
-}
    -
    - -
    -
    -
    -
    -
    - -

    Additional resources

    - - - -
    - -
    - - -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    - -
    -
    -
    - - -
    -
    -
    Date modified:
    -
    -
    -
    - -
    -
    - - - - - - - - - - {% include footer-en.html %} - - - - - - - - - - - diff --git a/layout/_contact-aside-demo.html b/layout/_contact-aside-demo.html deleted file mode 100644 index d815c64e63..0000000000 --- a/layout/_contact-aside-demo.html +++ /dev/null @@ -1,409 +0,0 @@ ---- ---- - - - - - - Contact aside - Demo and code - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Contact aside: Demo and code

    -
    -
    -

    Consistent layout to concisely show links to contact pages or simple contact information as an aside.

    -
    -
    -
    -
      - -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -
    -
    - - - - - -
    - - - -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    -
    - - - -
    - - - - - - - - -
    - - - - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -

    Latest changes

    -
    -
    Version x.x:
    -
    .
    -
    -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - diff --git a/layout/_contact-aside-rationale.html b/layout/_contact-aside-rationale.html deleted file mode 100644 index 2cb3878ba3..0000000000 --- a/layout/_contact-aside-rationale.html +++ /dev/null @@ -1,219 +0,0 @@ ---- ---- - - - - - - Contact aside - Rationale - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Contact aside: Rationale

    -
    -
    -

    Consistent layout to concisely show links to contact pages or simple contact information as an aside.

    -
    -
    -
    -
      - -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -

    Rationale, research and accessibility

    -
    - Layout choices -
      -
    • Redirecting users to primary self-service option first - online
      • -
    • Forcing choices (use of expand collapse for secondary options, smart question for audiences and url parameters) - make sure they get the right number
      • -
    • Using an interactive pattern to bring attention to what needs to be prepared before calling/
      • -
    -
    -
    -

    Accessible use

    - -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/layout/_contact-aside.html b/layout/_contact-aside.html deleted file mode 100644 index 96298ffbbb..0000000000 --- a/layout/_contact-aside.html +++ /dev/null @@ -1,234 +0,0 @@ ---- ---- - - - - - - Contact aside - Design guidelines - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Contact aside: Design guidelines

    -
    -
    -

    Consistent layout to concisely show links to contact pages or simple contact information as an aside.

    -
    -
    -
    -
      -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -

    On this page

    - -
    -
    -

    Design specifications

    -
    -
    -
    - Contact information block. -
    -
    -
    -
      -
    • -
      - 1. Link -

      The hyperlink text must clearly describe, in context, what the person will find on the destination page.

      -
      -
      • -
    • -
      - 2. Description -

      Use action verbs, or simply list keywords to summarize of the information or tasks that can be accomplished on the page it links to.

      -
      -
      • -
    -
    -
    -
    -
    -

    Usage

    -

    Link and description (doormats) area used in this pattern:

    - -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/layout/_service-contact-demo.html b/layout/_service-contact-demo.html deleted file mode 100644 index 4911b1fc2b..0000000000 --- a/layout/_service-contact-demo.html +++ /dev/null @@ -1,409 +0,0 @@ ---- ---- - - - - - - Service contact - Demo and code - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Service contact: Demo and code

    -
    -
    -

    Consistent layout for service contact, including online sign in alternative.

    -
    -
    -
    -
      - -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -
    -
    - - - - - -
    - - - -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    -
    - - - -
    - - - - - - - - -
    - - - - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -

    Latest changes

    -
    -
    Version x.x:
    -
    .
    -
    -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - diff --git a/layout/_service-contact-rationale.html b/layout/_service-contact-rationale.html deleted file mode 100644 index 7ccc6cf26a..0000000000 --- a/layout/_service-contact-rationale.html +++ /dev/null @@ -1,219 +0,0 @@ ---- ---- - - - - - - Service contact - Rationale - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Service contact: Rationale

    -
    -
    -

    Consistent layout for service contact, including online sign in alternative.

    -
    -
    -
    -
      - -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -

    Rationale, research and accessibility

    -
    - Layout choices -
      -
    • Redirecting users to primary self-service option first - online
      • -
    • Forcing choices (use of expand collapse for secondary options, smart question for audiences and url parameters) - make sure they get the right number
      • -
    • Using an interactive pattern to bring attention to what needs to be prepared before calling/
      • -
    -
    -
    -

    Accessible use

    - -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/layout/_service-contact.html b/layout/_service-contact.html deleted file mode 100644 index 60c0f31189..0000000000 --- a/layout/_service-contact.html +++ /dev/null @@ -1,234 +0,0 @@ ---- ---- - - - - - - Service contact - Design guidelines - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Service contact: Design guidelines

    -
    -
    -

    Consistent layout for service contact, including online sign in alternative.

    -
    -
    -
    -
      -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -

    On this page

    - -
    -
    -

    Design specifications

    -
    -
    -
    - Contact information block. -
    -
    -
    -
      -
    • -
      - 1. Link -

      The hyperlink text must clearly describe, in context, what the person will find on the destination page.

      -
      -
      • -
    • -
      - 2. Description -

      Use action verbs, or simply list keywords to summarize of the information or tasks that can be accomplished on the page it links to.

      -
      -
      • -
    -
    -
    -
    -
    -

    Usage

    -

    Link and description (doormats) area used in this pattern:

    - -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/layout/demos/contact-aside/wet4/_link-list.html b/layout/demos/contact-aside/wet4/_link-list.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/layout/demos/contact-aside/wet4/_mail-only.html b/layout/demos/contact-aside/wet4/_mail-only.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/layout/demos/contact-aside/wet4/_phone-mail.html b/layout/demos/contact-aside/wet4/_phone-mail.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/layout/demos/contact-aside/wet4/_phone-only.html b/layout/demos/contact-aside/wet4/_phone-only.html deleted file mode 100644 index a3ba7cce77..0000000000 --- a/layout/demos/contact-aside/wet4/_phone-only.html +++ /dev/null @@ -1,119 +0,0 @@ ---- ---- - - - - - - - Contact – phone only example - Canada.ca Design System - - - - - - - - - - - -
    - -
    -
    Before you call
    -
    -

    To verify your identity, you'll need your:

    -
      -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
    -

    - - -

    -
    -
    Phone number
    -

    1-800-xxx-xxxx

    Outside Canada and the US*:
    1-613-xxx-xxxx

    -
    Hours
    -
    (in local time) - - - - - - - - - - - - - - - - - - - - - -
    DayHours
    Mon-Fri9 am to 9 pm
    Sat9 am to 5 pm
    SunClosed
    -
    - Wait times and holidays -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    DayWait times
    Mon-TueLong wait times
    WedMedium wait times
    Thu-SatShort wait times
    SunClosed
    -
    -

    Holiday closures 2019:

    -
      -
    • April 19 (Good Friday)
      • -
    • April 22 (Easter Monday)
      • -
    • May 20 (Victoria Day)
      • -
    • (etc.)
      • -
    -
    - *When calling outside of Canada lines operate in Eastern time -
    -
    - -
    - - - \ No newline at end of file diff --git a/layout/demos/service-contact/wet4/_multi-channel-audience.html b/layout/demos/service-contact/wet4/_multi-channel-audience.html deleted file mode 100644 index 912c9f6f19..0000000000 --- a/layout/demos/service-contact/wet4/_multi-channel-audience.html +++ /dev/null @@ -1,322 +0,0 @@ ---- ---- - - - - - - - Contact – phone only example - Canada.ca Design System - - - - - - - - - - - -
    - -
    - What type of address do you need to change? -
      -
    • - - -
      • -
    • - - -
      • -
    -
    - - - -
    - - - - - - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    - -
    - {% include footer-en.html %} - - - - - - - diff --git a/survey/_analytics.html b/survey/_analytics.html deleted file mode 100644 index 143419537e..0000000000 --- a/survey/_analytics.html +++ /dev/null @@ -1,341 +0,0 @@ ---- ---- - - - - - - Web analytics, surveys, and user feedback - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    - - - -

    Canada.ca analytics, surveys, and user feedback

    - - - - - - - -
    - - - -

    Every day, over a million visitors come to Canada.ca to get information and access government services. Use the data from these tools to see how people are interacting with the Government of Canada online. - -

    - - -

    Web analytics

    -

    Quantitative data tells us what people are doing on the site

    -
    - - - -
    - -
    -
    -

    Page analytics tool

    -

    Get analytics data for any Canada.ca web page.

    -
    -
    - -
    -
    -

    Recent activity on Canada.ca

    -

    Web traffic and top viewed content on Canada.ca for the last 30 days.

    -
    -
    - -
    -
    -

    Canada.ca analytics open dataset

    -

    Access monthly Canada.ca usage data for the past 36 months.

    -
    -
    - -
    -
    -

    Top tasks for Canada.ca

    -

    The 100 most in-demand tasks across the Government of Canada.

    -
    -
    - - -
    - - -

    Surveys and user feedback

    -

    Quantitative and qualitative data helps us understand the Canada.ca user experience

    -
    - - - -
    - -
    -
    -

    GC Task Success Survey

    -

    Web exit survey measuring the experience of completing tasks on Canada.ca

    -
    -
    - -
    -
    -

    Page feedback tool

    -

    Uncover page-level issues affecting task performance

    -
    -
    - - - - -
    - - - - - - -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    - -
    - {% include footer-en.html %} - - - - - - - diff --git a/survey/_clusters.html b/survey/_clusters.html deleted file mode 100644 index 538973cc81..0000000000 --- a/survey/_clusters.html +++ /dev/null @@ -1,784 +0,0 @@ ---- ---- - - - - - - Choosing and writing tasks for the GC Task Success Survey - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    - - - -

    Clustering content test

    - - -

    - On this page -

    - - - -

    - Latest quarterly results -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    Date rangeQ2: July 1 to September 30, 2022
    - -

    Previous results available on GCPedia

    Responses100 visitors surveyed
    Task completionInsufficient data - - - - -
    -
    -

    Insufficient data

    -
    -
    -

    The number of responses is too low to perform an analysis.

    -

    You can review responses from a larger timeframe using Adobe Analytics or by downloading raw data from the Feedback viewer.

    -

    Contact Principal Publisher to discuss how to gather additional data.

    -
    -
    -
    Ease55.1% of respondents said it was “easy” or “very easy” to do what they needed to do online
    Satisfaction44.1% of respondents were “satisfied” or “very satisfied” with their experience on the website
    Margin of errorThe margin of error for these results is 15%. Note that the margin of error displayed is the average of the margins of error for the three scores (task completion, ease and satisfaction) for ease of understanding.
    Data reliability

    The margin of error is considered to be very high (above 10%). There is insufficient data to draw conclusions.

    - - -
    -
    - - -

    Rest of the page content here....

    - - -

    Automated analysis of latest quarterly comments

    - -

    Experimental

    - -

    This experiment uses machine learning to automatically group similar comments - giving you a glimpse into potential issues.

    - -

    - - How we're using data science to group comments -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Task nameCheck your application status
    Number of comments15,738 comments analyzed
    Comment groups11 comment groups identified
    - - -
    -
    -

    Grouping comments using data science

    -
    -
    - About machine learning algorithm... -
    -
    - - -
    - - -Download CSV of all comments - -
    - - - - - -

    Examples of comments

    - - - - -
      - -
    • -
      - - Group 1 | 25% of comments | account, logging in, status - - -

      This group includes 450 comments (25% of all feedback) for this task.

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - Comment examples - -
      - - Error 403 kept showing whenever i try to login - -
      - - Error 403 keeps happening when I tried to log into my account. After 4-5 times keeping trying again, I finally logged in but when I was linking an application, the error happened one more time. It's really frustrating. - -
      -
      -
      • - - -
    • -
      - - Group 2 | 20% of comments | GCKey, logging in, redirect - - -

      This group includes 400 comments (20% of all feedback) for this task.

      - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - Comment examples - -
      - - Error 403 kept showing whenever i try to login - -
      - - Error 403 keeps happening when I tried to log into my account. After 4-5 times keeping trying again, I finally logged in but when I was linking an application, the error happened one more time. It's really frustrating. - -
      -
      -
      • - - -
    • -
      - - Group 3 | 10% of comments | error 403, logging in, expired - - -

      This group includes 350 comments (10% of all feedback) for this task.

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - Comment examples - -
      - - Error 403 kept showing whenever i try to login - -
      - - Error 403 keeps happening when I tried to log into my account. After 4-5 times keeping trying again, I finally logged in but when I was linking an application, the error happened one more time. It's really frustrating. - -
      -
      -
      • - - - -
    - - - - - - - -

    Automated comment analysis

    - - - -

    This experiment uses machine learning to automatically group similar comments - giving you a glimpse into potential issues.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Task nameCheck your application status
    Number of comments12 comments
    Comment groupsInsufficient data to perform grouping
    - Contact Principal Publisher to improve your survey data
    - - - - - -

    Examples of comments

    -
    - - Ungrouped | 12 comments - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - Comment - -
    - - Error 403 kept showing whenever i try to login - -
    - - Error 403 keeps happening when I tried to log into my account. After 4-5 times keeping trying again, I finally logged in but when I was linking an application, the error happened one more time. It's really frustrating. - -
    - -
    -

    - - -Download CSV of all comments -

    - - -

    - Download all responses and comments -

    - -

    If you find the automated analysis is not accurate or you would prefer to do your own analysis, you can download raw survey data using the Feedback Viewer.

    - - - - -Download CSV of all comments - - - - - - - - - - - - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    - -
    - {% include footer-en.html %} - - - - - - - diff --git a/survey/_take-action.html b/survey/_take-action.html deleted file mode 100644 index 342d20c5f5..0000000000 --- a/survey/_take-action.html +++ /dev/null @@ -1,344 +0,0 @@ ---- ---- - - - - - - Making evidence-based decisions - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    - - - -

    Making evidence-based decisions

    - - -
    - -
    -
    - -
    -
    - - - -

    On this page

    - - - -

    Share your results and insights

    - - -

    Through your quantitative and qualitative analysis, you want to help people understand:

    -
      -
    • context (volume, key dates, trends, why (you think) something is happening)
      • -
    • the issues people are reporting
      • -
    • possible paths to action or where additional data and research is needed
      • -
    • before and after results from iterative improvements
      • -
    - - -

    Corroborate insights with other data sources

    -

    Incorporating other data points helps build a holistic understanding of task performance.

    - -
    - - Call centres and social media -

    Are people calling or emailing for help on the same issues?

    - -

    Contact your social media team to check if they are seeing similar questions.

    - -
    - - -
    - Web analytics and search trends - -

    These are some common questions you may want to answer to understand how people are using pages related to your tasks:

    -
      -
    • What pages of the task are most visited? -
    • What paths did people follow to complete the task?
      • -
    • Where are they exiting the site / dropping out?
      • -
    • What is the bounce rate?
      • -
    • How much traffic comes directly from search engines? What terms do people use?
      • -
    • Are the majority of users using a mobile device?
      • -
    - - -

    Contact your institutional analytics representative (internal only) to get help with linking survey data to web analytics data

    -

    Read the user guide to learn how to analyze survey data in Adobe Analytics (internal only). -

    -
    - -
    - - - Usability studies and research -

    Contact your usability specialist to check for usability studies or research on the topic.

    - - -
    - - - - -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    - -
    - {% include footer-en.html %} - - - - - - - diff --git a/survey/_tasks-covid.html b/survey/_tasks-covid.html deleted file mode 100644 index 7132103599..0000000000 --- a/survey/_tasks-covid.html +++ /dev/null @@ -1,208 +0,0 @@ ---- ---- - - - - - - - Task completion survey - Canada.ca - - - - - - - - - - - - - -
    -
    - - - - - -
    - -

    Task completion survey

    - -
    - -
    - -
    -
    - - -
    - {% include footer-en.html %} - - - - - - diff --git a/survey/_tasks-cra.html b/survey/_tasks-cra.html deleted file mode 100644 index 54952c2ede..0000000000 --- a/survey/_tasks-cra.html +++ /dev/null @@ -1,208 +0,0 @@ ---- ---- - - - - - - - Task completion survey - Canada.ca - - - - - - - - - - - - - -
    -
    - - - - - -
    - -

    Task completion survey

    - -
    - -
    - -
    -
    - - -
    - {% include footer-en.html %} - - - - - - diff --git a/survey/_tasks.html b/survey/_tasks.html deleted file mode 100644 index 3536bed93e..0000000000 --- a/survey/_tasks.html +++ /dev/null @@ -1,208 +0,0 @@ ---- ---- - - - - - - - Task completion survey - Canada.ca - - - - - - - - - - - - - -
    -
    - - - - - -
    - -

    Task completion survey

    - -
    - -
    - -
    -
    - - -
    - {% include footer-en.html %} - - - - - -