Mathématice, intégration des Tice dans l'enseignement des mathématiques  

Blockly et handicap : quelques pistes
Moteur de recherche
Mis en ligne le 10 février 2017, par Patrick Raffinat

Cet article peut être librement diffusé à l’identique dans la limite d’une utilisation non commerciale suivant la license CC-by-nc-nd : http://creativecommons.org/licenses/by-nc-nd/3.0/fr/legalcode

A) Introduction

Dans le N°52 de MathémaTICE, C. Declercq a souligné le défaut d’accessibilité de Scratch aux élèves présentant divers handicaps. Dans la conclusion de son article, il a appelé à commentaires et à contributions les lecteurs intéressés par cette problématique. Cela m’a conduit à approfondir le sujet pour Blockly, un autre logiciel de programmation par blocs que je connais beaucoup mieux que Scratch.

Au départ, je pensais simplement à réagir (par mail) à une remarque de C. Declercq qui déplorait la difficulté de « lecture écran d’un programme sur la version de Scratch en ligne » : je lui aurais alors signalé que Blockly ne nécessitait pas de recours à des « outils externes de type loupe », puisqu’il peut facilement être configuré pour augmenter la taille des blocs avec la molette de la souris. Mais comme le sujet de l’accessibilité a piqué ma curiosité, j’ai finalement décidé de ne pas en rester là et d’explorer d’autres pistes :

  • grossissement des menus contextuels et des bulles d’aide (illustration).
  • navigation dans un programme à l’aide du clavier (flèches de déplacement).
  • installation d’un retour vocal pour indiquer, en cas de handicap visuel important, sur quel bloc on se trouve.
  • ...

Ma curiosité m’a même conduit à explorer la reconnaissance de la parole, un domaine dont j’ignorais tout, y compris en tant que simple utilisateur. Avant d’y revenir en détail dans l’article, voici quelques résultats obtenus :

B) Piste 1 : agrandir pour mieux voir

Menus

Comme je l’ai signalé en introduction, Blockly permet d’agrandir les blocs d’un programme avec la molette de la souris. Mais il n’y a hélas pas de dispositif prévu pour agrandir les menus, que ce soit le menu principal ou les nombreux menus contextuels.

J’ai donc cherché dans les sources de Blockly des feuilles de styles, c’est à dire des fichiers dédiés à la mise en forme de pages web. Mais, contrairement à de nombreuses applications web, ce n’est pas cette solution qui a été retenue par les développeurs de Blockly, ce qui a compliqué ma tâche [1].

Après diverses péripéties, voici le résultat auquel je suis parvenu :

Boîtes de dialogue

Les boîtes de dialogue utilisées par Blockly, que ce soit pour afficher les résultats d’un programme ou pour saisir des informations, sont bien trop petites pour un déficient visuel : donc, j’ai cherché comment y remédier.

Affichage

Une technique bien connue des développeurs web consiste à rediriger l’affichage à l’intérieur de la page web, ce que j’ai fait sous le programme. Pour éviter d’avoir à utiliser la barre de défilement quand le texte dépasse trois lignes, j’ai ajouté un bouton « Plier / Déplier » qui masque (ou fait réapparaître) le programme.

Ce dispositif de « pliage/dépliage » se révèle également très pratique s’il y a des informations supplémentaires à afficher, ce que vous pouvez vérifier avec :

  • l’extension « tortue Sofus », où la trace de la tortue et un éditeur Python peuvent être pliés ou dépliés (tester).
  • l’extension « tableur Xcas », où le tableur et un éditeur Javascript peuvent être pliés ou dépliés (tester).

Pour l’extension « tableur Xcas », j’ai aussi grossi le contenu du tableur.

Saisie

Même si un programme ne comporte aucune instruction de saisie, les élèves doivent quand même saisir des informations dans une boîte de dialogue : c’est notamment le cas lorsqu’ils créent des variables. Donc, il est important de trouver une alternative à la boîte de dialogue standard, ce qui est particulièrement ardu en Javascript.

