Intégrer l'accessibilité dans vos messages.

Préalables

Tronc commun

  • La rédaction accessible
  • L’accessibilité lors de la conversion de Word à PDF
  • Vérifier l’accessibilité et corriger les fautes d’accessibilité en PDF

Liens externes à télécharger

Contenu

Propriétés du document

Document vs Contenu Web

Document

Contenu Web

  • Téléchargé sur le Web
  • Joint à un courriel
  • Ne va pas nécessairement sur le Web
  • Imprimable
  • Rédigé avec Word, Excel, InDesign ou PowerPoint
  • Formaté par le rédacteur
  • Gabarits disponibles
  • Sauvegardé selon l'utilité
  • Sur le Web
  • En hyperlien dans un courriel
  • Uniquement sur le Web
  • Pas construit pour être imprimé
  • Rédigé sur Drupal, Dreamweaver, Contribute, DotNetNuke, WordPress etc.
  • Formaté avec un Cascading Style Sheet (CSS) prédéterminé
  • Gabarits parfois disponibles : Drupal, LibGuide
Document paramètres
  • Assurez-vous que la langue de votre document soit bien identifiée.
  • La manière de régler les paramètres de votre document dépend de l’outil de formatage employé.
Nommer un document

Bonnes pratiques

Mauvaises pratiques

  • Unique (formulaire_automne.pdf)
  • Court (letter_presentation.docx)
  • Representatif du contenu (lettre_intro.pdf)
  • Unilingue (lettre.pptx)
  • Dans la bonne langue (lettre.pdf)
  • Sans accents ni symboles (journee_intro.rtf)
  • Séparé par des traits d'union (nom-du-document.docx)

  • Redondant (formulaire.pdf)
  • Long (lettre_Presentation_conf_invitation_dejeuner_mardi_2014_VIP.pdf)
  • Non representatif du contenu (lettre_aid3948f.pdf)
  • Bilingue (lettre_letter.pptx)
  • Dans la mauvaise langue (Intro_letter_FR.pdf)
  • Avec accents ou symboles (Résumé_intro.rtf)
  • Séparé par des espaces ou soulignés (no lettre.doc) (no_lettre.doc)
Bilingue

Bonnes pratiques

Mauvaises pratiques

  • Noms ou sigles dans les deux langues séparés par un trait d'union

ex.: hro-bdp.jpg (titre français en premier pour les pages en français et titre en anglais en premier pour les pages en anglais)

  • Mot identique dans les deux langues

ex.: guide-uottawa-2014.jpg

  • Nom anglais pour les pages en anglais et nom en français pour les pages en français

ex.: atelier-word-2014.jpg

  • Ajouter l'extension -fra, -fr, -f ou -F à la fin d'un mot anglais pour indiquer qu'il s'agit d'un fichier français

e.g.: spring-event-form-fra.jpg

Repères visuels

Repères visuels
  • Utilisez l’entête, les couleurs et la police choisie par l’université sur tous vos documents pour aider le lecteur à se rappeler de la provenance des documents.
Exemples
  • L’entête du formulaire est le même que celui de la page Web ce qui aide l’internaute à se souvenir de la provenance de son formulaire.

Canada revenue agency TD1 page

td1 form

Vocabulaire

Directives

Evitez les directives abstraites.

 

Mauvaises pratiques

Bonnes pratiques

  • Pour en savoir plus, cliquez ici
  • Contactez nous
  • Voir le tableau ci-dessous
  • Pour en savoir plus, consultez le Répertoire des normes
  • Contactez le Bureau des droits de la personne
  • Voir le tableau Rapport annuel de l'accessibilité des communications 2014
Plusieurs langues dans un même document
  • Éviter de créer des documents bilingues.
  • Un changement de langue doit être étiqueté dans un document. La manière dépend du document.
Utiliser les bons termes

Les caractères

Couleur
  • Favorisez le noir ou le blanc pour les textes.
  • Essayez d’utiliser les caractères de couleur pour les titres ou les éléments surlignés seulement.

Jaune mauvaise couleur - Bleu bonne couleur

 

Police

Mauvaises pratiques

Bonnes pratiques

Taille
  • Imprimé : 12 ou plus
  • Électronique ou Web : 9 points ou plus

Accentuer un mot

Mauvaises pratiques

