Aide

Aide

Énoncé sur les fonctions d'accessibilité

Le site d'Industrie Canada a employé des modèles de la Boîte à outils de l’expérience Web pour rendre le site plus accessible.

Plus de renseignements

Les modèles :

  • respecte l'accessibilité (WCAG 2.0 AA et WAI-ARIA), l'utilisabilité et l'interoperabilité;
  • utilise les élément sémantique de HTML5 et les point caractéristiques de WAI-ARIA;
  • sont conformes à HTML5, ce qui améliore la compatibilité avec les technologies d'adaptation, les appareils portatifs, les navigateurs et les moteurs de recherche;
  • ont été mis à l'essai avec succès dans un large éventail de technologies d'adaptation et de combinaisons navigateur/plate-forme;
  • associent les éléments importants, comme la barre de menu commune, le menu latéral et la zone de contenu, aux balises d'en-têtes pertinentes, ce qui simplifie la navigation à l'aide d'un lecteur d'écran;
  • emploient une conception et une disposition sans tableau, ce qui simplifie la navigation à l'aide d'un lecteur d'écran en réduisant la complexité structurelle des pages Web;
  • améliorent l'accessibilité en permettant aux visiteurs de configurer les éléments visuels en fonction de leurs besoins en matière d'accessibilité;
  • utilisent des polices à échelle variable et des éléments de navigation textuels, ce qui améliore l'accessibilité et simplifie la navigation à l'aide de technologies d'adaptation;
  • offrent une fonctionnalité d'impression facile dans les feuilles de style en cascade (CSS), ce qui rend les pages plus compatibles avec les imprimantes et empêche l'impression d'éléments de page inutiles;
  • séparent la présentation visuelle de la structure du document;
  • évitent les éléments tronqués et les éléments qui entraînait le chevauchement d'autres éléments lors de l'utilisation de gros caractères;
  • affichent la valeur de « title » lorsqu'un lien devient la cible du clavier;
  • emploient des liens « saut de navigation » au début de la page pour passer au contenu ou aux liens institutionnels. Ces liens « saut de navigation » deviennent visibles lorsque le pointeur de la souris les survole ou lorsqu'ils sont choisis au moyen d'un clavier ou d'autre périphérique d'entrée.

Augmenter la taille du texte

Pour augmenter la taille du texte de nos pages Web, vous pouvez changer les paramètres de votre navigateur. Suivez les instructions ci-dessous pour le navigateur que vous utilisez. Vous pouvez aussi consulter l'outil d'aide de votre navigateur.

Internet Explorer

  1. Sélectionnez « Affichage » dans la barre de menus.
  2. Sélectionnez « Taille du texte ».
  3. Sélectionnez « Plus grande » ou « La plus grande ».

Mozilla Firefox

  1. Sélectionnez « Affichage » dans la barre de menus.
  2. Sélectionnez « Taille du texte ».
  3. Sélectionnez « Plus grande ».
  4. Au besoin, répétez les étapes-ci dessus.

Opera

  1. Sélectionnez « Afficher » dans la barre de menus.
  2. Sélectionnez « Zoom ».
  3. À partir du menu, sélectionnez la taille avec laquelle vous voulez visionner le site Web.
  4. Au besoin, répétez les étapes-ci dessus.

Safari

  1. Sélectionnez « View » dans la barre de menus.
  2. Sélectionnez « Zoom In ».
  3. Au besoin, répétez les étapes-ci dessus.

Chrome

  1. Cliquez sur l'icône représentant une clé à molette qui est située dans la barre d'outils du navigateur.
  2. Sélectionnez « Options » (« Préférences » sous Mac et Linux, « Paramètres » sous Google Chrome OS).
  3. Cliquez sur « Options avancées ».
  4. Dans la section « Contenu Web », utilisez le menu « Taille de police » pour modifier la taille du texte.

Feuilles de style en cascade (CSS) côté client visant à accroître l'accessibilité

