CB Trousse d’outils d’accessibilité pour les

CB Trousse d’outils d’accessibilité pour les

Amanda Coolidge, Sue Doner, Tara Robertson

B.C. Open Textbook Accessibility Toolkit by BCcampus and CAPER-BC used under a CC-BY 4.0 international license. (C.B Trousse d’outils d’accessibilité pour les manuels scolaires ouverts utilisés sous un permis international CC-BY 4.0.)

Pour des questions reliées à cette concession de permis, s’il vous plaît rejoindre opentext@bccampus.ca. Pour en savoir plus à propos du projet de manuels scolaires ouverts de BCcampus, visitez http://open.bccampus.ca.

Traduit par SOREFS (Système ontarien des ressources éducatives en formats de substitutions) en 2015. Vous pouvez rejoindre SOREFS par courriel, aero@alternativeresources.ca Certains exemples ont été changés pour améliorer la fluidité du document en français. Ils incluent :

  • Si possible, les hyperliens ont été changés pour arriver à la version française du même site web.
  • Le texte à l’intérieur des images a été traduit, et les images mise à jour.

Licence Creative Commons
CB Trousse d’outils d’accessibilité pour les de BCcampus est mis à disposition selon les termes de la licence Creative Commons Attribution 4.0 Ceci peut être votre site web principal ou la page d’informations vous concernant sur une plate forme d’hébergement, comme Flickr Commons., except where otherwise noted.

Contents

1

Remerciements

Mercie à ….

CAPER-BC et Tara Robertson pour leur participation et efforts continués pour assurer que les ressources éducatives sont accessibles pour tous les étudiants.

Sue Doner, de Camosun College, pour son travail sur la conception universelle et les points de contrôle d’accessibilités

Les testeurs étudiants : Laura Bulk, Mila Cherny, Charmaine Co, Lauren Rubin, Shruti Shravah, Steven Woo, Chazz Young, qui étaient des collaborateurs enthousiastes et généreux.

Sarah Horton et Whitney Queensbury pour nous donner la permission de modifier leurs personnages de personnes ayant des déficiences.

Penn State University pour nous fournir la permission d’utiliser leurs conseils d’accessibilité pour les formules et les équations.

Cynthia Ng pour travailler sur les personnages.

Hilda Anggraeni pour créer et adapter les personnages d’utilisateurs.

BCcampus pour mener cette initiative pour assurer que les manuels scolaires ouverts sont accessibles du point de vue financier et d’accessibilité.

Isabel Trueman and Josephine Murphy, Alternative Educational Resources  Ontario, pour la traduction.

1

Concepts Clés

1

Utilisons des personnages

Les concepteurs utilisent des personnages pour représenter les différents genres de personnes qui pourraient accéder un site web ou un produit. Dans cette trousse d’outils, nous avons utilisé des personnages pour vous aider à garder en tête les divers types d’étudiants et leurs diverses habilités pendant que vous développez du contenu. Nous avons aussi utilisé les personnages pour vous introduire aux différents types d’équipements et de logiciels que les étudiants utilisent typiquement.

Nous avons adapté les personnages des auteurs Sarah Horton et Whitney Queensbury de leur livre A Web for Everyone : Designing Accessible user Experience pour être plus précis pour les étudiants postsecondaires de Colombie-Britannique ayant des handicaps d’impressions (basé sur des données de CAPER-BC et les étudiants qui ont assisté à notre groupe de discussion).

Voici quelques- uns des étudiants qui liront les manuels de cours ouverts que vous écrivez.

Mark

mark

Mark a 17 ans. Il est un futur mécanicien de machinerie lourde avec un trouble d’apprentissage diagnostiqué en huitième année. Mark absorbe mieux l’information en l’écoutant et aime créer et réparer les choses avec ses mains. Il est dans son premier semestre de cours de métier et il l’adore. Mark ne peut pas attendre pour compléter ses cours de fondation et faire la transition à son premier stage. Il habite à la maison avec sa famille qui partage un ordinateur.

Habilité: Trouble d’absorber beaucoup d’informations quand il le lit.

Aptitude: Utilisateur de base de la technologie

Attitude: Préfère faire les choses lui-même, mais peut être facilement frustré ou impatient, surtout avec la technologie.

Technologie d’assistance: joueur mp3

Format de préférence: mp3 pour qu’il puisse écouter en route

Jacob

Jacob

Image de Horton, Sarah; Quesenbery, Whitney. 2014 A Web for Everyone. New York; Rosenfeld Media. Rosenfeldmedia.com/books/a-web-for-everyone/

Jacob est un étudiant de quatrième année en administration des affaires qui est aveugle et un peu passionné de la technologie. Il a 28 ans et ne peut attendre la fin de ces derniers cours pour être capable de commencer sa carrière. Il partage un appartement avec sa copine.

Habilité: Aveugle depuis la naissance

Aptitude: Utilisateur qualifié de la technologie

Attitude: Numérique natif, adoptant tôt, persiste jusqu’à il l’a

Technologies d’assistance :

Format de préférence: Le texte électronique qu’il peut facilement utiliser avec JAWS ou VoiceOver; déteste les PDFs.

Vidéo d’un étudiant utilisant JAWS (0s-1 :31) (anglais originale) (différente vidéo explicative en français)

Écoutez le lecteur d’écran d’un étudiant en informatique. (anglais)

Diana

diana

Diana est en formation pour être une entraîneuse personnelle après qu’elle a subi une perte de vision et n’était pas capable de continuer son travail comme conductrice d’autobus. Elle a 48 ans et la plupart de ses cours sont en ligne. Elle habite avec son mari.

