Merge pull request #41 from ongov/develop

Inclusive design cards

README.md

@@ -415,6 +415,7 @@ At a minimum:
 ### Laws and rules to follow
 
 * [*Accessibility for Ontarians with Disabilities Act, Information and Communication Standard*](https://www.ontario.ca/laws/regulation/r11191#BK9)
+* [*Web Content Accessibility Guidelines (WCAG) 2.0*](https://www.w3.org/WAI/intro/wcag)
 
 ## 8 — Be agile and user-centred
 

fiches-conception-inclusive.md

@@ -0,0 +1,267 @@
+# Fiches pour la conception inclusive
+
+L’utilisation de ces fiches au début du processus de conception vous aidera à esquisser, à planifier et à créer les prototypes et le contenu conceptuel, les interactions et les processus.
+
+* [HTML accessible](https://www.ontario.ca/fr/page/fiches-pour-la-conception-inclusive)
+* [Word accessible](https://github.com/ongov/Digital-Service-Standard/blob/master/Fiches%20Conception%20Inclusive%201.0.0.docx)
+* [PDF accessible](https://github.com/ongov/Digital-Service-Standard/blob/master/Fiches%20Conception%20Inclusive%201.0.0.pdf)
+
+---
+
+## Conception avec empathie
+
+### Diversité invisible
+
+Certains types de diversité sont invisibles, par exemple :
+
+*   santé mentale
+*   spectre de l’autisme
+*   daltonisme
+
+Certaines personnes peuvent présenter plus d’une différence de capacité, par exemple mobilité et vision réduites.
+
+Chaque personne est unique—il faut des services souples.
+
+Des caractéristiques et des capacités non apparentes peuvent influer sur le comportement.
+
+### Interactions respectueuses
+
+*   Souvent, la plus grande limite dans les capacités d’une personne, ce sont les attitudes des autres
+*   La pitié et la sympathie ne sont pas nécessaires
+*   Des termes comme handicapé, infirme, malade mental, nain, et maladie peuvent être insultants ou embarrassants
+*   La façon la plus respectueuse d’appeler quelqu’un est par son nom
+*   Ne dites pas que la personne est sourde, mais plutôt qu’elle est malentendante
+*   Ne présumez pas des limites ou des capacités de la personne, demandez-lui si vous pouvez aider et comment
+*   Ne présumez pas que la personne ne peut vous entendre ou vous comprendre, mais parlez plus fort ou plus lentement si on vous le demande
+*   Évitez les commérages et chuchotements, ne montrez pas du doigt, ne dévisagez pas et ne prenez pas de photos
+
+### Mieux comprendre
+
+Vidéos pour mieux comprendre :
+
+[Inclusion, belonging and the disability revolution: Jennie Fenton](https://www.youtube.com/watch?v=VAM9nh8WC-8)
+
+[Why design should include everyone: Sinéad Burke](https://www.ted.com/talks/sinead_burke_why_design_should_include_everyone)
+
+[Able privilege: Alan Larson](https://www.youtube.com/watch?v=mX9tgr7yfwo) et [able-bodied privilege checklist](https://exposingableism.wordpress.com/2009/10/12/the-invisible-backpack-of-able-bodied-privilege-checklist/)
+
+[What is the social model of disability?](https://www.youtube.com/watch?v=0e24rfTZ2CQ)
+
+### Mesures d’adaptation
+
+Bon nombre de mesures d’adaptation sont exigées par le <cite>[Code des droits de la personne](http://www.ohrc.on.ca/fr/le-code-des-droits-de-la-personne-de-l%E2%80%99ontario)</cite> de l’Ontario ou la <cite>[Loi de 2005 sur l’accessibilité pour les personnes handicapées de l’Ontario](https://www.ontario.ca/accessibilite)</cite>. Engagez-vous immédiatement à offrir des mesures d’adaptation.
+
+Ne faites pas de présomptions au sujet d’un comportement. Restez calme et demandez une clarification. Expliquez ce que vous avez entendu et le sentiment que vous avez éprouvé.
+
+### Réactions émotionnelles
+
+Vous aurez peut-être affaire à des personnes fâchées, tristes, anxieuses, frustrées ou vivant d’autres émotions. Certains sujets ont du mal à comprendre les expressions faciales, le langage corporel, le jargon, les sarcasmes et les blagues.
+
+Ne faites pas de présomptions au sujet d’un comportement. Restez calme et demandez une clarification. Expliquez ce que vous avez entendu et le sentiment que vous avez éprouvé.
+
+## Conception inclusive interactions physiques
+
+### En personne
+
+*   parlez au niveau des yeux
+*   demandez la permission de donner de l’aide
+*   offrez de prendre des notes ou d’écrire si nécessaire
+*   permettez aux clients de prendre rendez-vous au lieu d’attendre en ligne
+*   fournissez du stationnement accessible
+*   fournissez des endroits où s’asseoir et se reposer
+*   dégagez les passages et marquez-les physiquement et visuellement
+*   assurez-vous que les portes sont faciles à comprendre (pousser ou tirer?) et à ouvrir
+*   vérifiez l’accès physique des locaux
+
+### Choisissez des locaux qui ont
+
+*   des ascenseurs et des rampes
+*   des portes et des corridors larges
+*   des portes faciles à ouvrir
+*   des toilettes, tablettes, éviers et comptoirs bas
+*   des toilettes, des tables et des bureaux hauts
+*   des lumières qui ne clignotent pas
+*   des planchers unis et à niveau
+
+### En ligne
+
+*   des interfaces contrôlables par la touche de tabulation (à vérifier sur clavier)
+*   vérifiez si on peut toujours voir clairement la tâche à accomplir quand on utilise la touche de tabulation
+*   assurez-vous qu’il n’y a pas d’éléments d’interface auxquels on peut accéder par la touche de tabulation, mais qu’on ne peut quitter par cette même touche
+*   utilisez une structure appropriée pour les rubriques
+*   ajoutez des liens d’ancrage permettant de sauter les longues listes de liens
+*   enlevez les limites de temps ou permettez aux utilisateurs de les prolonger
+*   créez de gros boutons utilisables sans dextérité
+*   évitez les interfaces à glisser-déposer, à toucher ou à effleurer ou offrez des moyens de remplacement
+
+### Vous aiderez les personnes qui
+
+*   ont les bras chargés (colis, enfants, <abbr title="et cetera">etc.</abbr>)
+*   portent des gants (médecin, jardinier, <abbr title="et cetera">etc.</abbr>)
+*   mangent alors qu’elles travaillent
+*   ont des variations de poids et de taille
+*   ont des fractures ou autres blessures
+*   ont des dommages ou de la dégénérescence aux nerfs
+*   ont des pertes de coordination et de force
+*   ont de la douleur articulaire et une mobilité réduite
+*   ont des paralysies complètes et partielles
+*   ont subi des amputations
+
+## Conception inclusive expérience audio
+
+### En personne
+
+*   établissez un contact visuel et parlez avec clarté
+*   parlez à la personne et non à son interprète
+*   utilisez des repères visuels (<abbr title="par exemple">p. ex.</abbr>, faites des gestes pour signaler que vous parlez si quelqu'un ne vous regarde pas)
+*   désignez une pièce calme et offrez-la au besoin
+*   éliminez les bruits de fond (musique, annonces, <abbr title="et cetera">etc.</abbr>)
+*   offrez un interprète si quelqu'un ne comprend pas une personne qui a un accent, une moustache ou dont le visage est couvert
+*   enlevez votre masque chirurgical lors d’une conversation
+*   évitez de mâcher de la gomme et de manger des bonbons
+*   répétez les informations aussi souvent qu’on le demande
+*   envisagez de reformuler ou d'utiliser un mot différent si vous devez répéter quelque chose plus de deux fois
+*   offrez du contenu à la fois écrit et audio
+
+### Choisissez des lieux
+
+*   ayant de petites pièces séparées (concept ouvert, grandes pièces rendant l'audition difficile)
+*   ayant une absorption acoustique
+*   sans sources de bruit externes à proximité (aéroport, autoroute, voies ferrées, <abbr title="et cetera">etc.</abbr>)
+*   ayant des systèmes d'alerte audio (alarmes, systèmes d'annonces publiques, <abbr title="et cetera">etc.</abbr>) qui utilisent également des notifications visuelles
+*   sans bruits aigus au-dessus de 20 <abbr title="Kilohertz">khz</abbr>
+
+### En ligne
+
+*   légendes et transcription de vidéos
+*   offrez des vidéos en langue des signes
+*   écrivez clairement à un niveau d’école primaire
+*   illustrez des concepts complexes, si possible
+*   évitez la lecture automatique de vidéos ou de pistes audio
+*   associez des alertes audio à une alerte visuelle
+*   incluez des commandes de volume pour l'audio faciles à trouver et à utiliser sur un clavier
+*   ne créez pas d'expériences nécessitant l'écoute des utilisateurs (fournissez toujours au moins une solution de rechange)
+*   illustrez des concepts complexes, si possible
+
+### Vous aiderez les gens
+
+*   lorsque l'audio est désactivé
+*   sans haut-parleurs disponibles
+*   dans un environnement bruyant
+*   à porter des bouchons d'oreille, un casque ou une protection auditive
+*   avec perte auditive totale ou partielle
+*   dont la deuxième langue est l'anglais
+
+## Conception inclusive expériences visuelles
+
+### En ligne
+
+*   utilisez des éléments d'en-tête pour les en-têtes et utilisez-les par ordre décroissant (h1, h2, h3, <abbr title="et cetera">etc.</abbr>)
+*   ajoutez un titre à tous les éléments du formulaire
+*   évitez de vous en remettre à la vision (abbr title="par exemple">p. ex., en identifiant les éléments par couleur ou par leur place sur la page)
+*   assurez-vous que les liens ont du sens par eux-mêmes s'ils sont lus plutôt qu’insérés dans une phrase
+*   laissez les utilisateurs choisir la bande sonore ou les vidéos
+*   utilisez des couleurs de texte qui contrastent fortement avec le fond
+*   utilisez les éléments HTML comme prévu (<abbr title="par exemple">p. ex.</abbr>, évitez d'utiliser des éléments
+
+    <div>ou des liens stylisés ressemblant à des boutons)</div>
+
+*   utilisez des balises abrégées
+*   évitez d'ouvrir de nouvelles fenêtres ou du contenu par-dessus une page existante
+*   n’ouvrez pas les liens dans les nouveaux onglets
+*   utilisez des arrière-plans <abbr title="Cascading style sheet">CSS</abbr> pour des images décoratives
+*   utilisez des arrière-plans <abbr title="Hypertext markup language">HTML</abbr> pour des images informatives
+*   décrivez les images dans des légendes (>140 caractères) ou en <abbr title="Hypertext markup language">HTML</abbr> alt text (<140 caractères)
+*   [décrivez les images](https://webaim.org/techniques/alttext/) de façon à ce que tout utilisateur comprenne les informations contenues dans l'image
+*   assurez-vous que le contenu est commandé logiquement sans <abbr title="Cascading style sheet">CSS</abbr> (testez avec une extension [Chrome](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) ou [Firefox](https://addons.mozilla.org/en-US/firefox/addon/web-developer/) ou un lecteur d'écran comme [NVDA](https://www.nvaccess.org/download/) ou en [voiceover](https://help.apple.com/voiceover/info/guide/10.12/))
+*   testez si le site est utilisable avec un zoom de 200 %
+*   indiquez les modifications de langue et de langue de la page à l'aide de l'attribut <abbr title="Hypertext markup language">HTML</abbr> lang
+*   évitez d'utiliser des éléments de sélection
+*   utilisez un titre unique pour chaque page
+*   assurez-vous que les identifiants utilisés en <abbr title="Hypertext markup language">HTML</abbr> sont uniques
+
+### En personne
+
+*   offrez de grands formats d’impression et en braille
+*   fournissez un éclairage lumineux pour aider à la lecture
+*   abstenez-vous de caresser, de nourrir ou de distraire les chiens d’assistance
+*   identifiez-vous lorsque vous entrez dans une pièce
+*   demandez la permission pour guider quelqu’un
+*   il ne faut pas saisir la personne&emdash;touchez le dos de la main et la personne vous prendra le coude
+*   informez la personne des marches ou obstacles devant elle
+*   donnez des directives qui ne reposent pas sur la vue, <abbr title="par exemple">p. ex.</abbr> à gauche ou à droite, et indiquez la distance
+
+### Vous aiderez les personnes qui
+
+*   éblouissement élevé à l’écran
+*   faible éclairage
+*   cécité
+*   faible vision
+*   vision partielle (un oeil, champ de vision partiel, taches sombres ou claires bloquant la vision, flou)
+*   daltonisme
+*   sensibilité à la lumière
+*   dyslexie
+
+## Design inclusive thought experiences
+
+### Ne comptez pas sur …
+
+*   la mémoire
+*   la capacité de résoudre des problèmes
+*   la capacité de se concentrer longtemps
+*   la compréhension des mots écrits ou parlés (offrez les deux options)
+*   la capacité d’écrire ou de parler (offrez les deux options)
+*   la compréhension des mathématiques
+*   la compréhension de l’imagerie
+*   les réactions émotionnelles et comportementales attendues
+
+…de la personne pour réussir la prestation d’un service.
+
+### En ligne
+
+*   utilisez des titres de section clairs pour la navigation et les formulaires
+*   limitez la navigation et d'autres choix à huit à la fois
+*   fournissez deux façons différentes de naviguer sur un site
+*   ne désactivez pas la fonction retour du navigateur
+*   indiquez les entrées et les sélections de texte correctes et incorrectes
+*   utilisez un langage simple (évitez les termes complexes ou expliquez-les)
+*   regroupez le contenu dans des sections avec des en-têtes qui sont claires
+*   utilisez moins de 80 caractères par ligne de texte
+*   utilisez l'alignement à gauche ou à droite, éviter un texte entièrement justifié
+*   utilisez une mise en page et un libellé cohérents pour chaque page
+*   mettez en évidence des informations importantes
+*   utilisez des représentations graphiques pour améliorer la compréhension
+*   n'utilisez pas de bandes à fort contraste dans votre conception
+*   évitez les effets de défilement de parallaxe ou le défilement automatique
+*   ne placez pas d'images animées sous un texte statique
+*   évitez d'utiliser des effets clignotants, clignotants ou scintillants
+
+### En personne
+
+*   mentionnez ce que les utilisateurs doivent savoir ou apporter avec eux à l'avance
+*   répétez les informations aussi souvent qu’on vous le demande
+*   envisagez de reformuler ou d'utiliser un mot différent si vous devez répéter quelque chose plus de deux fois
+*   ne pressez pas les personnes qui ont besoin de plus de temps
+*   offrez des services de prise de notes ou d'écriture si nécessaire
+
+### Vous aiderez les personnes qui
+
+*   stress
+*   épuisement
+*   trouble du déficit de l’attention avec ou sans hyperactivité
+*   démence
+*   accident vasculaire cérébral
+*   blessure au cerveau
+*   difficultés intellectuelles
+*   difficultés de langage et d’apprentissage
+*   dyslexie
+*   autisme
+*   trisomie
+*   crises causées par une lumière clignotante, vacillante ou stroboscopique (épilepsie de sensibilité à la lumière)
+*   nausée ou vertige causé par les troubles de l’oreille interne (vestibulaire)
+
+> Créées conjointement par les Services numériques de l'Ontario et le Centre d'excellence en accessibilité à l'information et à la technologie de l'information pour la fonction publique de l’Ontario.
+
+> Les renseignements suivants ne sont pas des conseils juridiques. Pour une démarche inclusive complète, faites l’essai de vos contenus auprès d’un groupe d’utilisateurs diversifiés.
+
+[Licence du gouvernement ouvert – Ontario](/fr/page/licence-du-gouvernement-ouvert-ontario)