Bonnes pratiques

  • Une personne qui distingue difficilement les couleurs doit également être en mesure de discerner l’information importante.
L'espacement entre les lettres

Mauvaises pratiques

Bonnes pratiques

  • Arial, Verdana et Myriad génèrent automatiquement un espacement adéquat aux normes.

Styles

Interligne

Standard

Example

  • Écart entre les lignes : 25% à 30% de la taille des caractères.
  • Les caractères plus gras nécessitent un interlignage un peu plus grand.

Line spacing example
  • Si vous devez taper plusieurs fois consécutivement la barre d’espacement ou la touche retour pour créer l’interlignage désiré, vous avez probablement mal formaté votre texte.   
  • L’écart automatiquement généré sur Word, Excel et PPT et les courriels est adéquat aux normes.
Colonnes

Texte linéaire

Texte en colonnes

 

 

  • Diviser le texte en colonnes réduit les mouvements oculaires.
Les marges
  • Élargir les marges de vos documents reliés facilite la lecture à la loupe. 
Les titres et les sous-titres
  • Séparez un texte avec des titres et des sous-titres (Titre 1, Titre 2, Titre 3…)
  • Créez une table des matières et/ou des points d’ancrage pour un long texte.
  • Le titre du document est le seul Titre 1. Les autres sont Titre 2, Titre 3, Titre 4
Titres - Mauvaises pratiques

Mauvaises pratiques

Exemples

  • Utiliser la fonction Titre pour accentuer une phrase qui n'est pas un titre.
  • Passer de Titre 3 à Titre 5 pour avoir une taille de caractère plus grande.

 

Fautes dans l'exemple ci-dessus :

  • Passe de Titre 1 à Titre 3.
  • Titre 3 pas représentatif. Le titre devrait être Contact, Adresse ou Partenaire... On ne sait pas qui sont ces producteurs.
Autres mauvaises pratiques

Mauvaises pratiques

Exemples

  • Gérer la mise en page ou un changement de page avec des espaces ou des retours.
  • Créer des listes avec des tirers ou symboles spéciaux.

  • Utiliser des images
  • Utiliser des tirers
  • Utiliser la barre d'expacement
  • Utiliser la touche retour pour créer ou formater des listes.

Images

Images

Il existe deux catégories d’images :

  • Les images décoratives
  • Les images informatives
Image décorative VS. Image informative

Images décoratives

Images informatives

  • Sert à agrémenter la présentation visuelle d'une page.
  • Contient de l'information non essentielle à la compréhension du message.
  • L'usage d'une image décorative est encouragée.

 

  • Sert à informer le lecteur
  • Contient de l'information essentielle à la compréhension du message qui ne peut être perçue par un logiciel d'aide à la lecture assistée.
  • Peut être simple ou complexe.
  • L'usage d'une image informative n'est pas recommandée.
Images décoratives - Exemples

Decorative Pictures

Examples

  • Bordure d'entête de lettre
  • Image de calendrier sans date
  • Autres dessins ou photos qui n'offrent aucune information pertinente à la compréhension d'un message.

 

 

Images informatives - Exemples

Informative Pictures

Examples

Simple

  • Flèche
  • Calendrier daté
  • Signature
  • Logo
  • Crochets sur un tableau

Complex

  • Formule mathématique complexe
  • Carte géographique
  • Diagramme
  • Organigramme

 

Exigences par catégorie d’image

Image décorative

Image informative

  • Texte de remplacement pas nécessaire
  • L’étiquetage de l’image est nécessaire soit comme image de fond, en texte de remplacement nul ou en artefact.
  • L’image doit être renvoyée automatiquement à tout sauf Aligné sur le texte.
  • L’étiquetage dépendant du format du document
  • Texte de remplacement ou légende nécessaire
  • L’étiquetage de l’image est nécessaire et se fait automatiquement lorsqu’un texte de remplacement est inséré.
  • L’image doit être renvoyée automatiquement à Aligné sur le texte.
  • L’étiquetage dépendant du format du document
Texte altérnatif VS légende

Texte altérnatif

Légende

  • Quelques mots (maximum de 150 caractères)
  • Décrit une image ou une photo informative simple
  • Généralement caché
  • Peut être perçu uniquement par un logiciel d'aide à la lecture assistée 

 

 

  • Court ou long texte
  • Résume ou décrit image informative complexe
  • Peut être cachée ou non
  • Peut être soit perçue uniquement par un logiciel d'aide à la lecture assistée soit visible à tous (au choix)

 

  • Mettez un point à la fin du texte de remplacement ou de la légende même si ce n’est pas une phrase afin que l’intonation de la voix du lecteur vocal s’ajuste en conséquence.