La grosse difficulté est de rendre la saisie bloquante, ce qui signifie que l’exécution d’un programme Blockly est suspendue tant que l’utilisateur n’a pas validé la saisie. Compte-tenu de l’ampleur de la tâche, j’ai opté pour un compromis facile à mettre en œuvre :

  • la boîte de saisie standard continue à être affichée, en raison de son comportement bloquant.
  • l’utilisateur n’a plus besoin d’y lire la question posée [2], puisqu’elle est formulée vocalement (ou reproduite textuellement en bas de l’écran, avec une taille de police plus adaptée)
  • l’utilisateur peut taper sa réponse sans avoir à sélectionner la zone de texte de la boîte de dialogue, puisque les caractères qu’il tapera au clavier y seront automatiquement insérés jusqu’à une validation avec la touche « entrée »

C) Piste 2 : navigation dans les blocs

Flèches de déplacement

Pour naviguer dans les blocs, un dispositif alternatif à la souris peut être utile à des élèves en situation de handicap moteur.

Parmi les dispositifs alternatifs, C. Declercq évoque les « raccourcis clavier », ce qui m’a conduit à rechercher (sans trop y croire) des informations exploitables sur la gestion des évènements liés au clavier dans le forum de Blockly. Et, comme cela arrive de temps en temps, j’ai trouvé une pépite à partir de ce message du forum : une démonstration très convaincante, et des fichiers que j’ai téléchargés [3] afin de pouvoir les réutiliser dans mes propres extensions de Blockly.

Pour tester la navigation avec les flèches du clavier, il faut cliquer sur ce lien, puis choisir un des programmes disponibles (bouton Load). Je vous invite vivement à essayer, car j’ai été bluffé par les résultats obtenus.

Outre les flèches du clavier, on peut aussi utiliser la touche de tabulation qui, pour l’exemple ci-dessous, ouvre même la liste déroulante du bloc atteint à partir du bloc Si :

Pour finir, j’ajouterai que la touche espace du clavier fait apparaître le menu contextuel d’un bloc.

Bloc courant et message vocal

Pour aider les élèves souffrant d’un handicap visuel important à se repérer lorsqu’ils naviguent dans les blocs d’un programme, on peut aussi songer à leur donner des informations sur le bloc courant. Cela peut être un message textuel (en bas de page et très agrandi) ou un message vocal : tester.

D) Piste 3 : reconnaissance vocale

Introduction

Dans son article, C. Declercq a émis le souhait que des commandes vocales soient proposées comme dispositif alternatif à la souris pour des handicapés moteur.

J’ai donc exploré cette piste avec Chrome, le seul navigateur à proposer la reconnaissance vocale sur mon ordinateur portable. L’inconvénient de Chrome est que Google facture ce service au delà d’une heure d’utilisation par mois. Mais comme Chrome respecte les préconisations du W3C, organisme qui établit les normes du web, mon code devrait être portable lorsque d’autres navigateurs intègreront la reconnaissance vocale : or, cela semble être en bonne voie pour Firefox...

Avant d’écrire la moindre de ligne de code, j’ai d’abord effectué quelques tests sur le site http://monwebfacile.free.fr/ (rubrique « synthèse vocale ») pour savoir si la reconnaissance vocale de Chrome donnait des résultats concluants. Globalement c’est le cas, mais certaines surprises ne sont pas à exclure : par exemple, Chrome reconnaît correctement « variable y égal x », mais transforme le « x » en « 6 » pour « variable y égal deux fois x plus trois ». J’ai aussi observé sous quelle forme était retranscrit un ordre vocal, information essentielle pour pouvoir ensuite l’interpréter : par exemple, « variable y égal vingt-et-un fois z plus quatre » est retranscrit en « variable y = 21 x z + 4 ».

Dans la suite de l’article, je ferai part des premiers résultats que j’ai obtenus : aux lecteurs en charge d’élèves handicapés de me signaler si mon prototype mérite ou non d’être poursuivi, avec les pistes à privilégier en cas de réponse positive.

Prototype

Le prototype peut être testé à partir de ce lien.

Chaque commande vocale est lancée en cliquant sur le bouton « Son ». Si vous ne voulez pas attendre que le logiciel détecte la fin de la reconnaissance vocale, cliquez sur le bouton « Fin Son ».

Si vous ne disposez pas de la synthèse vocale, il y a un bouton (nommé Alternative) permettant de visualiser l’effet d’une commande en tapant un texte dans une boîte de saisie : par exemple vous pouvez créer des blocs en entrant « variable y = 2 * y + 10 ».

