Je pense que comme moi, vous n’avez jamais vu un fauteuil roulant monter des escaliers ? Hé ça va changer en lisant cet article puisque Toyota vient de présenter un truc complètement dingue lors du Japan Mobility Show 2025. Il s’agit d’un fauteuil roulant autonome avec des pattes articulées qui lui permettent de se déplacer comme un crabe.

L’accessibilité web c’est comme le tri sélectif… tout le monde dit que c’est génial mais azy, j’ai pas le temps. Et pourtant, c’est super important car près de 80% des pages web ont des problèmes de contraste de texte.

C’est le souci noumber ouane détecté sur le million de sites analysés chaque année par WebAIM . En gros, si vous avez un site, y’a de fortes chances que certains visiteurs galèrent à lire votre contenu, et je ne vous parle pas uniquement des personnes malvoyantes, hein… y’a aussi le daltonisme qui touche environ 8% des hommes et 0,5% des femmes. Rajoutez à ça les gens qui lisent leur téléphone en plein soleil, ceux qui ont une dalle de laptop toute pourrie, et vous comprendrez vite que le problème concerne pas mal de monde.

Alors est ce que vous connaissez les normes WCAG ?

Hé bien c’est le standard international pour l’accessibilité web. Ainsi pour être conforme au niveau AA (le minimum recommandé), votre texte doit avoir un ratio de contraste d’au moins 4,5:1 avec son arrière-plan. Pour le niveau AAA (l’idéal), c’est 7:1. Et là vous vous dites “super, je vais calculer ça à la main pour mes 47 couleurs de palette, mais va bien te faire cuire le cul, Korben”. (Oui, c’est comme ça que je vous imagine quand vous lisez mes articles).

Heureusement, y’a un outil qui vient de sortir et qui va vous changer la vie : CM-Colors . Vous lui donnez vos couleurs, et il les ajuste automatiquement pour qu’elles soient accessibles, le tout en modifiant les teintes le moins possible pour garder votre design intact.

L’installation est super fastoche…. C’est du Python donc un petit pip install cm-colors et hop c’est réglé. Ensuite, vous pouvez l’utiliser soit en ligne de commande directement sur vos fichiers CSS, soit via l’API dans votre code. Par exemple, vous avez un gris #5f7887 sur un fond #e6f0f5 qui passe pas les tests, hop, CM-Colors le transforme automatiquement en #5c6f7b et maintenant c’est conforme AA. Et la différence à l’œil nu est quasi invisible. Bref, c’est nickel pour l’accessibilité !

from cm_colors import ColorPair

# Your colors
pair = ColorPair("#999999", "#ffffff")

# Fix them and preview in the terminal
fixed_color, success = pair.make_readable(show=True)

print(f"Use {fixed_color} instead of #999999")
# Output: Use #8e8e8e instead of #999999

Le truc vraiment cool, c’est que l’outil gère plusieurs niveaux de lisibilité. Y’a “Readable” qui correspond au AA, “Very Readable” pour le AAA, et même une option large_text=True pour les gros titres qui ont des exigences moins strictes. Vous pouvez donc adapter selon vos besoins et pour les devs qui bossent sur de gros projets, y’a aussi une fonction make_readable_bulk qui permet de corriger plusieurs paires de couleurs d’un coup.

from cm_colors import make_readable_bulk

my_colors = [
 ("#777", "#fff"),
 ("#888", "#000"),
]

results = make_readable_bulk(my_colors)

for color, status in results:
 print(f"{color} is {status}")

Vous lui balancez une liste de tuples (texte, fond) et il vous retourne tout ça au propre. Et si vous voulez traiter directement vos fichiers CSS, la commande cm-colors styles.css génère un nouveau fichier styles_cm.css avec toutes les couleurs corrigées. L’outil peut même générer des rapports HTML pour visualiser les changements avant/après.

Alors oui, je sais, se taper de l’accessibilité c’est un peu relou car on a toujours l’impression que c’est du temps perdu sur des détails. Mais dites vous que ça impacte vraiment l’expérience de millions d’utilisateurs, donc ça vaut le coup d’y passer 5 minutes, surtout avec un outil automatisé !