Habilité: Perte graduelle de vision; peut lire facilement avec une loupe électronique, mais ses yeux se fatiguent.

Aptitude: Connaissance intermédiaire de technologie.

Attitude: A une routine et aime la garder.

Technologies d’assistance :

Format de préférence: PDF ou texte électronique qu’elle peut agrandir sur son ordinateur ou écouter en utilisant TextAloud.

Vidéo d’un étudiant utilisant ZoomText(0-1:31)(anglais)

Trish

Trish

Horton, Sarah; Quesenbery, Whitney. 2014. A Web for Everyone. New York: Rosenfeld Media. rosenfeldmedia.com/books/a-web-for-everyone/

Trish est une étudiante au collège prenant des cours de transfert d’université. Elle a un handicap physique et utilise les livres imprimés. Elle a 18 ans et habite avec sa famille.

Habilité: Une lésion cérébrale dans un accident a causé la paralysie et les difficultés motrices.

Aptitude: utilisateur d’ordinateur de base, utilisateur intermédiaire d’iPad.

Attitude: Généralement dépendante de la famille, elle aime lire et étudier indépendamment.

Technologies d’assistance :

Format de préférence: livres électronique, comme PDF, qui peuvent être facilement transférés à son iPad.

Ann

ann

Ann est dans un programme de chimie et a TDAH, un trouble d’apprentissage qui rend sa concentration difficile. Elle a 20 ans et espère devenir pharmacienne. Elle habite dans un dortoir sur le campus avec deux autres étudiantes.

Habilité: TDAH, a des troubles à concentrés

Aptitude: Utilisateur intermédiaire d’ordinateur

Attitude: Connait parfois des défis, mais est très reconnaissante de combien les logiciels d’apprentissage l’ont aidé.

Technologie d’assistance: Logicielle d’apprentissage (Kurzweil sur un portable)

Format de préférence: Lire et écouter en même temps

Vidéo d’un étudiant utilisant Kurzweil sur un ordinateur (1:32-4:07)(anglais)

Steven

Horton, Sarah; Quesenbery, Whitney. 2014. A Web for Everyone. New York: Rosenfeld Media. rosenfeldmedia.com/books/a-web-for-everyone/

Horton, Sarah; Quesenbery, Whitney. 2014. A Web for Everyone. New York: Rosenfeld Media. rosenfeldmedia.com/books/a-web-for-everyone/

Steven est un spécialiste en anglais qui est sourd. Il a 23 ans et aime la flexibilité de prendre les cours en ligne. Il habite par lui-même.

Habilité: Langue maternelle est ASL, peut parler et lire les lèvres.

Aptitude: Utilisateur intermédiaire de technologie.

Attitude: Peut devenir frustré au sujet de l’accessibilité, comme un manque de sous-titres

Technologie d’assistance :

Format de préférence: Aucun préférence pour les manuels de cours, mais sans sous-titres les vidéo sont sans raisons.

 

2

Pratiques exemplaires

2

Images

Dans cette section, nous fournissons des recommandations pour guider votre inclusion de contenu accessible basé sur les images.

Que sont les images?

Images incluent : photographes, diagrammes, dessins, graphiques, cartes.

Types de fichiers : .gif, .jpg, .png

Avant de commencer

Pourquoi avez-vous inclus les images vous avez choisies?

Avant que vous pourriez déterminer ce que vous avez besoin pour faire une image accessible, vous devez en premier identifier sa raison d’être ou valeur pour votre manuel de cours. Considérez les questions suivantes :

  1. Est-ce que votre image sert un but fonctionnel? En d’autres mots, est-ce qu’il transmet du contenue non textuelle aux étudiants? Si oui, vous devrez :
    • Fournier du texte alternatif qui servira comme équivalent du matériel non textuelWeb Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.1 Text Alternatives. Acceder de: http://www.w3.org/TR/WCAG20/#text-equiv
    • N’utilisez pas la couleur comme le seul moyen de transmettre l’information.Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.1 Use of Color. Acceder de: http://www.w3.org/TR/WCAG20/#visual-audiocontrast
  2. Est-ce que votre image à une raison décorative? En d’autres mots, est-ce que c’est principalement un élément visuel qui ne transmet pas le contenu? Si oui, vous devez
    • Évitez des descriptions superflues

Pour qui faites-vous ceci?

Ce travail appuie les étudiants qui :

 

Jacob

Image de Horton, Sarah; Quesenbery, Whitney. 2014 A Web for Everyone. New York; Rosenfeld Media. Rosenfeldmedia.com/books/a-web-for-everyone/

Qu’est-ce que vous avez besoin de faire?

Les images fonctionnelles et les descriptions en texte alternatif.

Considérez à ce que votre page de contenu pourrait ressembler si les images ne téléchargent pas. Maintenant essayez d’écrire un texte alternatif pour chaque image qui pourrait fonctionner comme remplacement et fournir le même service que l’image.