Variables

La commande « variable ... » peut-être utilisée de diverses façons :

  • « variable z » déclare une nouvelle variable nommée z, ce qu’on peut vérifier en allant ensuite dans le menu « Variables » de Blockly.
  • « variable z égal trois » affecte la valeur 3 à la variable z, qu’elle ait été déclarée ou non auparavant.
  • « variable z moins trois » diminue la valeur de z de 3, en créant un bloc « diminuer » (spécifique à certaines extensions de Blockly).
  • ...

La valeur affectée à une variable peut être :

  • un nombre (« variable z égal trois » par exemple).
  • un texte sans espace (« variable z égal chien » par exemple).
  • une variable (« variable y égal z » par exemple), z étant interprété comme une variable et non un texte (à cause de « variable z égal trois »).
  • un calcul (voir section Calculs).

Les blocs créés par une affectation sont reliés au bloc courant, s’il y en a un et si la liaison est licite :

L’affectation (« variable z égal trois ») est insérée entre le bloc courant (« afficher ici ») et son successeur (« afficher après »), et devient à son tour le bloc courant. Si le bloc courant avait été le bloc « ici », l’affectation aurait été placée dans le coin supérieur gauche de la fenêtre, sans être reliée à d’autres blocs.

Calculs

Plusieurs opérateurs arithmétiques sont disponibles : + (plus), - (moins), * (fois), / (divisé). En voici quelques exemples d’utilisation :

  • « variable y égal deux plus trois plus quatre plus cinq » : interprété en 2+(3+(4+5))).
  • « variable z égal trois plus deux fois y » : interprété en 3+(2*y)
  • « variable z égal deux fois y plus trois » : interprété en 2*(y+3), et pas en (2*y)+3 comme le veut la règle de priorité des opérateurs.

Comme il ne me semble guère raisonnable d’inclure plusieurs « parenthèse ouvrante (fermante) » dans un message vocal, j’ai cherché un moyen plus pratique pour pouvoir gérer les « calculs complexes ». Il consiste à introduire un premier calcul simple (un nombre, une variable, un calcul ne comportant qu’un seul type d’opérateur), puis à se positionner sur le bloc résultant (ou un sous-bloc) afin de lui appliquer une transformation. Voici des exemples permettant de clarifier mon discours :

  • « variable y égal deux plus trois plus quatre plus cinq », qui ne comporte que l’opérateur +, est considéré comme étant un calcul simple.
  • "variable z égal deux fois y" peut servir de point de départ pour obtenir (2*y)+3 ou 2*(y+3), en appliquant la transformation « plus trois » :
    • si le bloc « 2*y » est sélectionné, on obtient (2*y)+3
    • si le bloc « y » est sélectionné, on obtient 2*(y+3)

Des fonctions mathématiques peuvent être utilisées, ce qui est illustré dans l’onglet « Exemple » avec la fonction « racine carrée ».

Conditions

Des conditions peuvent être introduites vocalement avec les blocs « si » et « tantque », par exemple :

  • « si y égal deux »
  • « répéter tantque y fois y inférieur sept »

On ne peut introduire à cette occasion que des conditions élémentaires : un calcul, suivi d’un opérateur de comparaison (égal, inférieur, supérieur) et d’un calcul. Mais ces conditions élémentaires peuvent ensuite être complétées :

  • après avoir sélectionné le bloc « y=2 », la commande « ou y supérieur cinq » permet d’obtenir « si (y=2) ou (y>5) ».
  • après avoir sélectionné le bloc « y>5 », la commande « et y inférieur neuf » permet d’obtenir « si (y=2) ou ((y>5) et (y<9)) ».

Boucles

Outre la boucle « tantque » évoquée dans la section « Conditions », il est possible de gérer vocalement les boucles « répéter » et « pour », comme l’illustrent ces exemples :

  • « répéter deux fois trois »
  • « répéter pour y entre deux plus deux et cinq »

Les commandes « répéter tantque... » et « répéter pour... » peuvent être abrégées en « tantque ... » et « pour ... » en version textuelle, mais pas en version vocale : par exemple, « pour i entre un et cinq » a en effet été interprété en « vas-y entre 1 et 5 » !

