ARCHIVÉ - Exemples de conceptions accessibles

Avertissement Cette information est archivée parce qu'elle est désuete et n'est plus pertinente.

Contenu archivé

Information archivée dans le Web à des fins de consultation, de recherche ou de tenue de documents. Cette dernière n’a aucunement été modifiée ni mise à jour depuis sa date de mise en archive. Les pages archivées dans le Web ne sont pas assujetties aux normes qui s’appliquent aux sites Web du gouvernement du Canada. Conformément à la Politique de communication du gouvernement du Canada, vous pouvez obtenir cette information dans un autre format en communiquant avec nous.

Table des matières

1.0 Information non tributaire de la couleur

1.1 Exemple

État de tous les projets
Nom du projet Chef de projet État du projet
RTSP Gagnon, Jean Annulé
Services Web Untel, Pierre En cours
Renouvellement de la paie Gagnon, Jean Terminé
SRTS Unetelle, Diane En cours

1.2 Code CSS

.alignLeft{text-align: left;}
.fondrouge_eoad{background-color: #CC0000; color: #FFFFFF; font-weight: bold;}
.fondnoir_eoad{background-color: #000000; color: #FFFFFF; font-weight: bold;}
.fondbleu_eoad{background-color: #0000FF; color: #FFFFFF; font-weight: bold;}

1.3 Code (X)HTML

<table>
<caption class="alignLeft"><strong>État de tous les projets</strong></caption>
<thead>
<tr>
<th scope="col">Nom du projet</th>
<th scope="col">Chef de projet</th>
<th scope="col">État du projet</th>
</tr>
</thead>
<tbody>
<tr>
<td>RTSP</td>
<td>Gagnon, Jean</td>
<td class="fondrouge_eoad">Annulé</td>
</tr>
<tr>
<td>Services Web</td>
<td>Untel, Pierre</td>
<td class="fondnoir_eoad">En cours</td>
</tr>
<tr>
<td>Renouvellement de la paie</td>
<td>Gagnon, Jean</td>
<td class="fondbleu_eoad">Terminé</td>
</tr>
<tr>
<td>SRTS</td>
<td>Unetelle, Diane</td>
<td class="fondnoir_eoad">En cours</td>
</tr>
</tbody>
</table>

2.0 Tableau de données accessible

2.1 Exemple

Employés actuels
Nom Titre Salaire bihebdomadaire
Brut Net
Unetelle, Diane Gestionnaire 2 160,68 $ 1 296,41 $
Untel, Pierre Directeur 2 880,90 $ 1 584,50 $
Gagnon, Jean Programmeur-analyste 1 440,45 $ 965,10 $

2.2 Code CSS

.alignLeft{text-align: left;}
.alignRight{text-align: right;}

2.3 Code (X)HTML

<table>
<caption class="alignLeft"><strong>Employés actuels</strong></caption>
<thead>
<tr>
<th rowspan="2" colspan="1" id="head1">Nom</th>
<th rowspan="2" colspan="1" id="head2">Titre</th>
<th rowspan="1" colspan="2" id="head3">Salaire bihebdomadaire</th>
</tr>
<tr>
<th id="head31" headers="head3">Brut</th>
<th id="head32" headers="head3">Net</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="head1">Unetelle, Diane</td>
<td headers="head2">Gestionnaire</td>
<td headers="head3 head31" class="alignRight">2 160,68 $</td>
<td headers="head3 head32" class="alignRight">1 296,41 $</td>
</tr>
<tr>
<td headers="head1">Untel, Pierre</td>
<td headers="head2">Directeur</td>
<td headers="head3 head31" class="alignRight">2 880,90 $</td>
<td headers="head3 head32" class="alignRight">1 584,50 $</td>
</tr>
<tr>
<td headers="head1">Gagnon, Jean</td>
<td headers="head2">Programmeur-analyste</td>
<td headers="head3 head31" class="alignRight">1 440,45 $</td>
<td headers="head3 head32" class="alignRight">965,10 $</td>
</tr>
</tbody>
</table>

Haut de la page

3.0 Texte accessible (polices de taille relative)

3.1 Exemple

2005-10-28

Monsieur, Madame,

Voici un exemple de lettre datée. La date est inscrite dans le coin supérieur droit, et la lettre commence par « Monsieur, Madame, » et se termine par l'expression « Veuillez agréer l'expression de mes sentiments les meilleurs. », suivie du nom de l'expéditeur.

Veuillez agréer l'expression de mes sentiments les meilleurs.
Anonyme

3.2 Code CSS

.greyBox_eoad{width: 67%; background-color: #CCCCCC; border: none; padding: 23px 12px 23px 12px; text-align: left;}
.indent1_eoad{padding-left: 5%; border: none;}
.indent2_eoad{padding-left: 10%; border: none;} .alignCenter{align: center;} .alignRight{align: right;}

3.3 Code (X)HTML

<div class="alignCenter"><div class="greyBox_eoad">
<p class="alignRight">2005-10-28</p>
<p>Monsieur, Madame,</p>
<p>Voici un exemple de lettre datée. La date est inscrite dans le coin supérieur droit, et la lettre commence par &#171;&#160;Monsieur, Madame,&#160;&#187; et se termine par l'expression &#171;&#160;Veuillez agréer l'expression de mes sentiments les meilleurs.&#160;&#187;, suivie du nom de l'expéditeur.</p>
<div class="indent1_eoad">Veuillez agréer l'expression de mes sentiments les meilleurs.</div>
<div class="indent2_eoad">Anonyme</div>
</div></div>

4.0 Formulaire accessible sans erreur de saisie de la part du client

4.1 Exemple

Veuillez remplir le formulaire ci-dessous dans le cadre de l'enquête.






















Dans quelles provinces et territoires avez-vous travaillé? (obligatoire)


















4.2 Code CSS

.error_eoad{color: #CC0000;}

4.3 Code (X)HTML

<p>Veuillez remplir le formulaire ci-dessous dans le cadre de l'enquête.</p>

<form action="#" method="post">
<div>
<label for="fnamepnom">Prénom <strong>(obligatoire)</strong></label><br />
<input type="text" id="fnamepnom" name="fnamepnom" size="20" maxlength="20" />
<br /><br />

<label for="lnamenom">Nom <strong>(obligatoire)</strong></label><br />
<input type="text" id="lnamenom" name="lnamenom" size="20" maxlength="20" /><br />
<br />

<label for="hphoned">Numéro de téléphone à domicile, incluant l'indicatif régional (p. ex., 123-456-7890) <strong>(obligatoire)</strong></label><br />
<input type="text" id="hphoned" name="hphoned" size="12" maxlength="12" value="123-456-7890" />
<br /><br />

<label for="wphonet">Numéro de téléphone au travail, incluant l'indicatif régional (p. ex., 123-456-7890) <strong>(obligatoire)</strong>
</label><br />
<input type="text" id="wphonet" name="wphonet" size="12" maxlength="12" />
<br /><br />

<label for="wphonexpt">Numéro de poste du téléphone au travail</label><br />
<input type="text" id="wphonexpt" name="wphonexpt" size="5" maxlength="5" />
<br /><br />

<label for="sexsexe">Sexe <strong>(obligatoire)</strong></label><br />
<select id="sexsexe" name="sexsexe">
<option value=""></option>
<option value="m">Masculin</option>
<option value="f">Féminin</option>
</select>
<br /><br />

<label for="yearstemps">Depuis combien de temps travaillez vous pour le département? <strong>(obligatoire)</strong></label><br />
<select id="yearstemps" name="yearstemps">
<option value=""></option>
<option value="0">de 0 à 5 ans</option>
<option value="1">de 6 à 10 ans</option>
<option value="2">de 11 à 20 ans</option>
<option value="3">20 ans ou plus</option>
</select>
<br /><br />
<fieldset>
<legend>Dans quelles provinces et territoires avez-vous travaillé? <strong>(obligatoire)</strong></legend>
<input type="checkbox" name="provab" id="provab" value="1" /><label for="provab">Alberta</label><br />
<input type="checkbox" name="provbc" id="provbc" value="1" /><label for="provbc">Colombie-Britannique</label><br />
<input type="checkbox" name="provpe" id="provpe" value="1" /><label for="provpe">Île-du-Prince-Édouard</label><br />
<input type="checkbox" name="provmb" id="provmb" value="1" /><label for="provmb">Manitoba</label><br />
<input type="checkbox" name="provnb" id="provnb" value="1" /><label for="provnb">Nouveau-Brunswick</label><br />
<input type="checkbox" name="provns" id="provns" value="1" /><label for="provns">Nouvelle-Écosse</label><br />
<input type="checkbox" name="provnu" id="provnu" value="1" /><label for="provnu">Nunavut</label><br />
<input type="checkbox" name="provon" id="provon" value="1" /><label for="provon">Ontario</label><br />
<input type="checkbox" name="provqc" id="provqc" value="1" /><label for="provqc">Québec</label><br />
<input type="checkbox" name="provsk" id="provsk" value="1" /><label for="provsk">Saskatchewan</label><br />
<input type="checkbox" name="provnl" id="provnl" value="1" /><label for="provnl">Terre-Neuve-et-Labrador</label><br />
<input type="checkbox" name="provnt" id="provnt" value="1" /><label for="provnt">Territoires du Nord-Ouest</label><br />
<input type="checkbox" name="provyt" id="provyt" value="1" /><label for="provyt">Yukon</label>
</fieldset>
<br />
<label for="visminvis">Appartenez-vous à une minorité visible?</label><br />
<select id="visminvis" name="visminvis">
<option value=""></option>
<option value="y">Oui</option>
<option value="n">Non</option>
</select>
<br /><br />

<label for="dis">Avez-vous besoin d'une ou de plusieurs technologies adaptées pour effectuer vos t&acirc;ches courantes?</label><br />
<select id="dis" name="dis">
<option value=""></option>
<option value="y">Oui</option>
<option value="n">Non</option>
</select>
<br /><br />

<input type="submit" value="Envoyer" />
</div>
</form>

Haut de la page

5.0 Formulaire accessible avec erreurs de saisie de la part du client

5.1 Exemple

Le formulaire n'a pu être soumis car 4 erreurs ont été trouvées.

Veuillez remplir le formulaire ci-dessous dans le cadre de l'enquête.























Dans quelles provinces et territoires avez-vous travaillé? (obligatoire)
Erreur 4 : Au moins une province ou territoire devrait être selectionnée.


















5.2 Code CSS

.error_eoad{color: #CC0000;}

5.3 Code (X)HTML

<div>Le formulaire n'a pu être soumis car 4 erreurs ont été trouvées.</div>
<ul>
<li><a href="#lnamenom2">Erreur&#160;1&#160;: Vous devez préciser votre nom.</a></li>
<li><a href="#wphonet2">Erreur&#160;2&#160;: Vous devez préciser votre numéro de téléphone au travail.</a></li>
<li><a href="#sexsexe2">Erreur&#160;3&#160;: Vous devez préciser votre sexe.</a></li>
<li><a href="#provaab">Erreur 4 : Au moins une province ou territoire devrait être selectionnée.</a></li>
</ul>

<p>Veuillez remplir le formulaire ci-dessous dans le cadre de l'enquête.</p>

<form action="#" method="post">
<div>
<label for="fnamepnom2">Prénom <strong>(obligatoire)</strong></label><br />
<input type="text" id="fnamepnom2" name="fnamepnom2" size="20" maxlength="20" value="Pierre" />
<br /><br />

<label for="lnamenom2">Nom <strong>(obligatoire)</strong><br />
<span class="error_eoad"><strong>Erreur&#160;1&#160;: Vous devez préciser votre nom.</strong></span></label><br />
<input type="text" id="lnamenom2" name="lnamenom2" size="20"
maxlength="20" /><br />
<br /><br />

<label for="hphoned2">Numéro de téléphone à domicile, incluant l'indicatif régional (p. ex., 123-456-7890) <strong>(obligatoire)</strong></label><br />
<input type="text" id="hphoned2" name="hphoned2" size="12" maxlength="12" value="123-456-7890" />
<br /><br />

<label for="wphonet2">Numéro de téléphone au travail, incluant l'indicatif régional (p. ex., 123-456-7890) <strong>(obligatoire)</strong><br />
<span class="error_eoad"><strong>Erreur&#160;2&#160;: Vous devez préciser votre numéro de téléphone au travail.</strong></span></label><br />
<input type="text" id="wphonet2" name="wphonet2" size="12" maxlength="12" />
<br /><br />

<label for="wphonexpt2">Numéro de poste du téléphone au travail</label><br />
<input type="text" id="wphonexpt2" name="wphonexpt2" size="5" maxlength="5" />
<br /><br />

<label for="sexsexe2">Sexe <strong>(obligatoire)</strong><br />
<span class="error_eoad"><strong>Erreur&#160;3&#160;: Vous devez préciser votre sexe.</strong></span></label><br />
<select size="2" id="sexsexe2" name="sexsexe2">
<option value=""></option>
<option value="m">Masculin</option>
<option value="f">Féminin</option>
</select>
<br /><br />

<label for="yearstemps2">Depuis combien de temps travaillez vous pour le département? <strong>(obligatoire)</strong></label><br />
<select size="4" id="yearstemps2" name="yearstemps2">
<option value=""></option>
<option value="0">de 0 à 5 ans</option>
<option value="1" selected="selected">de 6 à 10
ans</option>
<option value="2">de 11 à 20 ans</option>
<option value="3">20 ans ou plus</option>
</select>
<br /><br />
<fieldset>
<legend>Dans quelles provinces et territoires avez-vous travaillé? <strong>(obligatoire)</strong><br /><span class="red"><strong>Erreur 4&#160;: Au moins une province ou territoire devrait être selectionnée.</strong></span></legend>
<input type="checkbox" name="provaab" id="provaab" value="1" /><label for="provaab">Alberta</label><br />
<input type="checkbox" name="provabc" id="provabc" value="1" /><label for="provabc">Colombie-Britannique</label><br />
<input type="checkbox" name="provape" id="provape" value="1" /><label for="provape">&Icirc;le-du-Prince-Édouard</label><br />
<input type="checkbox" name="provamb" id="provamb" value="1" /><label for="provamb">Manitoba</label><br />
<input type="checkbox" name="provanb" id="provanb" value="1" /><label for="provanb">Nouveau-Brunswick</label><br />
<input type="checkbox" name="provans" id="provans" value="1" /><label for="provans">Nouvelle-Écosse</label><br />
<input type="checkbox" name="provanu" id="provanu" value="1" /><label for="provanu">Nunavut</label><br />
<input type="checkbox" name="provaon" id="provaon" value="1" /><label for="provaon">Ontario</label><br />
<input type="checkbox" name="provaqc" id="provaqc" value="1" /><label for="provaqc">Québec</label><br />
<input type="checkbox" name="provask" id="provask" value="1" /><label for="provask">Saskatchewan</label><br />
<input type="checkbox" name="provanl" id="provanl" value="1" /><label for="provanl">Terre-Neuve-et-Labrador</label><br />
<input type="checkbox" name="provant" id="provant" value="1" /><label for="provant">Territoires du Nord-Ouest</label><br />
<input type="checkbox" name="provayt" id="provayt" value="1" /><label for="provayt">Yukon</label>
</fieldset>
<br />

<label for="visminvis2">Appartenez-vous à une minorité visible?</label><br />
<select size="2" id="visminvis2" name="visminvis2">
<option value=""></option>
<option value="y">Oui</option>
<option value="n">Non</option>
</select>
<br /><br />

<label for="dis2">Avez-vous besoin d'une ou de plusieurs technologies adaptées pour effectuer vos t&acirc;ches courantes?</label><br />
<select size="2" id="dis2" name="dis2">
<option value=""></option>
<option value="y" selected="selected">Oui</option>
<option value="n">Non</option>
</select>
<br /><br />

<input type="submit" value="Envoyer" />
</div>
</form>

6.0 Balises d'en-tête utilisées correctement

6.1 Exemple

Dans l'exemple ci-dessous, on commence avec l'en-tête de niveau 4, les en-têtes de niveaux 1, 2 et 3 étant déjà utilisés.

Sports intramuraux

Nous offrons divers sports intramuraux saisonniers.

Sports d'hiver

Nous offrons des sports d'hiver masculins et féminins.

Sports d'hiver masculins
  • Basketball
  • Hockey
  • Volleyball
Sports d'hiver féminins
  • Basketball
  • Ringuette
  • Volleyball
Sports d'été

Nous offrons des sports d'été masculins et féminins.

Sports d'été masculins
  • Football
  • Rugby
  • Soccer
Sports d'été féminins
  • Hockey sur gazon
  • Soccer
Haut de la page

6.2 Code CSS

Il n'y a pas de code CSS.

6.3 Code (X)HTML

<p><strong>Dans l'exemple ci-dessous, on commence avec l'en-tête de niveau 4, les en-têtes de niveaux 1, 2 et 3 étant déjà utilisés.</strong></p>

<h4>Sports intramuraux</h4>
<p>Nous offrons divers sports intramuraux saisonniers.</p>

<h5>Sports d'hiver</h5>
<p>Nous offrons des sports d'hiver masculins et féminins.</p>

<h6>Sports d'hiver masculins</h6>
<ul>
<li>Basketball</li>
<li>Hockey</li>
<li>Volleyball</li>
</ul>

<h6>Sports d'hiver féminins</h6>
<ul>
<li>Basketball</li>
<li>Ringuette</li>
<li>Volleyball</li>
</ul>

<h5>Sports d'été</h5>
<p>Nous offrons des sports d'été masculins et féminins.</p>

<h6>Sports d'été masculins</h6>
<ul>
<li>Football</li>
<li>Rugby</li>
<li>Soccer</li>
</ul>

<h6>Sports d'été féminins</h6>
<ul>
<li>Hockey sur gazon</li>
<li>Soccer</li>
</ul>

7.0 Changements de langue balisés correctement

7.1 Exemple

7.1.1 Messages offerts dans les deux langues officielles

For the English Braille version of this document, call 1-888-123-4567.

Pour la version en braille française de ce document, composez le 1-888-765-4321.

7.1.2 Noms propres en anglais et en français dans une liste

Participants

  • John Smith
  • Gilles Durocher
  • Louis Tabman
  • Francois Lafleur
  • Lucy Arnold
  • Giselle Boivier

7.1.3 Changement de langue en milieu de phrase

Elle est titulaire d'un certificat de l'Institute of Project Mangement.

7.2 Code CSS

Il n'y a pas de code CSS.

7.3 Code (X)HTML

7.3.1 Messages offerts dans les deux langues officielles

<p lang="en">For the English Braille version of this document, call 1-888-123-4567.</p>
<p>Pour la version en braille française de ce document, composez le 1-888-765-4321.</p>

7.3.2 Noms propres en anglais et en français dans une liste

<p>Participants</p>
<ul>
<li lang="en">John Smith</li>
<li>Gilles Durocher</li>
<li lang="en">Louis Tabman</li>
<li>Francois Lafleur</li>
<li lang="en">Lucy Arnold</li>
<li>Giselle Boivier</li>
</ul>

7.3.3 Changement de langue en milieu de phrase

<p>Elle est titulaire d'un certificat de <span lang="en">l'Institut de gestion de projets </span>.</p>

8.0 Cibles des liens bien définies

8.1 Exemple

Conseils fiscaux importants qui vous permettront de réaliser des économies

Quels sont les conseils fiscaux les plus importants?

8.2 Code CSS

Il n'y a pas de code CSS.

8.3 Code (X)HTML

<ul>
<li><a href="...url...">Renseignements sur les impôts des étudiants</a></li>
<li><a href="...url...">Renseignements sur les impôts des adultes</a></li>
</ul>

<p><a href="...url...">Conseils fiscaux importants qui vous permettront de réaliser des économies</a></p>
<p><a href="...url..."><strong>Quels sont les conseils fiscaux les plus importants?</strong></a></p>

9.0 Présentation fondée sur des feuilles de style en cascade (CSS)

9.1 Exemple

2005-10-28

Monsieur, Madame,

Voici un exemple de lettre datée. La date est inscrite dans le coin supérieur droit, et la lettre commence par « Monsieur, Madame, » et se termine par l'expression « Veuillez agréer l'expression de mes sentiments les meilleurs. », suivie du nom de l'expéditeur.

Veuillez agréer l'expression de mes sentiments les meilleurs.
Anonyme

9.2 Code CSS

.alignCenter_eoad{text-align : center;}
.alignRight_eoad{text-align : right;}
.greyBox_eoad{width : 67%; background-color : #CCCCCC; border : none; padding: 23px 12px 23px 12px; text-align : left;}
.indent1_eoad{padding-left : 5%; border : none;}
.indent2_eoad{padding-left : 10%; border : none;}

9.3 Code (X)HTML

<div class="alignCenter_eoad"><div class="greyBox_eoad">
<p class="alignRight_eoad">2005-10-28</p>
<p>Monsieur, Madame,</p>
<p>Voici un exemple de lettre datée. La date est inscrite dans le coin supérieur droit, et la lettre commence par « Monsieur, Madame, » et se termine par l'expression « Veuillez agréer l'expression de mes sentiments les meilleurs. », suivie du nom de l'expéditeur.</p>
<div class="indent1_eoad">Veuillez agréer l'expression de mes sentiments les meilleurs.</div>
<div class="indent2_eoad">Anonyme</div>
</div></div>

10.0 Balises de liste utilisées correctement

10.1 Exemple

Catégories disponible dans la boîte à outils pour la NSI 2.0 :

  • Modèle et guide technique de la NSI 2.0
  • Exemples de la façon de traiter les exigences de la NSI 2.0
    • Partie 1 : Norme sur les adresses Web
    • Partie 2 : Norme sur l'accessibilité, l'interopérabilité et la facilité d'utilisation des sites Web
    • Partie 3 : Norme sur la présentation commune des pages Web
    • Partie 4 : Norme sur le courriel
  • Renseignements généraux
  • Création de contenu
  • Développement et transition
  • Disposition et conception
  • Scripts et pages dynamiques
  • Spécifications, recommandations et lignes directrices
  • Outils

10.2 Code CSS

Il n'y a pas de code CSS.

10.3 Code (X)HTML

<p><strong>Catégories disponible dans la boîte à outils pour la NSI 2.0&#160;:</strong></p>
<ul>
<li>Modèle et guide technique de la NSI 2.0</li>
<li>Exemples de la façon de traiter les exigences de la NSI 2.0
<ul>
<li>Partie 1&#160;: Norme sur les adresses Web</li>
<li>Partie 2&#160;: Norme sur l'accessibilité, l'interopérabilité et la facilité d'utilisation des sites Web</li>
<li>Partie 3&#160;: Norme sur la présentation commune des pages Web</li>
<li>Partie 4&#160;: Norme sur le courriel</li>
</ul></li>
<li>Renseignements généraux</li>
<li>Création de contenu</li>
<li>Développement et transition</li>
<li>Disposition et conception</li>
<li>Scripts et pages dynamiques</li>
<li>Spécifications, recommandations et lignes directrices</li>
<li>Outils</li>
</ul>

11.0 Balises de liste de définition utilisées correctement

11.1 Exemple

Fil d'Ariane
Outil de navigation permettant à l'utilisateur de voir où se situe la page consultée dans la structure organisationnelle du site Web et offrant des liens lui permettant d'accéder rapidement aux catégories supérieures.

Témoin
Fichier de données envoyé par un serveur Web au navigateur Web sur l'ordinateur d'un utilisateur que ce serveur utilise pour repérer les visiteurs et enregistrer de l'information sur ces derniers. En général, un témoin enregistrera seulement l'information que lui aura fournie le client. Les données stockées dans un témoin ne peuvent être lues que par le serveur Web qui l'a initialement envoyé.

Administrateur général
Correspond à « sous-ministre », à « premier dirigeant » ou à un autre titre du genre attribué à ce niveau de responsabilité.

11.2 Code CSS

Il n'y a pas de code CSS.

11.3 Code (X)HTML

<dl>
<dt><strong>Fil d'Ariane</strong></dt>
<dd>Outil de navigation permettant à l'utilisateur de voir o&ugrave; se situe la page consultée dans la structure organisationnelle du site Web et offrant des liens lui permettant d'accéder rapidement aux catégories supérieures.<br /><br /></dd>
<dt><strong>Témoin</strong></dt>
<dd>Fichier de données envoyé par un serveur Web au navigateur Web sur l'ordinateur d'un utilisateur que ce serveur utilise pour repérer les visiteurs et enregistrer de l'information sur ces derniers. En général, un témoin enregistrera seulement l'information que lui aura fournie le client. Les données stockées dans un témoin ne peuvent être lues que par le serveur Web qui l'a initialement envoyé.<br /><br /></dd>
<dt><strong>Administrateur général</strong></dt>
<dd>Correspond à &#171;&#160;sous-ministre&#160;&#187;, à &#171;&#160;premier dirigeant&#160;&#187; ou à un autre titre du genre attribué à ce niveau de responsabilité.</dd>
</dl>

12.0 Balises de citation utilisées correctement

12.1 Exemple

Le message aux Administrateurs généraux des institutions figurant aux annexes I, I.1, II de la Loi sur la gestion des finances publiques a déclaré :

« La présente a pour but de vous aviser que le Conseil du Trésor a approuvé une nouvelle version de la Normalisation des sites Internet. Les normes sont entrées en vigueur le 1er janvier 2007, et devra être appliquée aux sites Internet de toutes les institutions fédérales énumérées aux annexes I, I.1 et II de la Loi sur la gestion des finances publiques. Vu le cycle de vie normal des sites Web des ministères et organismes, la mise en oeuvre se fera de manière progressive afin d'éviter des coûts inutiles; tous les sites existants devront avoir été convertis au plus tard d'ici au 31 décembre 2008. Les sites lancés après le 1er janvier 2007, devront quant à eux être conformes. »

Il a déclaré aussi « Les ministères et organismes devront soumettre leur plan de mise en oeuvre d'ici juin 2007 et présenter des rapports d'étape en décembre 2007 et janvier 2009 » et « On pourra de plus solliciter périodiquement leurs commentaires ».

12.2 Code CSS

Il n'y a pas de code CSS.

12.3 Code (X)HTML

<p>Le message aux Administrateurs généraux des institutions figurant aux annexes I, I.1, II de la <em>Loi sur la gestion des finances publiques</em> a déclaré&#160;:</p>

<blockquote cite="http://www.tbs-sct.gc.ca/clf2-nsi2/nti12-nai12-fra.asp"><p>&#171;&#160;La présente a pour but de vous aviser que le Conseil du Trésor a approuvé une nouvelle version de la <em>Normalisation des sites Internet</em>. Les normes sont entrées en vigueur le 1er janvier 2007, et devra être appliquée aux sites Internet de toutes les institutions fédérales énumérées aux annexes I, I.1 et II de la <em>Loi sur la gestion des finances publiques</em>. Vu le cycle de vie normal des sites Web des ministères et organismes, la mise en oeuvre se fera de manière progressive afin d'éviter des co&ucirc;ts inutiles; tous les sites existants devront avoir été convertis au plus tard d'ici au 31 décembre 2008. Les sites lancés après le 1er janvier 2007, devront quant à eux être conformes.&#160;&#187;</p></blockquote>

<p>Il a déclaré aussi <q cite="http://www.tbs-sct.gc.ca/clf2-nsi2/nti12-nai12-fra.asp">&#171;&#160;Les ministères et organismes devront soumettre leur plan de mise en oeuvre d'ici juin 2007 et présenter des rapports d'étape en décembre 2007 et janvier 2009&#160;&#187;</q> et <q cite="http://www.tbs-sct.gc.ca/clf2-nsi2/nti12-nai12-fra.asp">&#171;&#160;On pourra de plus solliciter périodiquement leurs commentaires&#160;&#187;.</q></p>