De la même manière qu'on peut adapter les contenus d'un document bureautique (dans Word, dans LibreOffice), il est également possible d'adapter le contenu des pages web que l'on visite. C'est un autre aspect incontournable et indispensable à connaître si on veut pouvoir proposer des documents parfaitement adaptés, quel que soit le type de support (bureautique ou web).
Plusieurs solutions existent. Nous allons voir ici les possibilités offertes par l’excellent mode de lecture du navigateur Firefox, puis celles d'une extension pour les navigateurs Chromium (ou Chrome) qui permet de retrouver un mode de lecture dans ces deux navigateurs. Enfin, on présentera une extension spécifique qui permet d'adapter de manière très personnalisée, plutôt pour les élèves dys, les contenus de n'importe quelle page web.
Utiliser le mode lecture du navigateur⚓
Adapter ses pages web dans Firefox pour une lecture plus facile par les élèves⚓
Difficulté : Aucune
Utilisateurs : enseignants 1er et 2nd degrés
Niveau scolaire : de la maternelle au lycée
Présentation et intérêt pédagogique
Certains sites internet proposent des contenus dont la lisibilité n'est parfois pas très bonne, pour diverses raisons : taille de police trop petite, interlignage trop faible, largeurs de colonne trop importantes, contrastes trop faibles entre la couleur de police et la couleur du fond, présentations complexes sur plusieurs colonnes ou blocs, etc. Tous ces éléments rendent l'accès au contenu difficile pour certains lecteurs.
Il est possible d'adapter de manière personnalisée l'affichage de la page pour la rendre bien plus lisible en activant le mode de lecture du navigateur. Celui du navigateur Firefox est le plus performant et celui qui permet le plus d'adaptations possibles.
Exemple d'utilisation⚓
Exemple de page Wikipedia dans son affichage normal.
La même page Wikipédia dont l'affichage est adapté au moyen du mode de lecture de Firefox
Comment faire⚓
Méthode :
Cliquer sur l'icône
pour activer le mode lecture sur la page web que vous êtes en train de visualiser (cette icône se trouve juste à droite de la barre d'adresses du navigateur).
L'affichage de votre page est alors modifié instantanément pour favoriser la lecture du contenu.
On va pouvoir personnaliser l'apparence des contenus pour les adapter à ses propres besoins en affichant les différentes options possibles.
Pour cela, il faut cliquer sur Aa dans la barre d'icônes en haut à gauche de l'écran.
Plusieurs options apparaissent alors ; elles permettent d'adapter le texte en fonction des souhaits de chacun.
➜ Choisir une police Serif ou Sans Serif
l'utilisation d'une police de la famille « Sans Sérif » est recommandée pour augmenter la lisibilité, spécialement pour des élèves à besoins éducatifs particuliers.
➜ Augmenter ou diminuer la taille de police
Chacun peut ainsi adapter le texte de manière complètement personnalisée, en fonction de ses besoins.
➜ Augmenter ou diminuer la largeur de colonne
Pour les élèves dont la lecture est peu fluide, la tâche sera facilitée par une largeur de colonne plus réduite.
➜ Augmenter ou diminuer la hauteur de l'interligne
Plus l'élève éprouvera des difficultés, plus on augmentera la hauteur de l'interligne, de manière à bien visualiser les différentes lignes du texte.
➜ Choisir la couleur de l'arrière plan de la page (clair, sépia ou sombre)
Une couleur d'arrière-plan plus « douce », moins contrastée, comme le sépia par exemple, facilitera la lecture à beaucoup d'élèves dys.
Selon certaines situations de handicap visuel, la lecture sera plus confortable en blanc sur fond noir.
Il est également possible de faire oraliser le texte de la page pour une lecture automatique du contenu par une voix de synthèse.
Cette fonction n'est disponible que si au moins une voix est installée sur l'ordinateur. C'est généralement le cas sur des ordinateurs récents.
Il est possible d'ajouter plusieurs voix, dans plusieurs langues.
Il suffira de cliquer à nouveau sur l'icône
pour repasser l'affichage en mode « normal ».
Ressources associées⚓
Retirer tout le superflu des pages web grâce au mode lecture :
https://support.mozilla.org/fr/kb/retirer-tout-le-superflu-des-pages-web-grace-au-mode-lecture
Comment activer le mode lecture dans Firefox pour Android :
https://support.mozilla.org/fr/kb/activer-mode-lecture-firefox-android
Connaissez-vous vraiment le mode lecture de Firefox ?
https://blog.mozfr.org/post/2017/05/Connaissez-vous-vraiment-mode-lecture-Firefox
Complément :
Une alternative possible dans les navigateurs Chromium ou Chrome⚓
L'extension Just Read
Just Read
Pour les utilisateurs du navigateur Chrome (et de Chromium), il n'existe pas de mode de lecture dans ces navigateurs. Cependant, une extension permet de retrouver des fonctionnalités similaires.
C'est l'extension Just Read :
https://chrome.google.com/webstore/detail/just-read/dgmanlpmmkibanfdgjocnabmcaclkmod
Quand l'extension est installée dans votre navigateur, on voit son icône apparaître en haut à droite de l'écran : 
Méthode : Activer l'extension Just Read
Pour utiliser cette extension et modifier ainsi l'affichage d'un page eb dans votre navigateur Chromium ou Chrome, il suffit de cliquer sur son icône.
➜ Exemple d'une page Wikipedia dans son affichage normal
➜ Exemple de cette même page Wikipedia dans son affichage modifié par l'extension Just Read, avec les réglages par défaut, avant optimisation et paramétrage plus précis, adapté aux besoins de l'utilisateur.
On notera que l'extension, dans es réglages par défaut, a diminué la largeur de la colonne (c'est déjà bien plus confortable pour le lecteur), a légèrement augmenté la taille de police.
Il est bien évidemment possible de choisir ses propres réglages pour les adapter le mieux possible aux besoin du lecteur, aux difficultés de l'élève qui aura à utiliser cette extension.
Pour cela, il faut éditer les styles appliqués par l'extension, en cliquant sur l'icône en forme de pinceau, dans les icônes de Just Read :
Méthode : Modifier les réglages de Just Read
En cliquant sur cette icône en forme de pinceau, on va pouvoir modifier les styles utilisés par Just Read pour afficher les pages Web.
On voit qu'on utilise le thème par défaut, appelé « default-styles.css », avec :
la taille de police est réglée à 17 pixels
la largeur de colonne est réglée à 600 pixels,
la couleur du texte réglée sur un gris sombre (#333333)
l'arrière-plan est de couleur blanche (#ffffff)
la couleur des liens et des liens survolés est réglée sur deux teintes de bleu
On pourra dans un premier temps modifier ces quelques réglages directement dans la petite fenêtre de l'extension, on pourra par exemple choisir :
une taille de police un peu plus grande, à 24 pixels
une colonne un peu plus large à 640 pixels
une couleur de texte un peu plus sombre : #111111
un arrière-plan de couleur moins agressive, par exemple en sépia : #f5e0af
Après avoir fait ces modifications, il faut les sauvegarder pour que ces réglages soient désormais utilisés pour tous les sites qu'on aura besoin d'adapter.
Pour cela, on cliquera sur la ligne « Save and close » au bas de la fenêtre de l'extension.
En faisant cela, on va créer un nouveau thème avec les styles qu'on vient de définir, ce thème sera nommé automatiquement en « default-styles(1).css » puisqu'il vient d'être fait en modifiant le thème par défaut.
Complément : Modifier des styles - Réglages avancés
Il est possible de modifier plus en profondeur les styles utilisés par Just Read pour adapter l'affichage des pages web.
On pourra en particulier modifier la police de caractère utilisée par défaut, qui est une police de la famille des polices « Sérif », ce qui n'est pas conseillé dans le cadre de l'adaptation de documents pour des élèves avec des difficultés en lecture. On privilégiera des polices « Sans sérif » (cf. « Les règles à connaître »).
Pour accéder à ces réglages avancés, on va donc cliquer sur le la ligne « openFullStyles » de la fenêtre de Just Read.
Un nouvel onglet va alors s'ouvrir, dans lequel on aura accès à une fenêtre permettant d'éditer les styles CSS utilisés par Just Read, ici, en l'occurrence, les styles du thème « default-styles(1).css » que j'ai commencé à modifier un peu plus haut.
On peut constater, à la ligne 2, que la police utilisée est « Merriweather », une police sérif.
On va donc modifier cette ligne 2 pour remplacer cette police par celles qu'on veut utiliser, de la famille des polices Sans sérif :
on supprime la mention Merriweather pour la remplacer – par exemple – par Verdana, Tahoma, Trebuchet
on remplace la mention serif par Sans-serif
Le fait de mettre 3 noms de polices différentes permettra à votre ordinateur d'en utiliser une autre si la première n'est pas présente. Par exemple, ici, c'est police Verdana qui sera utilisée, à défaut, l'ordinateur utilisera Tahoma, et à défaut encore, il utilisera Trebuchet, sinon toute autre police de la famille des polices Sans sérif.
ATTENTION :
Ne pas modifier la syntaxe de la ligne : ne pas enlever de virgules ou points-virgules ou signes deux-points, ou accolades, etc.
On ne touche à RIEN d'autre que le nom de la police et la mention serif.
On n'oublie pas d'enregistrer ces modifications, évidemment, en cliquant sur le bouton « Save style changes ». On peut ensuite refermer la petite fenêtre de modification des styles ainsi que le nouvel onglet qui s'était ouvert.
Si on actualise la page Web sur laquelle on se trouvait, et qu'on relance Just Read en cliquant sur son icône, la mise en forme de la page web est désormais adaptée avec tous nos réglages ET avec la police sans sérif Verdana.
Les plus curieux s'apercevront qu'on peut également modifier la hauteur d'interlignage, en allant modifier la valeur de la propriété « line-height », toujours dans cette ligne 2 des styles CSS qui définit les styles pour le corps du texte, dans la page visitée.
Ainsi, au lieu de la valeur line-height: 1.6; qui est la valeur par défaut, on pourra augmenter un peu cette valeur pour mettre line-height: 1.8; ou même line-height: 2.0;
(ne pas supprimer le point-virgule qui suit la valeur numérique).
Méthode : Supprimer des éléments inutiles ou gênants dans la page
Just Read permet également, de faire disparaître de l'affichage certains éléments de la page qui peuvent gêner la lecture : zones de texte additionnelles, images, légendes, etc.
Exemple sur l'image ci-contre, les deux images prennent beaucoup de place sur la page et gênent l'accès direct au contenu intéressant de la page. On va pouvoir supprimer ces deux images de l'affichage.
Il faut pour cela utiliser le « Deletion mode », c'est à dire le mode effacement.
Pour activer ce mode effacement, il suffit de cliquer sur l'icône en forme de corbeille.
Une fois que ce mode est activé, l'icône apparaît légèrement encadrée en rouge.
Elle n'est plus grisée, mais d'une couleur noire plus marquée.
Dès que ce mode est activé, quand on survole avec la souris les différents éléments qui composent le contenu de la page, ces éléments se mettent en surbrillance, en rouge.
Dès que l'élément voulu est en surbrillance rouge, il suffit de cliquer dessus pour le faire disparaître, tout simplement.
On peut visualiser la manipulation à faire sur cette courte vidéo :
Impossible d'accéder à la ressource audio ou vidéo à l'adresse :
La ressource n'est plus disponible ou vous n'êtes pas autorisé à y accéder. Veuillez vérifier votre accès puis recharger le média.
Pour quitter ce mode d'effacement, il suffit de cliquer à nouveau sur l'icône Corbeille.