Le « répéter pour » ne règle d’ailleurs pas le problème pour la variable i : « répéter pour i entre un et cinq a en effet été interprété en « répéter pourri entre 1 et 5 » ! Mais heureusement, cela marche mieux avec d’autres noms de variables.

Exemple

Le service de reconnaissance vocale de Chrome étant payant au delà d’une certaine durée, j’ai construit ce programme avec des commandes textuelles (bouton Alternative). Je me suis imposé comme règle de ne jamais déplacer le moindre bloc avec la souris :

  • l’attachement (au bloc courant) des blocs créés par une commande est géré par la commande.
  • en cas d’erreur, je n’ai donc pas supprimé de blocs en les envoyant à la poubelle, mais avec la touche de suppression.

En procédant ainsi, j’ai obtenu 4 premiers blocs reliés les uns aux autres :

  • variable a = 1
  • variable b = -3
  • variable c = 2
  • variable delta = b * b

Pour compléter le calcul de delta, j’ai sélectionné le bloc « b*b » auquel j’ai appliqué cette commande : « -4*a*c ». J’ai ensuite sélectionné le bloc « variable delta = ... » pour que lui soit attaché un bloc « si » avec cette commande : « si delta > 0 ».

Pour que l’affichage de la première solution de l’équation soit inséré dans l’instruction conditionnelle et non après, j’ai fait précéder la commande d’affichage par le mot faire : « faire afficher -b - racine delta ». J’ai ensuite complété le calcul en sélectionnant le bloc « -b - racine delta », puis en lui appliquant cette commande : « / 2 * a ».

E) Conclusion

Les divers articles que j’ai publiés dans MathémaTICE témoignent de l’intérêt que j’accorde à l’enseignement du « codage » au lycée et au collège. Mais, mea culpa, je ne m’étais jamais préoccupé de problèmes d’accessibilité avant d’être alerté sur ce sujet par l’article de C. Declercq.

Son article m’a fait prendre conscience que des efforts devaient être menés pour rendre l’introduction de la programmation par blocs (en cycle 3 et en cycle 4) plus accessible à des élèves en situation de handicap. C. Declercq a mentionné Scratch, le logiciel le plus emblématique, mais j’ai préféré me pencher sur Blockly parce que je me sentais plus compétent pour y apporter des réponses satisfaisantes. Je laisse les lecteurs en juger, en particulier ceux qui travaillent avec des élèves en situation de handicap et connaissent réellement leurs besoins.

Des élèves sans handicap peuvent également tirer parti de mon travail : par exemple, le recours à des commandes a permis d’éviter plusieurs manipulations fastidieuses de blocs pour traiter l’équation du second degré. De plus, cet article m’a conduit à améliorer l’ergonomie des extensions « tortue » et « tableur ».

Si des programmeurs (chevronnés) souhaitent développer des extensions adaptées au handicap, ils peuvent librement s’inspirer des codes sources que je mets à leur disposition. J’ai aussi pensé aux utilisateurs, qui pourront modifier un fichier de configuration pour notamment adapter la taille des menus et des bulles d’aide.

Zip - 275 ko
les fichiers sources de plusieurs exemples

La partie relative aux commandes vocales n’est pas incluse dans ce fichier : il me reste à la développer et à la documenter, ce qui est prévu pour un prochain article.


notes

[1Pour les connaisseurs, les styles utilisés par Blockly ne sont pas définis dans des feuilles CSS, mais déduits d’un tableau Javascript dont le contenu varie suivant les versions de Blockly...

[2C’est vrai avec Firefox et Internet Explorer, mais hélas pas avec Chrome pour lequel il me reste à trouver une solution alternative.

[3Le site de téléchargement est https://github.com/toebes-extreme/blockly. Les fichiers à récupérer sont blockly_compressed.js et blocks_compressed.js, auxquels il faut ajouter ceux du dossier « media ».

Réagir à cet article
Vous souhaitez compléter cet article pour un numéro futur, réagir à son contenu, demander des précisions à l'auteur ou au comité de rédaction...
À lire aussi ici
MathémaTICE est un projet
en collaboration avec
Suivre la vie du site Flux RSS 2.0  |  Espace de rédaction  |  Nous contacter  |  Site réalisé avec: SPIP  |  N° ISSN 2109-9197