Créer du matériel pédagogique accessible: quelques actions clés - Centre de services et de ressources en technopédagogie (CSRT)

Rendre vos contenus pédagogiques inclusifs et accessibles

Adopter de bonnes pratiques d’accessibilité ne profite pas seulement aux personnes en situation de handicap. Cela renforce la portée et l’efficacité de la communication pour l’ensemble des personnes étudiantes, tout en facilitant l’apprentissage.

Pour optimiser l’accessibilité de votre matériel pédagogique et le rendre plus inclusif, il est nécessaire de comprendre l’accessibilité et d’appliquer quelques actions clés:

Porter attention aux caractéristiques sensorielles
Avoir des textes détectables pour ses images informatives
Fournir un équivalent textuel pour ses fichiers audio et vidéo
Appliquer de bonnes pratiques d’écriture
Avoir assez de contraste
Employer adéquatement les éléments structuraux

Comprendre l’accessibilité

L’accessibilité consiste à offrir des contenus, des produits ou des services perceptibles, compréhensibles et utilisables par toutes et tous, y compris par les personnes ayant des limitations permanentes ou temporaires telles que:

limitations de la vue (daltonisme, sensibilité aux contraste, etc.)
limitations de l’ouïe
limitations cognitives, motrices ou de la parole
photosensibilité
troubles d’apprentissage

L’accessibilité numérique se concentre plus précisément sur l’offre en environnements numériques. Elle vise à permettre à toute la communauté d’accéder, de comprendre et d’interagir avec des ressources numériques (fichiers, sites web, etc.), y compris pour les personnes ayant besoin des technologies d’assistance, telles que les lecteurs d’écran.

Lors de la conception de son matériel pédagogique (document PDF, vidéo, site de cours, etc.), il est important d’anticiper:

les limitations sensorielles auxquels les personnes étudiantes peuvent faire face ;
l’utilisation des technologies d’assistance sur le matériel que l’on créé
les moyens nécessaire pour que la structure autant que les contenus puissent être perçus, compris et utilisés.

Cette courte vidéo du Gouvernement français présente quelques défis en matière d’accessibilité numérique et ce que peux représenter l’usage d’un lecteur d’écran pour une personne qui en dépend:

1. Porter attention aux caractéristiques sensorielles

Les caractéristiques sensorielles incluent des éléments tels que:

la taille
la couleur
la luminosité
l’emplacement visuel (haut, bas, dessus, dessous, gauche, droite)
l’orientation
le son

Comme certaines personnes peuvent avoir de la difficulté avec leurs sens:

Évitez d’utiliser les caractéristiques sensorielles dans vos indications. Assurez-vous, du moins, qu’il y ait toujours une alternative utilisable pour pallier à une limitation, voir à un sens. Par exemple, associez des étiquettes textuelles aux pointes colorées d’un graphique comme la couleur pourrait ne pas suffire pour distinguer les catégories.
Évitez les indications basées uniquement sur l’emplacement visuel, sauf si vous utilisez des termes tels que « l’élément suivant » ou « l’élément précédent », qui sont accessibles par les technologies d’assistance .
Gardez à l’esprit que si votre matériel est créé adéquatement, les technologies d’assistance peuvent être utilisées pour compenser une limitation visuelle ou auditive car elles peuvent lire vos contenus à voix haute ou en les rendre détectables au braille.

2. Avoir des textes détectables pour ses images informatives

Selon le contexte, vos images peuvent être de l’une ou l’autre de ces natures et nécessiter ou non des alternatives textuelles:

Images décoratives : Utilisées uniquement pour l’esthétique ou pour accompagner ce qui est déjà mentionné dans le texte. Elles ne nécessitent pas d’alternatives textuelles.
Images informatives : Apportent une information essentielle et complémentaire à ce qui est déjà mentionné dans le texte. Elles nécessitent une alternative textuelle.

Actions à poser par type d’image informative

Parmi les exemples fréquents d’images informatives, il y a des images informatives simples (par exemple, un logo ou une icône) ou encore des images informatives complexes (affiches, schémas, graphiques, numérisations de texte, etc.).

Considérer l’une des options suivantes:

appliquer un texte alternatif (alt text)
appliquer une description textuelle dans le corps du texte qui accompagne l’image.

Combiner ces deux actions:

Appliquer un texte alternatif (alt text).
Ajouter une description textuelle plus détaillée dans le corps du texte accompagnant l’image. Cette description doit expliquer les éléments clés et les informations importantes de l’image.

Appliquez l’une des actions suivantes :