Pendant que vous travaillez à développer vos descriptions alternatives, garder en tête les recommandations et conseils suivants :

  • Souvenez-vous que le texte alternatif doit transmettre le contenu et la fonctionnalité d’une image et est rarement une description littérale de l’image. (e.g. photo d’un chat). Plutôt que de fournir ce que ressemble l’image, le texte alternatif doit transmettre ce que le contenu de l’image est et ce qu’il fait.WebAIM (2014). Alt text blunders. Accessed from: http://webaim.org/articles/gonewild/#alttext
  • Pour les images relativement simples (e.g. photographes, illustrations), essayez de garder vos descriptions courtes. Vous devez avoir comme objectif la création d’une brève description (une ou deux phrases courtes), équivalente à l’information dans l’image, qui est précise et concise.
  • Pour les images plus complexes (e.g. graphiques détaillées, cartes), vous aurez besoin de fournir une description de plus qu’une ou deux phrases pour assurer que tous les utilisateurs vont profiter du contenu et contexte que vous attendiez à fournir. Dans ses cas, vous devez fournir soit les détails dans le texte qui entoure l’image ou écrire une longue description de texte sur une page séparée et un lien que les élèves peuvent utiliser. Vous devez inclure une courte description en texte (une ou deux phrases) qui explique aux étudiants où ils peuvent retrouver les détails que vous fournissez dans la longe description.
  • Enlever toute information inutile. Par exemple, vous ne devez pas inclure l’information comme « image de … » ou  « photo de… »; la technologie d’assistance identifiera automatiquement le matériel comme une image, dons inclure ce détail dans votre description alternative est superflu.
  • Éviter la redondance de votre contenu dans votre description alternative. Ne répétez pas la même information qui apparaît dans le texte adjoint à l’image.

Voici deux exemples de descriptions de texte alternatif

Exemple 1 (de Introduction to sociology) :

Figure 20.11 La ville taudis et la ville globale : Le Favéla Morro de Prazères en Rio de Janeiro et le district financier de Londres démontrent les deux côtés de l’urbanisation globale (photo courtoise de dany13/Flickr et Peter Pearson/Flickr)

Figure 20.11 La ville taudis et la ville globale : Le Favéla Morro de Prazères en Rio de Janeiro et le district financier de Londres démontrent les deux côtés de l’urbanisation globale (photo courtoise de dany13/Flickr et Peter Pearson/Flickr)

Cette photographie pourrait être décrite de la façon suivante :

Figure 20.11 inclut deux photos. La première montre des édifices encombrés situés sur une colline. Ils sont petits et délabrés. La deuxième montre des édifices magnifiques situés près de l’eau.

Exemple 2 (Figure 18.1 diagramme deux atomes, double-flacon de Introductory Chemistry) :

Quand le robinet est ouvert entre les deux flasques, les atomes peuvent se distribuées de 4 différentes manières.

Quand le robinet est ouvert entre les deux flasques, les atomes peuvent se distribuées de 4 différentes manières.

Figure 18.1 pourrait être décrite comme suite :

Figure 18.1 montre un diagramme avec cinq paires de cercles. Tous les cercles sont ouverts. Celui de gauche est ouvert à la droite et celui du côté droit est ouvert à gauche. Ils sont liés à leurs points d’ouvertures. Une paire est située à la gauche et entre leurs deux lignes de connections est une ligne rouge verticale à travers d’un point noir. Les quatre autres paires sont arrangées dans une colonne à droite et entre les lignes connectives de chaque paire se trouve un petit cercle avec une ligne horizontale à travers. Une flèche vers la droite, étiquetée Ouvrir Robinet, lie la paire du gauche aux quatre paires de la droite. Chacune de ses cinq paires ont deux picots (vert et bleu) arrangés de façon différente. Pour la paire à gauche, les deux picots, qui sont situés obliquement, apparaissent seulement dans le cercle à gauche. Le picot vert est dans la partie supérieure à gauche du cercle et le picot bleu est proche de la partie inférieure à droite. La première paire à droite est dans une situation similaire. La seule différence est que le picot vert est dans la partie supérieure à droite et le picot bleu est proche du milieu à gauche. La deuxième paire a un picot vert dans le centre du cercle gauche et un picot bleu au centre to cercle droite. La troisième paire a un picot bleu dans la partie supérieure à gauche du cercle gauche et un picot vert dans la partie inférieure à droite du cercle droit. Pour la dernière paire, les deux picots apparaissent obliquement dans le cercle à droite. Un picot vert est dans la partie supérieure à droite et le picot bleu proche de la partie inférieure à gauche.

Utilisation de couleur

Considérez l’apparence de vos images s’ils étaient présentés uniquement en noir et blanc. Est-ce que le contenu ou contexte nécessaire serait perdu si la couleur était enlevée? Les images ne doivent pas dépendre sur la couleur pour transmettre l’information; si le point que vous faites dépend de la couleur pour être compris, vous devez peut-être modifier votre image ou mise en page pour que les concepts présentés ne soient pas perdus pour ceux qui sont daltoniens ou qui ont besoin d’un grand contraste entre les couleurs.

Exemple 1- inaccessible :

Dans cette graphique à barre simple, la couleur est le seule moyen que l’information est transmise.

Dans cette graphique à barre simple, la couleur est le seule moyen que l’information est transmise.

Exemple 2- inaccessible :

Dans cet exemple d’un graphique à barre, couleur est le seul moyen de communiquer les données.

Cette vue de la même barre graphique démontre comment le graphique pourrait paraître à un étudiant qui est daltonien, ou qui utilise un appareil sans couleur. Toutes les données pertinentes sont perdues.

Cette vue de la même barre graphique démontre comment le graphique pourrait paraître à un étudiant qui est daltonien, ou qui utilise un appareil sans couleur. Toutes les données pertinentes sont perdues.

Pour un étudiant qui est daltonien ou qui possède une vision pauvre en contraste, toute l’information pertinente est perdue dans un graphique à couleur.