Bref, CM-Colors c’est gratuit, c’est open source sous licence GPL-3, et ça peut vous éviter pas mal de galères. Toute la documentation est ici et y’a même une démo interactive sur leur site si vous voulez tester avant d’installer.

Je suis dégoûté parce que je viens de payer un abonnement pour un logiciel qui fait exactement ça, sauf que bah là, Handy , c’est gratuit. L’idée derrière ce logiciel, c’est un outil de speech to text qui fonctionne uniquement en local. Pas d’abonnement, tout est gratuit, et pas de cloud… il faut juste configurer un raccourci clavier. Et ensuite vous parlez et le texte apparaît comme par magie.

A la base, l’idée de cet outil est venue d’un accident. CJ se casse le doigt et il est plâtré pendant six semaines. Du coup il lui est impossible de taper normalement. Il cherche alors des outils de transcription vocale.

Par exemple, Dragon NaturallySpeaking, mais bon, 100 balles, ça fait chier. Google Docs aussi propose ce genre de fonctionnalités, mais uniquement en ligne. Et ça envoie tout dans le cloud, donc bonjour à confidentialité. Quant à Windows Speech Recognition, c’est bugué et assez limité. Bref, toutes les alternatives qu’il a trouvées étaient soit payantes, soit nécessité une connexion permanente vers des serveurs tiers.

Alors CJ a fait ce que font les devs quand un problème les agace. Non pas aller sur Reddit pour dire de la merde random sur moi, mais plutôt coder une solution qui fonctionne super bien !

Et au lieu de la garder pour lui ou de la rendre payante lui il a décidé de tout mettre en open source avec une licence MIT.

Et ce que vous êtes en train de lire précisément maintenant, et bien je suis en train de le dicter. Et ça marche dans les emails, les formulaires web, les éditeurs de texte, peu importe. Et comme je vous le disais, toute la transcription se fait localement sur votre machine. Et tout ça grâce à quoi ? Et bien grâce à Whisper d’OpenAI, dont je vous ai déjà parlé beaucoup de fois.

Handy est codé en Rust pour la performance et la sécurité et surtout cross plateforme, c’est-à-dire qu’il marche ou Linux, macOS et Windows. Et au niveau de la config, il y a quelques options comme le choix de la langue ou le mode d’enregistrement avec le raccourci clavier, soit vous faites du push to talk, soit vous faites une écoute en continu.

Ce truc est génial aussi bien pour l’accessibilité que pour la reconnaissance vocale en elle-même qui est plutôt utile dans la vie de tous les jours. D’ailleurs, il y a plusieurs modèles IA disponibles, comme tous les modèles Whisper, mais aussi un modèle que je ne connaissais pas, qui s’appelle Parakeet et qui franchement fonctionne très bien. C’est celui que j’utilise actuellement.

Testez si ce truc fonctionne bien sur votre vieux PC mais moi en tout cas sur mon Mac de dernière génération c’est encore plus rapide que ce que j’avais avec un modèle Whisper sur mon outil payant.

Voilà, si vous cherchiez un outil de reconnaissance vocale, vous pouvez vous arrêter là parce que vous venez de trouver. Et non pas parce qu’il est parfait, mais parce que comme c’est open source, vous pouvez vous-même le rendre parfait pour vos usages (Le code est sur GitHub ).

Merci à Lilian pour le partage de ce projet absolument génial !

Article dictée intégralement à l’aide de Handy (et corrigé manuellement pour les quelques erreurs de transcription)

• lien nᵒ 1 : Lien vers l'interview complète
• lien nᵒ 2 : Page sur l'accessibilité d'Emmabuntüs
• lien nᵒ 3 : Sites réalisés par Stéphane : DOS Collection
• lien nᵒ 4 : Sites réalisés par Stéphane : Monochrome Web : Site "Par & Pour Déficients Visuels!"!
• lien nᵒ 5 : Sites réalisés par Stéphane : Sonochrome Web : Site "Par & Pour Déficients Visuels"

Commentaires : voir le flux Atom ouvrir dans le navigateur