Utiliser un logiciel de reconnaissance optique des caractères (OCR) pour convertir les images en texte détectable et sélectionnable. Veuillez noter que pour des numérisations de textes destinées aux cours, il est possible d’effectuer une demande auprès Bureau du droit d’auteur de l’Université. Pour obtenir plus d’informations, consultez leur page sur la numérisation de documents.
Rendre disponible une description textuelle ou une fichier qui comporte une retranscription de ce qui est inscrit sur l’image.

Rendez disponible le fichier de présentation initial (par exemple, fichier PowerPoint) pour que les textes apposés sur les diapositives puissent être détectables et sélectionnables.

Conseils de rédaction pour un texte alternatif

125 caractères ou moins, espaces inclus
Restez concis et descriptif
Évitez de répéter le contenu textuel environnant

Pour en savoir plus, consultez la ressource d’aide de Microsoft qui porte sur tout ce que vous devez savoir pour écrire un texte de remplacement efficace.

Appliquer un texte alternatif à une image

Découvrez comment appliquer un texte alternatif à une image sur les plateformes suivantes :

Site de cours dans l’ENA1 : voir la section « Insérer une image » à partir de la page 200 du Guide d’utilisation de l’ENA1.
Site de cours dans Brio : voir la section « Texte alternatif pour les images » du guide « Créer du contenu accessible dans les sites ENA2 ».
Word, Outlook et PowerPoint: voir la ressource « Ajouter du texte de remplacement à une forme, une image, un graphique, un graphique SmartArt ou un autre objet« .

3. Fournir un équivalent textuel pour ses fichiers audio et vidéo

Pour rendre vos contenus audio ou vidéos préenregistrés accessibles à toutes les personnes étudiantes, même dans des environnements bruyants ou nécessitant le silence:

Proposez des sous-titres synchronisés (comprenant les dialogues et les informations audiovisuelles essentielles) ou
Fournissez une transcription textuelle qui reproduit de manière précise, complète et correctement séquencée le contenu audio, y compris les dialogues, les bruits importants et les informations essentielles. La transcription doit être rendue disponible depuis la page où se trouve le média.

Générer des sous-titres

Microsoft Stream permet de générer, de modifier et d’exporter des fichiers de transcription textuelle au format .vtt. Pour savoir comment générer des sous-titres, consultez la procédure « Microsoft Stream crée automatiquement des sous-titres pour les vidéos procédure« .

Annexer un fichier de sous-titres à une vidéo dans un site de cours

Une fois que vous aurez révisé le fichier de sous-titre généré, découvrez comment l’annexer à votre site de cours. Pour savoir comment faire pour un cours dans l’ENA1, consultez la section « Annexer un fichier de sous-titre à une vidéo » de la page 129 du Guide d’utilisation de l’ENA1: Utiliser les blocs. Pour un cours dans Brio, consultez la procédure « Ajouter un fichier de sous-titres à une vidéo« .

À venir – Dès l’automne 2024, un projet pilote portant sur le sous-titrage automatisé sera introduit dans certains cours à distance asynchrones pour les étudiantes et d’étudiants malentendants. Le Centre d’aide aux étudiants (CAE) vise à déployer une solution de sous-titrage et de transcription automatisée, et ce, pour l’ensemble de la communauté étudiante.

4. Appliquer de bonnes pratiques d’écriture

Évitez les innovations orthographiques (par exemple, iel, toustes) comme elles peuvent être difficiles sur le plan cognitif.
Favorisez les formulations neutres (par exemple, personne étudiante) et utilisez la féminisation syntaxique (par exemple, étudiantes et étudiants) quand la neutralité est impossible
Évitez les formes tronquées ou les doublets abrégés (par exemple, étudiant.e) comme ces formes sont mal lues par les lecteurs d’écran.

Pour en savoir plus sur l’emploi des procédés d’écriture inclusive à l’Université Laval, consultez ces ressources institutionnelles:

Indiquez la forme complète des abréviations et acronymes à leur première occurrence dans un document ou une page web (par exemple, mentionnez Centre de services et de ressources en technopédagogie avant d’utiliser CSRT)
Évitez d’indiquer les abréviations communes (km, pdf, etc.)
Évitez d’utiliser trop d’abréviations et d’acronymes commes elles peuvent être mal interprétées par les lecteurs d’écrans.

Pour en savoir plus sur les pratiques d’écriture recommandées à l’Université Laval, consultez ces ressources institutionelles:

5. Avoir assez de contraste

Un bon contraste entre les éléments de premier plan et d’arrière-plan est crucial pour assurer que le texte soit facile à lire. Pour y arriver:

Favorisez des textes sombres sur fonds blancs ou clairs.
N’affichez pas de texte sur des fonds photographiques détaillés, des images complexes ou des filigranes, à moins que le texte se dégage bien du fond.
Assurez-vous d’avoir un ratio de contraste suffisant entre la couleur des éléments de premier plan (par exemple, textes, liens, icônes) et d’arrière-plan.

