Social Script
SocialScript est un simulateur interactif d'entraînement aux situations sociales, développé dans le cadre d'un workshop HTML/CSS/JavaScript de ma formation FullStack JavaScript Developer à Interface3. Le projet répond à un besoin d'apprentissage explicite des codes sociaux dans un environnement sécurisé, particulièrement utile pour les personnes neurodivergentes.
Objectif du projet
Ce projet vient d'un besoin que j'ai rencontré personnellement. Étant autiste et TDAH, c'est par la répétition et l'analyse consciente des interactions que j'ai acquis des compétences sociales qui ne me venaient pas naturellement. J'ai toujours rêvé d'un environnement où m'entraîner sans craindre les malentendus ou les faux pas du temps réel. C’est pour cela que j’ai eu envie de créer un simulateur où les personnes neurodivergentes peuvent expérimenter, analyser et progresser dans un cadre structuré et bienveillant.
Fonctionnalités clés :
- Affichage dynamique : Gestion des scénarios via JavaScript et un JSON server.
- Génération d'avatars : Utilisation de Dicebear API pour générer des interlocuteur..ices uniques.
- Feedback pédagogique : Explication détaillée des codes implicites et possibilité de rejouer pour explorer toutes les issues possibles.
- Ressources : Pages comprenant diverses ressources facilement accessibles grâce au champ de recherches et labels.
Design
Mes recherches graphiques ont abouti à un design qui reprend le logo de l'autisme (un sigle infini) en l'intégrant aux S de Social Script. Cette fusion symbolise une boucle d'apprentissage continue et fluide tout en respectant les normes WCAG AAA voulues sur le site.
L'Accessibilité
Pour un projet s'adressant aux personnes neurodivergentes, l'accessibilité n'est pas une option, mais le socle de l'expérience utilisateur. Mon défi a été de réduire la charge cognitive tout en assurant une navigation robuste pour les technologies d'assistance.
Navigation sémantique native
J'ai privilégié l'utilisation des balises HTML5 <details> et<summary> pour les FAQ et les sections d'analyse.
<details>
<summary>Titre de la FAQ</summary>
<p>Contenu accessible par défaut.</p>
</details>
L'intérêt technique : Ces balises offrent une interactivité native sans JavaScript. Elles sont accessibles par défaut : le navigateur gère lui-même le focus clavier et communique automatiquement l'état aux lecteurs d'écran.
Gestion proactive du Focus
Dans une application dynamique où le contenu est généré par JavaScript, le curseur clavier se perd souvent lors d'un rafraîchissement. J'ai implémenté un système de Focus Management.
const nextBtn = document.querySelector('.option-btn');
nextBtn.focus({ focusVisible : true });Pour éviter la perte de repères lors d'interactions dynamiques, la méthode .focus() est déclenchée à chaque validation. Elle force le passage à l'élément suivant, optimisant ainsi l'accessibilité et la fluidité de la navigation au clavier. État visuel du bouton lorsqu'il reçoit automatiquement le focus.
Ce que ce projet m'a appris
Ce projet m'a permis de transformer mes engagements en faveur de l'inclusion en compétences techniques. En m'appuyant sur les standards du W3C, j'ai consolidé ma pratique de l'accessibilité native.
- L’accessibilité comme socle technique : Ce projet m’a permis de passer de la théorie aux standards du W3C. J’ai consolidé ma pratique de l’accessibilité native en m’appuyant sur les principes POUR du WCAG 2.2 : Perceivable, Operable, Understandable, Robust.
- Maîtrise des outils de diagnostic : L’utilisation systématique des extensions Wave et axe DevTools fait désormais partie intégrante de mon workflow. Le test ultime via VoiceOver a été l’étape la plus formatrice, m’obligeant à ajuster l’annonce des feedbacks pour qu’ils soient aussi fluides à l’oreille qu’à l’œil.
- Optimisation de la charge cognitive : J’ai appris à appliquer le concept du "Less is More" pour les interfaces neuro-inclusives, en purgeant les distractions visuelles et en stabilisant la navigation pour réduire la fatigue attentionnelle.
- Architecture de données et limites : L’utilisation de JSON Server m’a permis de modéliser des arbres de décision complexes. Cela m’a également sensibilisée aux enjeux du passage d’un prototype à une application de production nécessitant une API REST plus robuste.
Analyse critique du workflow et perspectives
Le développement de ce simulateur m'a forcée à structurer une logique conditionnelle avancée en JavaScript. J'ai appris à gérer des flux de données asynchrones tout en maintenant un état d'interface cohérent, garantissant que chaque branche du scénario reste accessible et réjouable.
Forte de cette base, je travaille actuellement à une refonte UI (via des gestionnaires d'état) pour optimiser l'expérience et l'accessibilité, notamment par l'ajout d'un mode "Surcharge Sensorielle". En parallèle, je prépare l'évolution du projet vers une architecture Full-Stack sécurisée (API RESTful, authentification JWT, base de données) afin de transformer ce prototype statique en une véritable plateforme communautaire et collaborative.
Ce projet vous a plu ?
Je suis actuellement à la recherche de nouvelles opportunités. Discutons ensemble de vos besoins en développement web et accessibilité.
Me contacter