Exemple 3- accessible :

Les étudiants daltoniens peuvent distinguer entre les tons très contrastés. Dans cet exemple, des étiquettes contextuelles ont été ajoutés à chaque barre en dessous du graphique. Notez que ce graphique requiert encore une description en texte alternatif.

Dans cette vue du graphique à barre, des couleurs hautes en contraste ont été utilisées afin de toujours afficher la différence de tons en gamme de gris. Des étiquettes ont aussi été ajoutées pour que les données ne soient pas communiquées uniquement avec la couleur.

Dans cette vue du graphique à barre, des couleurs hautes en contraste ont été utilisées afin de toujours afficher la différence de tons en gamme de gris. Des étiquettes ont aussi été ajoutées pour que les données ne soient pas communiquées uniquement avec la couleur.

Les images décoratives

Si votre image n’ajoute pas de signifiance et est inclus uniquement pour des raisons décoratives ou de style, l’espace pour la description de texte alternatif devrait être inclus avec votre image, mais il devrait rester vide ou blanc. Les technologies d’assistance vont dépister l’image, et en laissant la description alternative textuelle vide, vous pourrez signaler à l’étudiant qu’il n’y a pas de contenu contextuel intégré. Inclure des descriptions alternatives textuelles pour les images décoratives « ralentit tout simplement le procès avec aucun avantage parce que la logicielle de lecteur d’écran vocalise le contenu de la [description en texte alternatif], n’importe si le texte alternatif ajoute ou non de la valeur. »webAccess (2012). Adapted from: Top Ten Tips for making your website accessible. Accessed from: http://webaccess.berkeley.edu/developerinformation/top-ten-tips/#alt

 

3

Tableaux

Dans cette section, nous fournissons les directives et recommandations pour la structure des tableaux.

Que sont les tableaux?

Tableaux: Dans ce contexte, nous nous référons aux tableaux de données, qui sont des tableaux incluant l’information de rangée et/ou colonne de titre pour organiser le contenu.

Types de fichiers: .doc, .html, .pdf

Avant de commencer

Vos tableaux sont-ils simples ou complexes?

Un tableau simple inclut au maximum une colonne et/ou une rangée de titre. Un tableau complexe inclut plus qu’une colonne et/ou une rangée de titre, et peut contenir des cellules fusionnées ou scindées.AccessAbility: Accessibility and Usability at Penn State. Table Headers and Captions. Accessed from: http://accessibility.psu.edu/tables

Nous recommandons que vous fassiez tous efforts pour maintenir une structure de tableaux de données aussi simple que possible. Plus le format d’une table de données est complexe, moins il sera pour certains étudiants utilisant la technologie de lecteur d’écran pour accéder leurs matières de manuels de cours. Les lecteurs d’écran se déplacent de gauche à droite, d’haut en bas, une cellule à la fois, et parce qu’un lecteur d’écran ne répète pas de cellule, fusionnant ou scissionnant de cellules peut affecter l’ordre de lecture du tableau.

Pour qui faite-vous ceci?

Ce travail appuie les étudiants qui:

  • Sont aveugles ou ont une basse vision, par exemple Jacob.
  • Qui ont une forme de déficience cognitive, par exemple Ann.

Que devez-vous faire?

De la même façon que votre contenu a besoin de vrais titres et de structure, les tableaux ont besoin d’une structure définie et propre pour être accessible. Ceci veut dire que vous devez ajouter des titres à chaque colonne et rangée pour définir le contenu de chaque section de données. Les lecteurs d’écrans vont habituellement lire les tableaux horizontalement- cellule par cellule, rangée par rangée- et les titres de rangées et colonnes aident à fournir un contexte pour les données de chaque cellule aux étudiants qui sont aveugles, ont une basse vision, ou qui ont une déficience cognitive.

Image d’Ann, art originale par BCcampus

Image d’Ann, art originale par BCcampus

Créer des tableaux simples

Un tableau simple inclut:

  1. un titre ou sous-titre de tableau
  2. Maximum une rangée de titre de colonnes et/ou maximum d’une colonne de titre de rangées
  3. Aucune cellule fusionnée ou scindée.
  4. Remplissage de cellule suffisante pour les apprenants visuels.

Exemple:

Le tableau ci-dessous est un exemple d’un tableau simple. Revu contre la liste d’exigences précédentes, ce tableau:

  1. inclut un titre (Fleurs de Printemps)
  2. Contient une rangée dans laquelle les cellules sont étiquetées comme titre de colonne (Famille de couleurs, bulbes, arbustes, arbres), et une colonne dans laquelle les cellules sont étiquetées comme titre de rangée (Rose, Jaune)
  3. Ne contient aucune cellule fusionnée ou scindée
  4. A un remplissage de cellule suffisante pour fournir un tampon autour des données dans chaque cellule. (Remplissage de cellule dans ce tableau est géré à “10”).

Fleurs de printemps

Famille de couleur Bulbes Arbustes Arbres
Rose Tulipes Raisin de Corinthe florissante Prune ornementale
Jaune Narcisses de près Forsythe Magnolia étoilé

Pour une étudiant qui accède ce tableau avec un lecteur d’écran, la première rangée de donnée sera présenté à peu près comme suite:

  • Rose, bulbes: Tulipes
  • Rose, Arbustes: Raisin de Corinthe florissante
  • Rose, Arbres: prune ornementale

4

Hyperliens

Dans cette section nous révisons comment ajouter des hyperliens accessibles au contenu.