Les mécanismes de conception de pages Web du présent site Web offrent suffisamment de souplesse pour vous permettre de configurer la présentation visuelle de manière à répondre à vos besoins en matière d'accessibilité à l'aide d'un fichier de feuilles de style en cascade (CSS) côté client.

La plupart des navigateurs permettent de définir un fichier CSS côté client, qui peut ensuite être appliqué à chaque page Web que vous consultez. Pour ce faire,veuillez procéder aux étapes suivantes :

Comment créer un fichier CSS côté client

Pour créer une feuille de style côté client, créez un fichier-texte en clair portant l'extension de fichier « CSS » à l'aide d'un éditeur de texte en clair ou d'un éditeur CSS. Utilisez la syntaxe CSS (http://www.w3.org/Style/CSS/ (en anglais seulement)) dans votre feuille de style en cascade côté client afin de contrôler la présentation visuelle des pages Web.

Pour accroître davantage l'accessibilité des pages Web dans ce site Web, vous pouvez inclure une combinaison des feuilles de style en cascade côté client suivantes dans votre fichier CSS côté client.

Comment rendre visibles les liens de saut de navigation

  1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :

    div.navaid {
    position: static !important;
    font-size: 100% !important;
    float: none !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    }
    div.navaid a {
    color: #00F !important;
    padding: 5px !important;
    line-height: 150% !important;
    }

  2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Votre navigateur devrait maintenant afficher les messages « Passer au contenu » et « Passer aux liens institutionnels ».

Comment rendre les pages extensibles sur toute la largeur de l'écran

  1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :

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

  2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Votre navigateur devrait maintenant afficher les pages sur toute la largeur de l'écran.

Comment faire en sorte que tous liens soient soulignés

  1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :

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

  2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Votre navigateur devrait maintenant souligner tous les liens à l'écran.

Comment faire en sorte que les couleurs des liens à l'avant-plan et à l'arrière-plan soient uniformes

  1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :

    a:link, a:visited, a:hover {
    background-color: #FFF !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-variant: normal !important;
    padding: 0px 0px 2px 2px !important;
    }
    a:link {
    color: #00F !important;
    }
    a:visited {
    color: #009 !important;
    }
    a:hover {
    color: #F00 !important;
    }

    Veuillez prendre note que les couleurs mentionnées dans l'exemple ci-dessus peuvent être modifiées et sont attribuées comme suit :

    couleurs des liens à l'avant-plan
    Propriété du lien Nom de la classe Propriété de la classe Couleur (codes hexadécimaux) Couleur
    Couleur d'arrière-plan a:link, a:visited, a:hover background-color #FFF Blanc
    Couleur de lien consulté a:link color #00F Bleu
    Couleur de lien du bouton sensitif a:visited color #009 Bleu foncé
    Couleur de lien du bouton sensitif a:hover color #F00 Rouge
  2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Les couleurs de tous les liens à l'avant-plan et à l'arrière-plan de votre navigateur devraient maintenant être uniformes.

Comment ajouter plus de contraste à la bannière de la page de contenu

  1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :

    div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div-banner-lfcoa-fra {
    background: none !important;
    border-top: 1px solid #000 !important;
    border-left: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    min-height: 5.58em !important;
    margin-top: 3.14em !important;
    padding-bottom: 0.67em !important;
    }
    * html img.coa, * html img.lf {
    margin-top: -2.84em !important;
    }
    div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div-banner-lfcoa-fra img.coa, div-banner-lfcoa-fra img.lf {
    display: inline !important;
    }
    div.banner-eng p.main, div-banner-fra p.main, div.banner-lfcoa-eng p.main, div-banner-lfcoa-fra p.main, div.banner-eng
    p#siteuri, div-banner-fra p#siteuri, div.banner-lfcoa-eng p#siteuri, div-banner-lfcoa-fra p#siteuri {
    position: static !important;
    font-size: 100% !important;
    float: none !important;
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    }
    div.banner-eng p.main, div.banner-fra p.main, div.banner-lfcoa-eng p.main, div.banner-lfcoa-fra p.main {
    font-family: "times new roman", sans-serif !important;
    font-weight: bold !important;
    font-size: 185% !important;
    margin: 0 !important;
    padding: 0 !important;
    }
    div.banner-eng p#siteuri, div-banner-fra p#siteuri, div.banner-lfcoa-eng p#siteuri, div-banner-lfcoa-fra p#siteuri {
    font-family: Arial, Helvetica, sans-serif !important;
    background-color: transparent !important;
    font-weight: lighter !important;
    font-size: 110% !important;
    margin: 0 !important;
    padding: 0 !important;
    }
    p.main, p.main span, p#siteuri, p#siteuri span {
    color: #000 !important;
    }
    * html p.main, * html p.main span, * html p#siteuri, * html p#siteuri span {
    width: 99.5% !important;
    }
    p.main img, p#siteuri img {
    display: none !important;
    }

  2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Votre navigateur a maintenant désactivé la couleur ou l'image originale à l'arrière-plan de la bannière et l'a remplacée par un ensemble de couleurs d'avant-plan et d'arrière-plan à contraste élevé.

