«Entrez seulement !» comme nous aimons le dire en Suisse romande. Merci de me rendre visite. Ou plutôt, merci de NOUS rendre visite, parce que je ne saurais oublier les personnes sans qui ce site n'aurait jamais vu le jour. Je vous les présenterai ci-après.
Ce site s'affiche, par défaut, avec une taille d'écriture plus élevée que la normale, la police de caractère Luciole (qui a été mise au point pour personnes malvoyantes) et un contraste positif.
Cela ne vous convient pas ? Aucun problème ! Vous allez pouvoir configurer l'affichage de ce site selon vos besoins ! Une fois que vous aurez trouvé de quoi rendre votre lecture confortable, vos préférences seront mémorisées et effectives lors de vos prochaines connexions.
Voici une petite visite guidée :
Bonjour, j'espère que vous aurez beaucoup de plaisir à parcourir les pages de ce site et que son ergonomie sera satisfaisante pour vous.
Comment ai-je traité les éléments visuels ?
J'ai décrit avec soin les 3 illustrations sur la page d'accueil et j'en ferai de même chaque fois qu'une image sera pertinente pour la compréhension de la d'un texte. En revanche, j'occulterai les images qui sont purement décoratives pour que vous puissiez vous concentrer sur l'essentiel. Concernant les bannières de chaque page, que leur description apporte ou non une valeur ajoutée, je les décrirai faute de réussir à les cacher, parce que lors de mes essais, VoiceOver racontait n'importe quoi ! D'autant plus qu'elles seront progressivement illustrées par Chloé.
Dans l'en-tête, j'ai installé 5 boutons de navigation adaptée. Ils sont alignés à droite des boutons pour changer de langue sur un écran d'ordinateur ou une tablette en mode paysage et sous ces mêmes boutons avec un smartphone ou une tablette en mode portrait. Seul le premier bouton a un intérêt pour vous car il aura pour effet de réduire, de manière importante, le nombre de pages à faire défiler. Pour ce faire, vous pourrez ouvrir ce bouton qui permet de diminuer ou d'agrandir les caractères et choisir la première option du menu déroulant qui s'ouvrira afin de rendre les caractères les plus petits possible.
Pour des raisons d'ergonomie, le pied de page se présente différemment selon la taille de l'écran. Avec une largeur égale ou supérieure à 1024 px (en principe une tablette en mode paysage), il y a damier avec 3 rangées de 3 boutons. La première ligne dirigera vers nos présentations dans la page «À propos de nous». La deuxième ligne vous enverra, quand à elle, vers la page «L'itinéraire d'un chien-guide» avec une photo de Kira en famille de parrainage, puis une autre avec son harnais de travail, en enfin une de Yuka à la retraite. La troisième ligne est un complément à la deuxième, nous voyons une photo de Yuka et de Kira, chacune avec leur portée, durant leurs premiers jours de vie. Sans oublier une que de David, mon mari qui est très présent auprès de nous.
Qu'il y ait ou non un damier, il y aura, dès que possible, un plan de navigation complet dans le pied de page.
Pour éviter de trop scroller, un bouton, avec un labrador qui regarde vers le haut, a été configuré pour vous permettre de remonter tout au haut du site. Il se situera sous le texte, tout en bas de l'écran si vous utilisez un smartphone ou une tablette en mode portrait. Dans le cas où vous utilisez un ordinateur, une tablette ou un smartphone en mode paysage, vous trouverez ce bouton à droite du texte; en outre, juste au-dessus, apparaîtra un menu vertical qui vous permettra de vous déplacer d'un élément à l'autre dans la page. Cela dit, il se peut que vous n'y arriviez pas du premier coup, mais cela fonctionnera si vous cliquez une deuxième fois.
Si quoi que ce soit devait manquer dans ce descriptif, si vous souhaitez me faire des suggestions pour améliorer ce site, n'hésitez pas à me contacter !
Bonjour, j'espère que l'ergonomie de ce site sera satisfaisante pour vous et que vous aurez du plaisir à explorer ces pages. J'ai mis un soin particulier dans la mise ne page, avec un interligne agrandi et des lignes courtes (sur ordinateur et tablette en forme paysage) pour aider à la lecture. Il ne m'a pas été possible de raccourcir les lignes sur smartphone, car cela aurait empêché d'agrandir suffisamment les caractères pour les lecteurs malvoyants qui ont besoin de forts agrandissements.
Bien qu'il n'y ait pas de panacée parmi les polices développées pour les lecteurs dyslexiques, une police m'a semblé digne d'intérêt : LexieReadable. Je vous propose de l'essayer en la sélectionnant à partir du deuxième bouton de modification de l'interface. N.B. Vous pouvez la télécharger gratuitement.
J'ai choisi, pour le logo du site, une police d'écriture que je trouve magnifique mais qui peut se révéler peu accessible selon votre type de dyslexie. Si vous n'arrivez pas à le déchiffrer, j'espère que vous ne resterez pas bloqué dessus et irez au-delà dans votre lecture. Ce titre est réécrit au bas de page, mais au cas où vous ne l'auriez pas remarqué, je vous le reproduis ici : S'il te plaît, dessine-moi un chien-guide.
J'espère que vous aurez plaisir à me lire et je vous répondrai volontiers si vous souhaitez me faire part de difficultés.
Bonjour, j'espère que vous prendrez plaisir à visiter ces pages. Si vous avez une dys- ou une achromatopsie, je vous recommande de rendre sur «Comment paramétrer l'affichage». Les quatrième et cinquième bouton ont spécialement été installés à votre attention.
Bonjour, je tiens également à vous écrire un petit mot afin de vous dire que je ne vous ai pas oublié et que je vais faire de mon mieux pour que mes contenus vous soient accessibles.
Dans mes propres vidéo, sur ma chaîne YouTube, j'ai activé le sous-titrage. Mais je n'ai pas encore trouvé comment faire pour que les paroles soient toutes retranscrites dans la bonne langue lorsque les dialogues sont bilingues. C'est ce qui explique les sous-titres étranges qui s'affichent actuellement sur la vidéo que j'ai mise en ligne à la fin de la présentation de Kira dans «À propos de nous», car je parle le français avec David et l'allemand avec Hannah, l'éducatrice de Kira.
Le premier bouton
permet de réduire ou d'agrandir la taille des caractères de A -- à A+++.
Le deuxième bouton
permet d'opter pour une autre police de caractères : LexieReadable, qui me paraît digne d'intérêt pour les personnes dyslexiques, et la plus classique Verdana.
Le troisième bouton
permet de modifier les jeux de couleurs. Il y a 4 différents contrastes négatifs (texte foncé sur arrière-plan clair) suivi de 8 contrastes positifs (texte clair sur arrière-plan bleu foncé pour les 4 les premiers choix et sur arrière-plan noir pour les 4 derniers choix).
En toute logique, le fond de chaque case correspond à la couleur de l'arrière-plan proposé et la couleur du crayon à celle du texte. NB Tout changement de couleur dans le texte signifie qu'il s'agit d'un lien (actif ou en construction). Ces liens sont également reconnaissables parce qu'à leur survol, le texte apparaît en blanc sur fond vert foncé.
Le quatrième bouton
permet de sélectionner un affichage par niveaux de gris. Pour des raisons inexpliquées, l'arrière-plan ne se transforme pas en niveau de gris. Aussi je vous recommande d'actionner ce bouton en association avec le troisième. Pour obtenir un contraste optimal, vous pourrez choisir la première option pour un contraste négatif ou la première des 4 dernières options pour un contraste positif.
Le cinquième bouton
complète le quatrième. Il a été mis en place à l'attention des lecteurs dont la perception des couleurs est émoussée, voire inexistante.
Puisque c'est uniquement grâce à une différence de couleur, par rapport au texte, que les liens peuvent être reconnu, il était nécessaire d'ajouter un autre moyen de visibiliser ces derniers : en actionnant ce bouton, tous les liens, sauf ceux du damier, apparaîtront avec un cadre foncé si vous utilisez un contraste négatif et un cadre clair pour un contraste positif.
Pour information, si, après avoir utilisé le cinquième bouton, vous vous servez du troisième pour passer d'un contraste positif à un contraste négatif (ou l'inverse), vous devrez cliquer à nouveau sur le cinquième bouton. L'effet de ce dernier bouton, et c'est également le cas pour le quatrième bouton, ne sera pas mémorisé : lorsque vous changerez de page, vous aurez à le sélectionner à nouveau.
Oui, les commandes interactives peuvent se gérer au clavier. Tout comme si vous survoliez un lien avec une souris ou un trackpad, j'ai activé le focus visible. Car c'est bien beau de pouvoir se déplacer de lien en lien grâce au clavier, c'est encore mieux de pouvoir distinguer l'endroit où vous avez atterri ! Le texte où vous vous trouverez apparaîtra en blanc sur fond vert foncé.
Si vous visitez ce site au moyen d'un smartphone ou d'une tablette, n'hésitez pas à utiliser le mode paysage en complément du mode portrait.
À partir d'une largeur de 1024 px (ce qui correspond en principe à une tablette en mode paysage), le pied de page est agrémenté d'un damier avec 9 boutons
En cours de lecture vous verrez apparaître soudain l'image d'un labrador qui regarde vers le haut. Sa fonction est de vous ramener tout au haut de la page. Il surgira tout au bas de l'écran sur smartphone ou tablette en mode portrait. Sur un ordinateur ou une tablette en mode paysage, il se situera à droite de l'écran, agrémenté d'un menu latéral qui vous permettra de vous déplacer vers les autres éléments de la page en cours de lecture.
Le défi que j'ai cherché à relever tout au long de l'élaboration de ce site, avec l'aide de Farouk, mon prof de développement web, consistait à rendre mes contenus accessibles. Pas juste accessibles, en fait, mais agréables à lire, tant pour les internautes déficients visuels que pour ceux qui voient bien.
Il serait dommage de faire fuir les personnes qui voient bien et celles dont les besoins sont diamétralement opposés à ceux des personnes malvoyantes, notamment en raison d'un TSA, d'une dyslexie, d'un syndrome d'Irlen, parfois les trois en même temps ! Certaines d'entre elles tolèrent très mal les contrastes élevés, surtout sur un arrière-plan foncé !
Beaucoup de sites, lorsque les web-masters se sont donné la peine d'installer des outils de navigation adaptée, me paraissent décevants… Ils n'offrent qu'un choix, pas toujours heureux. Les changement de couleurs ne couvrent pas toute la page. Certains font tout simplement disparaître les images, ce que je trouve dommage. D'autres font très mal leur travail (exemple : contraste positif avec écriture grise sur fond noir). Mais pourquoi diable ne pas opter pour une écriture blanche afin d'offrir un contraste maximal ? Il y aussi ceux qui ne changent que la couleur du texte principal mais ne jugent pas utile de le faire sur les titres, les liens qui deviennent illisibles (ex. violet foncé sur noir).
En un mot, je voulais offrir ce qu'il y a de plus adapté à chaque personne malvoyante qui peut lire en noir dans de bonnes conditions sans oublier les autres visiteurs. Je me suis servie d'un outil très précieux, que l'on peut télécharger gratuitement, et que tout web-developer / web-designer devrait utiliser pour respecter la Web Accessibility Initiative (WAI) du World Wide Web Consortium (W3C) :
un analyseur de contraste des couleurs (CCA).Il m'a fallu une sacrée dose d'inconscience le jour où j'ai décidé de m'initier, quelques mois avant de souffler mes 60 bougies, au développement web ! Il en certainement fallu pas mal à Farouk pour m'accepter comme élève (rires). Le moins que je puisse dire, c'est que je ne l'ai pas ménagé avec mon perfectionnisme chevillé au corps et mes «non, cela ne va pas être possible… ça flingue les yeux !» en réponse à certaines de ces propositions d'animations pour agrémenter le site.
Pourquoi un tel perfectionnisme ? C'est dans mon ADN, pour le meilleur et pour le pire. Mais il y a une autre raison. Pour moi c'est un acte militant : je trouve inacceptable, à l'heure actuelle, que tant de web-masters, dont c'est le métier, qui créent des sites pour des administrations, des cabinets médicaux, des banques, soient si peu instruits en matière d'accessibilité numérique ! Je ne comprends même pas comment c'est possible de manquer à ce point de bon sens. C'est insupportable de voir tant de sites avec des écritures claires sur fonds clairs. Des sites qui utilisent du blanc sur bleu clair (ou l'inverse) fleurissent partout.
Il y a encore pire, l'écriture jaune, ou vert, très claire, vive, sur fond blanc. À part éblouir, je ne vois pas à quoi ça sert.
J'aurais encore fort à dire sur l'accessibilité numérique… j'y reviendrai certainement plus tard.
Vous avez maintenant toutes les clés en main pour parcourir ce site avec les réglages mis à votre disposition. N'hésitez pas à me faire part des éventuels problèmes rencontrés. Vous pouvez volontiers me signaler des erreurs d'inattention dans l'orthographe, la syntaxe, etc.
Il est temps de vous présenter
Chloé Roten, une jeune artiste de talent qui a donné vie aux deux chiens-guides de ce site ainsi qu'aux membres de leur famille.
Chloé est la fille de Karin, une amie que j'ai rencontrée durant nos études d'orthophonie. Karin avait fait un poste sur Facebook avec un magnifique dessin de Chloé. J'ai été voir son instagram et le moins que je saurais dire, c'est que j'ai été conquise.
J'ai toujours été fascinée par les belles peintures. Même lorsque je voyais de manière satisfaisante, je n'étais pas la partenaire idéale pour jouer au pictionary 🤣. Et c'est super frustrant parce que j'ai toujours eu beaucoup d'images, de couleurs, dans ma tête. J'ai même un vieux rêve inassouvi d'écrire des livres pour enfants avec de beaux dessins !
Aussi, lorsque l'idée de créer un site a émergé, ce fut une évidence pour moi de demander une illustration à Chloé. Tout s'est rapidement mis en place, elle m'a proposé plusieurs esquisses de Kira en train de me guider, sur plusieurs angles. Une fois mon choix fait, elle a ajouté les autres éléments, apporté les petites corrections demandées, et fait les ajouts souhaités.
J'étais si contente que j'ai eu envie de lui demander d'autres dessins : un pour représenter mes deux super-héroïnes et l'autre pour imager le livre d'or. Pour ces deux illustrations, ce fut encore plus facile, Chloé avait compris ce que j'avais dans la tête. J'ai accepté ses dessins du premier coup.
Je n'en suis pas restée là, je lui ai demandé si elle pouvait me faire un logo. J'ai tout autant apprécié le résultats. Ses dessins sont la première chose que mes visiteurs remarquent et complimentent. Ne vous étonnez pas si d'autres illustrations arriveront après coup, d'ailleurs, la bannière pour «L'itinéraire d'un chien-guide» a déjà été commandée !
Je remercie chaleureusement la
Fondation romande pour chiens guides d’aveugles, la
Fondation école suisse pour chiens d’aveugles Allschwilet la
Guiding Eyes for the Blindqui m'ont autorisée à insérer leurs photos© de leur chien respectif : Yuka, Kira et Panther (le père de Yuka) dans mon site.
Les photos libres d'utilisation, ont été téléchargées sur le site Pexels.
Les assemblages de photos et certains dessins pour les bannières ont été réalisés sur Canva où j'ai aussi trouvé quelques photos : celle qui illustre la dyslexie et celles qui composent la bannière de la page «Besoins spécifiques».
Les icônes composant les boutons dans la barre de menu ont été optimisés sur Icons8.
À l'instar Chloé, mes profs ont joué un rôle essentiel dans la création de ce site qui serait monolingue et bien boiteux sans le savoir-faire de mon prof de développement web et de l'aide incontournable à la traduction de mes 4 profs de langue. Et je suis heureuse d'avoir également pu compter sur la relecture attentive de l'homme de ma vie, londonien et prof d'anglais retraité.
Je peux bien sûr me lancer dans une explication du pourquoi et du comment je me suis lancée dans la révision de toutes ces langues en même temps mais ça risque d'être un peu long, aussi je m'en abstiendrai. Je me contenterai de présenter chacun de mes profs, chronologiquement, afin de tous les remercier, car ils me permettent de suivre des cours de qualité, dans la bonne humeur. Chaque carte que j'ai assemblée sur Canva vous dirigera sur leur page sur Preply. La localisation que j'ai indiquée est celle d'où ils sont issus.
👩💻 Sera rédigé plus tard.👩💻
👩💻 Sera rédigé plus tard.👩💻
👩💻 Sera rédigé plus tard.👩💻