Que sont les hyperliens?

Hyperlien: un lien d’un fichier ou document à un autre endroit (par exemple un site web) ou fichier, typiquement activé en cliquant sur un mot souligné ou une image sur l’écran.

Types de fichiers: .html, .pdf, .doc, .xis

Avant de commencer

Pourquoi incluez-vous les hyperliens que vous avez choisis?

Généralement les hyperliens sont inclus dans un document pour fournir l’utilisateur avec d’information supplémentaire qui est disponible à un autre lieu.

Pour qui faites-vous ceci?

Ce travail appuie les étudiants qui:

Que devez-vous faire?

Descriptions

Assurez-vous que les pages web et hyperliens ont des titres décrivant un sujet ou un but.

Le but d’un hyperlien peut être déterminé selon le texte seul. Autrement dit, vous n’avez pas besoin d’ajouter d’information supplémentaire justifiant l’utilisation d’un lien. Vous voulez que le lien soit pertinent dans son contexte. Par exemple, n’utilisez pas le texte générique “pesez ici” ou “lire la suite”, à moins que l’intention d’un lien puisse être déterminé par le sens dans le continu environnant. https://www.webaccessibility.com/best_practices.php?best_practice_id=1301

Considérez les exemples suivants.

Exemple 1: pas claire:

– Pesez ici pour plus d’information sur le projet BC Open Textbook.

Trish

Horton, Sarah; Quesenbery, Whitney. 2014. A Web for Everyone. New York: Rosenfeld Media. rosenfeldmedia.com/books/a-web-for-everyone/

Exemple 2- claire et accessible:

Nouvelle languette/fenêtre

En général, c’est mieux si les hyperliens n’ouvrent pas des nouvelles fenêtres ou languettes car ceci peut désorienter les personnes, surtout celles qui ont de la difficulté à percevoir le contenu visuel.http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G200

Cependant, si un lien doit être ouvert dans une nouvelle fenêtre, il est la pratique exemplaire d’inclure une référence textuelle. Par exemple, Information concernant le projet BC Open Textbook [New Window] est disponible en anglais en ligne.http://accessibility.psu.edu/linkshtml

 

5

Multimédia

Dans cette section, nous fournissons des recommandations pour guider votre inclusion de contenu multimédia accessible.

C’est quoi le multimédia?

Multimédia inclut: vidéos, audio, animations, diapositives.

Types de fichiers: .mp3, .mp4, .ppt, etc.

Avant de commencer

Quelle forme de multimédia inclurez-vous?

Avant de déterminer ce que vous devez faire pour créer du contenu multimédia accessible, vous devez en premier comprendre ce qui est nécessaire pour les différentes formes de multimédias. Considérons les questions suivantes:

  1. Est-ce que votre ressource multimédia inclut de la narration ou instruction auditive? Si oui, vous devez:
    • Fournir une transcription complète de tout le contenu de paroles et le contenu non-paroles pertinentes dans la ressource.
  2. Est-ce que votre ressource inclut d’audio qui est synchronisé avec une présentation vidéo? Si oui, vous devez:
    • Fournir des sous-titres de tout le contenu de paroles et contenus non-paroles pertinents de la ressource.
  3. Est-ce votre ressource multimédia inclut des contextes visuels (ex., chartes, graphiques) qui ne sont pas adressées dans le contenu auditif? Si oui, vous devez:

Pour qui faites-vous ceci?

Ce travail appuie les étudiants qui:

Horton, Sarah; Quesenbery, Whitney. 2014. A Web for Everyone. New York: Rosenfeld Media. rosenfeldmedia.com/books/a-web-for-everyone/

Horton, Sarah; Quesenbery, Whitney. 2014. A Web for Everyone. New York: Rosenfeld Media. rosenfeldmedia.com/books/a-web-for-everyone/

Jacob

Image de Horton, Sarah; Quesenbery, Whitney. 2014 A Web for Everyone. New York; Rosenfeld Media. Rosenfeldmedia.com/books/a-web-for-everyone/

Que devez-vous faire?

Transcriptions

Considère qu’est-ce que vos étudiants pourraient ressortir du ressource multimédia s’ils n’étaient pas capables d’entendre les portions auditives, ou s’ils avaient la difficulté à comprendre les paroles. Une transcription en texte fournit aux étudiants l’information équivalente au contenu auditif dans une ressource de multimédia.Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.2 Time-based Media: Provide alternatives for time-based media. Accessed from:http://www.w3.org/TR/WCAG20/#media-equiv

Pendant que vous travaillez votre transcription textuelle, gardez en tête les recommandations suivantes à propos de quoi inclure:

  1. Nom de l’orateur ou l’oratrice
  2. Tout le contenu de paroles: S’il y a des paroles insignifiantes, il est mieux d’indiquer qu’elles sont exclues du transcrit. Par exemple: “[A et B parlent pendant que les diapositives chargent.]”
  3. Description signifiante à propos des paroles: Les descriptions qui informent les émotions, l’humeur, etc. sont habituellement fournies entre parenthèse. Par exemple: “Ne touchez pas à ça! [crier]”.
  4. Description d’audio non-parole pertinente: Celles-ci sont habituellement fournies entre parenthèse. Par exemple: “[tuyaux en métal écrasent aux planchers en béton]” Les sons d’arrière-plan qui ne sont pas pertinents peuvent être omis.
  5. Titres et sous-titres: Là où ils rendront la transcription plus utilisable ou facilitent la navigation, les titres et sous-titres peuvent êtres des aides utiles, surtout si la transcription est longue. En incluant ceux-ci, mettez-les en parenthèse pour démontrer qu’ils ne font pas partie de l’audio originale. Par exemple: [Introduction]; [Discussion de groupe]; [Étude de cas].