Comment ajouter plus de contraste à la zone de message de la page d'accueil

  1. Ouvrez votre fichier CSS côté client et insérez-y les bribes de code suivantes :

    .msgarea, .msgareaalt {
    background: none !important;
    border-top: 1px solid #000 !important;
    border-left: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
    }
    .msgareaalt {
    border-bottom: 1px solid #000 !important;
    }
    * html .msgarea, * html .msgareaalt {
    width: 99.7% !important;
    }
    * html .msgarea {
    height: 129px !important;
    }
    * html .msgareaalt {
    height: 248px !important;
    }
    .msgarea h1, .msgareaalt h1 {
    color: #000 !important;
    }
    .msgarea h1.hidden, .msgareaalt h1.hidden {
    position: static !important;
    font-size: 200% !important;
    float: none !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
    font-weight: bold !important;
    }
    .headcontainer {
    background-color: #FFF !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    }
    * html .headcontainer {
    width: 99.7% !important;
    height: 118px !important;
    }

  2. Sauvegardez votre fichier CSS et rafraîchissez votre navigateur.

Votre navigateur a maintenant désactivé la couleur ou l'image originale à l'arrière-plan de la zone de message de la page d'accueil et l'a remplacée par un ensemble de couleurs d'avant-plan et d'arrière-plan à contraste élevé.

Comment configurer votre navigateur pour utiliser un fichier CSS côté client

Internet Explorer

  1. Sélectionnez « Internet Options » (« Options Internet ») dans le menu « Tools » (« Outils »).
  2. Appuyez sur le bouton « Accessibility » (« Accessibilité »).
  3. Cochez la case « Format documents using my style sheet » (Mettre les documents en forme en utilisant ma feuille de style »).
  4. Utilisez le bouton « Browse » (« Parcourir ») pour sélectionner votre fichier CSS côté client.
  5. Confirmez les changements en appuyant sur le bouton « OK ».

Mozilla Firefox

  1. Renommez votre fichier CSS à « userContent.CSS »
  2. Copiez le fichier dans le sous-dossier « chrome » du dossier de votre profil de navigateur. Instructions pour trouver le dossier de votre profil (disponible en anglais seulement). Le sous-dossier « chrome » devrait contenir les fichiers « userContent-example.CSS » et « userChrome-example.CSS ».
  3. Relancez votre navigateur.

Opera

  1. Sélectionnez « Preferences » dans le menu « Tools ».
  2. Sélectionnez l'onglet « Advanced ».
  3. Sélectionnez l'option « Content » dans la liste.
  4. Appuyez sur le bouton « Style options ».
  5. Appuyez sur le bouton « Choose » pour sélectionner votre fichier CSS côté client.
  6. Confirmez les changements en appuyant sur le bouton « OK ».

Safari

  1. Sélectionnez « Preferences » dans le menu « Safari ».
  2. Sélectionnez « Advanced ».
  3. Appuyez sur le bouton « Other » pour sélectionner votre fichier CSS côté client.
  4. Confirmez les changements en appuyant sur le bouton « OK ».