Texte alternatif - Normes

Bonnes pratiques

Exemples

  • Attaché à l’image (la manière dépend du format du document ou de la page)
  • Dans la langue du document ou de la page
  • Pas de redondance d’information i.e.: Ne pas mettre ``image de`` ``logo de`` ou répéter une partie du texte ou du titre du texte.
  • Conseil: Remplacez les images informatives par du texte, ex.: écrire Inscrivez-vous au lieu d’utiliser une image textes. 

Texte altérnatif : Important!!!

Texte altérnatif : 15 novembre

Légende - Normes

Mauvaises pratiques

Bonnes pratiques

  • Répéter le titre du graphique qui est déjà offert en format texte dans la légende.
  • Écrire « graphique de » ou « image de » dans la légende.
  • Placer la légende en pièce jointe ou sous l'image.
  • Offrir une légende dans la langue du document.
  • Mentionner le titre d'un graphique si celui-ci n'est offert qu'en image (et non en texte).

Les tableaux

Tableaux

Il existe 2 types de tableaux :

  • Les tableaux de mise en page (layout)
  • Les tableaux de données (data table)

Ces deux types de tableaux peuvent être simples ou complexes.

  • Les tableaux sont difficiles à interpréter pour un lecteur-non voyant. Il est donc conseillé d’éviter les tableaux.
  • Si vous devez utiliser un tableau, assurez-vous de le simplifier.
Tableaux de mise en page

Caractéristiques

Exemple

  • Tableau qui ne sert qu'à placer des éléments sur une page. Ne pas utiliser ce type de tableau.

Pourquoi proscrire ces tableaux ?
  • Alourdis la taille des fichiers ou documents.
  • Allonge le temps de développement (plus de code, plus long à tester, changements complexes).
  • Nuis gravement à l'accessibilité et l'impression.

Layout table

Tableau de données

Caractéristiques

Exemple

  • Un tableau de données sert à organiser des données disparates (numériques ou textuelles) afin d'être facilement manipulées et analysées. 
 

 

 

Tableau de données simple

Caractéristiques

Exemple

  • Aucune cellule fusionnée ou divisée
  • Information divisée simplement

 

Exigences :
  • Vous devez identifier les cellules d'en-têtes de lignes et de colonnes (voir image 1 et 2).
 

 

 

Tableau de données complexe

Caractéristiques

Exemple

  • Comporte plus d'une rangée d'en-têtes ou plus d'une colonne d'en-têtes ou par le fait qu'au moins une cellule de donnée réfère à plus de deux cellules d'en-têtes.
  • Présence de cellules ‘’fusionnées’’ ou ‘’divisées’’

 

 

Exigences:
  • Associer toutes les cellules (sauf celles de la première ligne et de la première colonne) avec toutes les cellules d'en-têtes correspondantes. C’est-à-dire…
  1. Assigner un attribut id unique à chaque cellule d'en-tête.
  2. Incorporer un attribut header (titre) à chaque cellule de données.
  3. Ce travail doit être réalisé à la main directement dans le code
  • Insérer une légende

 

 

 

  • Évitez d'utiliser des tables de données complexes; Pour vous assurer que le contenu est facile à lire, utilisez plusieurs tables simples à la place.
Simplifier un tableau

Mauvaises pratiques

Bonnes pratiques

Laisser des lignes vides.
  • Ajouter des lignes pour aérer un tableau.
  • Imbriquer les tableaux les uns dans les autres.
  • Fusionner des cellules.
  • Insérer des images.

  • Créez plusieurs petits tableaux simples plutôt qu’un gros tableau complexe.
  • Accentuez les titres de lignes et de colonnes en utilisant des caractères gras ou en augmentant la taille de la police de caractères.
  • Donnez des titres aux colonnes et aux lignes.
  • Remplacez une donnée manquante par un texte.
  • Créer les espaces avec les options de formatage.
  • Décrivez le contenu du tableau dans la légende.
Simplifier un tableau - Exemples

Éléments complexes

Exemple

  • Deux cellules fusionnées
  • Une cellule vide
  • Entête horizontal et vertical
  • Une image informative

 

 