Ratio de contraste

Un ratio de contraste s’obtient en calculant la différence de luminosité entre deux couleurs superposées. Il peut s’agir de la couleur d’un texte ou d’un élément graphique vis-à-vis la couleur du fond sur lequel il est apposé. Les ratios nécessaires pour répondre au standard requis à l’Université Laval sont les suivants:

4.5:1 pour du texte standard
3:1 pour du grand texte (réfère généralement à du texte de 14 points et plus lorsque le gras n’est pas employé)
3:1 pour des éléments graphiques tels que des icônes (WCAG 2.1)

Comment vérifier son ratio de contraste?

Les outils de vérification de contraste tels que le Contrast checker de WebAIM peuvent être un bon moyen de vérifier nos ratios. Cette ressource gratuite en ligne dispose d’un outil de pipette (color picker) qui permet de tester ses ratios en tirant directement les couleurs de ses créations.

6. Employer adéquatement les éléments structuraux

Voici quelques bonnes pratiques pour avoir des éléments clairs, facilement détectables et navigables:

Utilisez le système de styles de titres des plateformes d’édition (par exemple, dans Word ou PowerPoint) plutôt que de modifier manuellement l’apparence des titres dans vos contenus ou de générer des images pour vos titres. Découvrez notamment comment personnaliser ou créer de nouveaux styles dans Word.
N’identifiez qu’un seul titre de premier niveau par document ou page web.
Respectez la hiérarchie des titres.
Lorsque vous générez des documents de présentation à diapositives, appliquez un titre à vos diapositives (slides).

Note: Évitez de générer du texte sous forme d’image (par exemple, un titre) si les formats numériques natifs de vos plateformes d’édition permettent générer du texte directement.

Utilisez les listes lorsque vous énumérez 3 éléments et plus.
Utilisez la fonction liste des plateformes d’édition (les tirets, les puces, les lettres ou les numéros appliqués manuellement ne sont pas reconnus par les technologies d’assistance).
Utilisez les listes à numéros lorsque l’ordre des éléments est important et les listes à puces lorsque l’ordre n’a pas d’importance.

Utilisez les tableaux pour organiser les données.
Évitez les tableaux pour faire de la mise en page de textes.
Utilisez la fonction tableau disponible dans les plateformes d’édition (par exemple, dans Word ou PowerPoint) pour que les tableaux puissent être identifiés correctement et être navigables par les lecteurs d’écrans. Si des captures d’écran de tableau doivent être utilisées, fournissez un équivalent textuel à proximité.

Utilisez des polices d’écriture simples (p.ex. arial), sans ornementations excessives.
Favorisez un alignement à gauche de vos textes.
Évitez l’alignement centré pour de larges portions de textes.
Évitez l’alignement justifié. Cet alignement crée des espaces inégaux complexifiant la lecture et pouvant gêner celle-ci.
Laissez « respirer » vos contenus avec un bon dosage de l’espacement. Un manque d’espacement peut complexifier la lisibilité et un bon dosage de l’espacement entre vos blocs de contenus peut aider à retrouver plus facilement des informations ciblées.
Évitez les renvois de lignes sans raison. Utilisez les paramètres d’interligne et d’espacements de vos éditeurs si un grand espacement est requis entre des portions de texte. Par exemple, découvrez comment modifier l’interligne et comment ajuster le retrait et l’espacement dans Word.

Utilisez la fonction table des matières de vos plateformes d’édition lorsque vous avez a en générer une et employez directement les options de styles de celle-ci pour en modifier la mise en forme. Réécrire les titres manuellement avec une suite de points et des numéros ne suffit pas pour qu’une table des matières soit identifiée, lue et utilisable par les technologies d’assistance.

Par exemple, découvrez comment insérer une table des matières et comment mettre en forme ou personnaliser une table des matières dans Word.

Informations complémentaires

Formations en accessibilité numérique

Pour approfondir vos connaissances, n’hésitez pas à vous informer sur les formations offertes par le Vice-rectorat aux ressources humaines et aux finances (VRRHF).

Conseils d’accessibilité et communauté étudiante en situation de handicap

Pour des conseils d’accessibilité vis-à-vis la communauté étudiante en situation de handicap, consultez les ressources suivantes de l’Université:

Pour en savoir plus en matière de services et d’application des mesures d’accommodement offertes aux personnes étudiantes en situation de handicap, consultez le site web du Centre d’aide aux étudiants.

Ce texte a été revu en partie par Microsoft Copilot. Les propositions suggérées par l’IA ont été vérifiées et approuvées par les personnes autrices.