Transcription et les vidéos tierces

Si vous ne produisez pas vos propres vidéos de ressource, mais planifiez d’inclure des vidéos de la part des sources tierces (e.g. YouTube), soyez aviser que toutes les sources tierces n’incluent pas des transcriptions. Tant que les services comme YouTube appuieront techniquement les transcriptions, ce n’est pas tous les contributeurs à YouTube qui les utiliseront. Si vous sélectionnez une ressource vidéo qui n’a pas déjà de transcription, vous devez en produire vous-mêmes.*

*Note de droit d’auteurs: Produisons votre propre transcription pour une vidéo de tierce source pourrait contrevenir aux droits d’auteurs, dépendant du permis de la vidéo. Avant de procéder avec la production d’une transcription pour les matières médias que vous n’avez pas créé vous-mêmes, vous devez rejoindre le teneur du droit d’auteur pour obtenir la permission.

Sous-titres

Les sous-titres sont le texte qui est synchronisé avec l’audio dans une présentation vidéo. Les sous-titres sont importants quand les personnes doivent voir ce qui se passe dans une vidéo et recevoir les informations audio en texte en même temps.

Votre travail vers la création d’une transcription en texte pour une ressource vidéo peut être réutilisé pour fournir les sous-titres. Gardez en tête les recommandations suivantes concernant quoi inclure avec vos captions:

  1. Tout contenu de paroles: S’il y a des paroles non pertinentes, il est mieux d’indiquer qu’elles sont exclues de la transcription. Par exemple: “[A et B parlent pendant que les diapositives chargent.]”
  2. Description d’audio non-parole pertinente: Celles-ci sont habituellement fournies entre parenthèse. Par exemple: “[tuyaux en métal s’écrasent au plancher en béton]”; “[Musique de fond du groupe XXX joue].” Les sons d’arrière-plan qui ne sont pas pertinents peuvent être omis.

 

Descriptions auditives

Considérez ce que vos étudiants ressortiraient d’une ressource multimédia s’ils ne pouvaient pas voir les matières visuelles incorporées essentielles pour la compréhension. Les descriptions auditives sont bénéficiales si le contenu visuel (e.g. une graphique ou une carte) dans une vidéo ou présentation fournit du contenu pertinent qui n’est pas disponible unique de l’audio.Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.2.3 Audio Description or Media Alternative (Prerecorded). Accessed from: http://www.w3.org/TR/WCAG20/#media-equiv

En décrivant les éléments visuels dans vos ressources multimédias, gardez en tête les recommandations et lignes directrices suivantes.

1. Quand le contenu visuel contextuel sur l’écran n’est pas décrit dans l’audio lui-même, vous auriez besoin à fournir une description auditive qui est une description objective de l’élément visuel.

Exemple:

Pour aider les étudiants à bien saisir un concept que vous essayez de transmettre dans votre vidéo, vous avez inclus des références visuelles contextuelles (e.g. cartes, graphique, démonstration physique du processus). Cependant, vous réalisez après d’avoir fait la vidéo que la section auditive ne décrit pas ces visuels en assez de détails pour rendre la capacité aux étudiants comme Jacob à accéder tous les concepts que vous voulez transmettre.

Dans ce cas, vous auriez besoin d’enregistrer une description auditive des matières visuelles qui fournit assez de détails pour fournir aux étudiants comme Jacob le même accès aux contenus que les apprenants visuels.

2. Si possible, évitez la création du besoin pour la description auditive au début en étant proactive au temps d’enregistrement. Si vous faites attention aux visuels contextuels pendant l’enregistrement de la pièce média, vous pourrez retrouver des opportunités à transmettre les contenus visuels parmi les matières des paroles; vous n’aurez pas besoin d’inclure des descriptions du contenu visuel après le fait.

Exemple:

Vous enregistrez une présentation vidéo, ou une présentation qui inclut un graphique qui suit la production de charbon en Colombie-Britannique, et comme parti de la présentation vous voulez concentrer l’attention sur le graphique. Le narrateur ou présentateur pourrait indiquer des sections du graphique en disant:

“Comme vous pouvez voir, la projection du charbon métallurgique à augmenter par 3 millions de tonnes pendant ces deux années”

Dans ce cas, les descriptions auditives seraient nécessaires pour fournir les contextes manquants aux étudiants avec des déficiences visuelles; ces étudiants ne peuvent pas voir les données sur le graphique qui démontre aux apprenants visuels que sont les figures de productions et pour quelles dates. Cependant, si le narrateur ou présentateur disent:

” Ce graphique démontrent que la production de charbon métallurgique en C.B. à augmenter de 23 million tonnes en 1999 à 26 millions de tonnes en 2001,”

le contenu visuel est transmis par l’audio et aucune description auditive sera nécessaire.

6

Formules

Dans cette section, nous révisons comment ajouter des formules accessibles à votre contenu.

Que sont les formules?

Les formules incluent: Les équations mathématiques ou scientifiques

Types de fichiers: LaTex ou MathType

Avant de commencer

Pour qui faites-vous ceci?

Ce travail appuie les étudiants qui:

mark

Profile de Mark, art originale par BCcampus

Le contenu suivant est dérivé de Equations: Images vs MathML de Accessibility and Usability at Penn State, http://accessibility.psu.edu/equations.