Solutions

Exemple

  • Diviser le tableau en deux
  • Remplir la cellule vide
  • Éliminer l’entête horizontal
  • Retirer l’image informative

 

 

Mise en page

Contraste

Mauvaises pratiques

Bonnes pratiques

  • Utilisez des couleurs contrastantes entre le texte et l’arrière-plan. 
Vérifier le contraste

Après avoir télécharger le vérificateur de contrastes

  1. Sélectionnez le premier compte-goutte et placez-le sur le texte
  2. Sélectionnez le deuxième compte-goutte et placez-le sur la couleur de fond qui semble être la plus problématique avec le texte.
  3. Vérifiez le résultat du contraste sous le sous-titre Text. Le contraste doit passer le niveau AA ou plus. 

  • Vous utilisez une image de fond ? Vérifiez le contraste dans les deux langues!  Le texte traduit peut s’étendre sur une surface plus grande ou plus petite. 

Navigation

Table des matières
  • Il est très facile de faire une table des matières sur un document bien construit. La méthode de procédé dépend du médium ou de l’outil de formatage utilisé.
Le signet
  • Permet de revenir facilement dans la partie du document à laquelle il réfère.
  • Peut être associé à un mot, un texte ou un emplacement dans le document.
Le renvoi
  • Fait référence à un élément qui apparaît à un autre emplacement dans un document.
  • Peut faire des renvois à des titres, des pieds de page, des signets, des légendes ou à des paragraphes numérotés.
  • Ne peut pas faire des renvois à un autre document
Le lien hypertexte

Permet de

  • Se diriger ailleurs sur le Web,
  • Naviguer à l’intérieur d’un document,
  • Ouvrir une adresse courriel,
  • Ouvrir un autre fichier.
Les liens hypertexte - Normes
  • Soulignés
  • Clairs et concis
  • Indique la destination du lien
  • N’excède pas 80 caractères
  • Avise si le lien mène à un PDF ex.: Formulaire d’inscription (version PDF, 36 KB)
  • Avise si un lien s’ouvre sur une nouvelle fenêtre ou quitte le site actuel. Ex.: Voir accessibilité (nouvelle fenêtre) ou (lien externe)
  • Toujours identifier les hyperliens images avec du texte 
  • Laissez l’info-bulle (fenêtre pop-up) vide.
Nommer un lien hypertexte
  • Représenter un lien avec du texte.
Ex.: « Contactez uOttawa » et non « Contactez http://www.uottawa.ca »
  • Utilisez l’adresse en entier pour les liens qui mènent à une adresse courriel Outlook. Ex.: « Marie-Claude.Gagnon@uottawa.ca » et non « Marie-Claude Gagnon ».
  • Utilisez de termes concrets.
Ex.: Écrire « Visitez le calendrier des événements » et non « Cliquez ici »
  • Ne pas nommer deux hyperliens différents avec un nom identique.
Ex.: « Contactez-nous » (pour la bibliothèque) et « Contactez-nous » pour l’uOttawa dans la même page porte à confusion. Il est mieux de dire « Contacter la bibliothèque » et «Contacter l’université d’Ottawa » .
  • Donnez un nom représentatif pour vos liens à des documents PDF.

Type de papier

Fini du papier et des matériaux

Mauvaises pratiques

Bonnes pratiques

  • Les filigranes
  • Les dessins compliqués en arrière-plan
  • Un fini glacé

 

  • Un fini mat ou non glacé pour réduire l’éblouissement
  • Au lieu de filigrane, placer l’information dans le haut de la page
Vérification express

Outils

Liens internes

Liens externes

Direction générale des communications
Gabarits Word, PowerPoint et InDesign (à venir sur le site de la DGC)
Services linguistiques
Bureau des droits de la personne – Accessibilité

Ateliers

Soutien

Service d’appui à l’enseignement et à l’apprentissage

À télécharger (idéalement sur Firefox)

Formation à l'accessibilité : Introduction
Comment créer une campagne accessible
Comment intéragir en prenant compte de l'accessibilité
Comment créer du contenu web accessible
Trouver un expert

Marie-Claude Gagnon, Coordonnatrice de la conformité à l’accessibilité Web

613-562-5800 poste 7452
Marie-Claude.Gagnon@uOttawa.ca

Haut de page