Que devez-vous faire?

Il y a plusieurs façons de traiter les équations, des images avec des étiquettes ALT au MathML. Avoir accès à un éditeur d’équation comme MathType ou MathMagic peut rationaliser considérablement le traitement et conversion d’équations. Ces outils sont similaires aux éditeurs d’équations retrouver dans l’éditeur ANGEL HTML et Microsoft Office.

MathML

Math ML est un langage de notation xml basé sur le texte et créer pour les équations mathématique. Les navigateurs qui soutiennent MathML sont capables de traduire l’XML dans une équation structurée. Car le MathML avec MathJax peuvent être rendu dans plusieurs systèmes, incluant HTML, Sites à Penn State, ANGEL et Drupal, il est considéré comme le meilleur choix pour l’accessibilité.

Information à propos de créer et visionner MathML est disponible en anglais sur cette page.

MathML peut varier de système à système et le contenu peut changer rapidement.

Image avec une étiquette ALT

Une option certaine est de créer une image d’une équation (ou de l’exporter d’un éditeur d’équation) puis de l’insérer dans un document avec une étiquette ALT.

Noté: Les étiquettes ALT peuvent être écrites dans Nemeth MathSpeak pour les étudiants qui ont appris ce système.

Exemple 1- une équation en HTML:

m égale commence fraction m sub 0 sur commence racine carrée 1 moins commence fraction v sup 2 sur c sup 2 fin fraction fin racine carrée fin fraction

Regardez l’étiquette alternative

ALT=”m égale commence fraction m sub 0 sur commence racine carrée 1 moins commence fraction v sup 2 sur c sup 2 fin fraction fin racine carrée fin fraction”

LaTeX

LaTeX est un langage de notation familier à plusieurs dans la communauté de science et mathématique, mais malheureusement il n’est pas présentement soutenu par les technologies de lecteurs d’écrans. Cependant, il est relativement simple à convertir LaTeX en une image ou MathML dans la plupart des éditeurs d’équation.

Pour importer LaTeX, suivez ces étapes en MathMagic et MathType:

  1. Copier et coller un morceau de code LaTeX comme

m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}}

dans la fenêtre principale d’un éditeur d’équation.

2. L’équation devrait apparaître avec mise en page. Fais des changements mineurs selon les besoins.

À notre épreuve d’utilisateurs de BCcampus, les étudiants ont indiqué qu’il pourrait être utile d’avoir un fichier audio de la formule ou de l’équation. Le fichier audio devrait être placé à côté de la formule ou de l’équation et permettrait à l’utilisateur d’entendre exactement comment le formule ou l’équation est interprétée.

Exemple- équation avec audio.

example2

 

7

Contraste de couleur

Dans cette section, nous fournissons des lignes directives et recommandations à propos du contraste de couleur dans vos matières de manuels de cours.

C’est quoi le contraste de couleur?

Le contraste de couleur inclut: teinte, clarté et la saturation de textes, images et arrière plans.

Types de fichiers: .doc, .html, .pdf, .jpg, .gif

Avant de commencer

C’est quoi le rôle de couleur dans la livraison de votre contenu?

Quand les documents ou les sites web ne fournissent pas assez de contraste entre les éléments du premier plan(e.g. texte, images) et les éléments de l’arrière-plan(e.g. couleur, filigrane), certains étudiants auront de la difficulté à lire le contenu. Considère les questions suivantes:

  1. Avez-vous présenté du contenu basé en texte ou image sur un arrière-plan en couleur ou avec texture? Si oui, vous devriez:
  2. Avez-vous inclus des hyperliens dans votre contenu? Si oui, vous devriez:
  3. Avez-vous utilisé de la couleur pour transmettre des concepts ou d’information? Si oui, vous devriez:

Pour qui est-ce que vous faites ceci?

Ce travail appuie les étudiants qui:

diana

Profile de Diana, art original de BCcampus

Que devez-vous faire?

Contraste

Les étudiants ont une basse vision et ou une forme de daltonisme peuvent connaître une difficulté à lire s’il n’y a pas assez de contraste entre le texte et la couleur d’arrière-plan que vous avez choisis.

Si la palette de couleurs que vous avez choisie est trop subtile (e.g. texte blanche sure un arrière-plan en pastelle; texte moyen gris sur un arrière-plan gris pâle), le contraste entre vos premier et arrière-plan est probablement insuffisant pour certains de vos étudiants.

Web Content Accessibility Guidelines (WCAG 2.0) exigent que “les présentations visuelles de textes et images de textes ont un ratio de contraste d’au moins 7:1)”Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.6 Contrast (Enhanced). Accéder de: http://www.w3.org/TR/UNDERSTANDINGWCAG20/visual-audio-contrast7.html Les images suivantes représentent quatre exemples différents de contraste de couleur premier/arrière-plan pour illustrer les ratios de contraste de couleur suffisante et insuffisante.

L'Image démontre quatre exemples de couleur de premier plan (texte) contre des couleurs de l'arrière-plan; seulement l'exemple à droite présente une combinaison de couleurs avec un contraste de couleur suffisante.

L’Image démontre quatre exemples de couleur de premier plan (texte) contre des couleurs de l’arrière-plan; seulement l’exemple à droite présente une combinaison de couleurs avec un contraste de couleur suffisante.

Êtes-vous incertain comment vérifier vos matières pour les ratios de contraste de couleur?

Il y a plusieurs outils disponibles en ligne ou téléchargeables pour vous aider à évaluer vos ratios de contraste de couleur. Voici certains que nous avons essayés et aimons:

  • Vérificateur de contraste de couleur WebAIM: Cet outil en ligne vous permet de sélectionner ou d’entrer des valeurs de couleurs pour l’évaluation et vous fournit avec un “succès” ou “échec” pour votre ratio.
  • Vérificateur de contraste ACART: Cela est un outil en ligne simple que vous pouvez utiliser pour vérifier vos contrastes de couleurs et regarder vos sélections en niveaux de gris. Cet outil vous permet aussi de conserver un historique des contrastes de couleurs testés.
  • -Roue de couleur d’accessibilité de Giacomo Mazzocato: Cet outil en ligne inclut plusieurs options pour vérifier vos sélections de couleurs, incluant des simulations de trois types de daltonismes. Vous pouvez aussi faire le choix de vérifier le contraste de couleur quand vos sélections de couleurs de premières et d’arrière-plan sont inverties.

Couleurs d’hyperliens

Les hyperliens doivent être à la fois visuellement distincts de l’arrière-plan et du texte non lié. Si vous ne soulignez pas vos liens(ou ne fournissez pas un autre indice sans couleur), vous devez assurer que vous fournissez à la fois un contraste suffisante entre le lien et la couleur d’arrière-plan et entre la couleur du lien et la couleur du texte qui l’entoure.

Web Content Accessibility Guidelines (WCAG 2.0) exige un contraste de:

  • 4:5:1 entre la couleur du lien et la couleur de l’arrière-plan
  • -3:1 entre la couleur du lien et le texte qui l’entoureWebAIM (2015), WCAG 2.0 and Link Colors. Accessed from: http://webaim.org/blog/wcag-2-0-and-link-colors/.

Mode haute contraste

Certains étudiants ont besoin d’un texte pale sur un arrière-plan foncé pour qu’il soit lisible, pendant que d’autres ont besoin d’un texte foncé sur un arrière-plan pâle. Des étudiants ont une basse vision (comme Diana) doivent être capables de voir le contenu qui est présenté dans un mode haute contraste. Ceci peut être une expérience subjective, basé sur vos besoins individuels. Nous recommandons que vous essayiez de tester votre contenu basé en textes et d’images pendant que vous travaillez en utilisant le mode haut contraste sur votre propre ordinateur et en faisant des changements autant qu’il faut.

Tous objets de contenu comme le texte, images, points, et frontières de tableaux doivent être visibles en les deux modes, réguliers et haut-contraste.

Incertain comment vérifier votre contenu en mode haute contraste?

Pour vérifier la visibilité de votre contenu dans ce mode, affichez le mode haut contraste en pesant simultanément les clés suivantes sur votre clavier(PC):

ALT Gauche + SHIFT Gauche + Imprimer l’écran

Pour fermer le mode haut contraste, répétez cette étape.

Utilisation de couleur*

Vous ne devriez pas compter sur la couleur comme le seul moyen de transmettre vos informations et instructions. Si votre message dépend sur la couleur pour être compris, vous devez modifier vos matières pour que les concepts présentés dans les matières visuelles ne soient pas perdus à ceux qui sont daltoniens ou ceux qui exigent un haut contraste entre couleurs.Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.1 Use of Color. Accessed from: http://www.w3.org/TR/WCAG20/#visual-audiocontrast

*Cette section est adressée dans la section Images de cette trousse d’outils.

 

8

Taille de police

Dans cette section, nous révisons les deux préoccupations principales de la taille de police sur l’internet.

C’est quoi la taille de police?

La taille de police: La grandeur du texte visible sur l’écran

Avant de commencer

Pour qui faites-vous ceci?

Ce travail appuie les étudiants qui:

diana

Que devez-vous faire?

Il y a deux préoccupations principales en travaillant avec la taille de police.

1.     Assurez que les tailles par défaut ne sont pas trop petites.

2.     Assurez que le texte peut être agrandit à 200% sur les sites web.http://sites.psu.edu/accessibility/fontsizehtml/

Gardez en tête les recommandations et les lignes directives suivantes:

  • 12 points pour le corps du texte: Pour la plupart des documents, le texte du corps devrait être autour de 12 points. Les tailles plus petites seront indéchiffrables pour certains auditoires.
  • 9 points pour les notes de bas de pages: Si un document contient des notes en bas de page ou en fin du document, la taille minimum devrait être environ 9 points.
  • 200% zoom: Les Web Content Accessibility Guidelines (WCAG 2.0) (Règles pour l’accessibilité du contenu web) recommandent d’assurer que le texte peut être agrandi à 200%. En plus, nous recommandons d’utiliser des structures de page fluideLes structures de pages fluides créent des pages structurés basés sur les pourcentages de la taille actuelle de la fenêtre du navigateur. Ils changent avec la taille de la fenêtre, même si l'utilisateur change la taille du navigateur pendant qu'il visite le site web. La fluidité en largeur permet une utilisation très efficace de l'espace fournit par n'importe quelle fenêtre de navigateur ou résolution d'ordinateur. qui peuvent accommoder le texte à 200%

3

Conclusion

9

Prochains étapes

Ceci c’est la première version de ce document. Nous attendons qu’il y ait des versions futures et apprécions tous rétroaction que vous voulez nous envoyer.

Nous espérons avoir fourni les personnes qui écrivent des manuels de cours ouverts avec une compréhension claire des points à adresser comme des créateurs de contenu pour assurer que leurs matières soient accessibles.