À propos du projet de manuels scolaires ouverts de Colombie- Britannique

C’est quoi un manuel ouvert?

Pourquoi un trousse d’outils d’accessibilité?

Avant de commencer

Pourquoi avez-vous inclus les images vous avez choisies?

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 textuel[footnote]Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.1 Text Alternatives. Acceder de: http://www.w3.org/TR/WCAG20/#text-equiv[/footnote]
   • N’utilisez pas la couleur comme le seul moyen de transmettre l’information.[footnote]Web Content Accessibility Guidelines (WCAG) 2.0, Guideline 1.4.1 Use of Color. Acceder de: http://www.w3.org/TR/WCAG20/#visual-audiocontrast[/footnote]
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?

• Sont aveugles ou à base vision, par exemple Jacob
• Ont une pauvre vision de contraste
• Sont daltoniens et ne peuvent pas différencier entre certaines couleurs
• Utilisent un appareil avec une présentation monochrome
• Ont une forme de trouble cognitive.

  [caption id="attachment_25" align="alignnone" width="300"] Image de Horton, Sarah; Quesenbery, Whitney. 2014 A Web for Everyone. New York; Rosenfeld Media. Rosenfeldmedia.com/books/a-web-for-everyone/[/caption]

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.[footnote]WebAIM (2014). Alt text blunders. Accessed from: http://webaim.org/articles/gonewild/#alttext[/footnote]
• 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) :

[caption id="attachment_37" align="aligncenter" width="268"] 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)[/caption] 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) :

[caption id="attachment_38" align="aligncenter" width="300"] Quand le robinet est ouvert entre les deux flasques, les atomes peuvent se distribuées de 4 différentes manières.[/caption] 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 :

[caption id="attachment_39" align="alignnone" width="300"] Dans cette graphique à barre simple, la couleur est le seule moyen que l’information est transmise.[/caption]

Exemple 2- inaccessible :

Dans cet exemple d’un graphique à barre, couleur est le seul moyen de communiquer les données. [caption id="attachment_40" align="alignnone" width="300"] 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.[/caption] 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. [caption id="attachment_41" align="alignnone" width="300"] 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.[/caption]

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. »[footnote]webAccess (2012). Adapted from: Top Ten Tips for making your website accessible. Accessed from: http://webaccess.berkeley.edu/developerinformation/top-ten-tips/#alt[/footnote]  

Avant de commencer

Vos tableaux sont-ils simples ou complexes?

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. [caption id="attachment_28" align="alignnone" width="300"] Image d’Ann, art originale par BCcampus[/caption]

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

Avant de commencer

Pourquoi incluez-vous les hyperliens que vous avez choisis?

Pour qui faites-vous ceci?

• ont une forme de déficience cognitive, par exemple Ann.
• ont une déficience physique, par exemple Trish
• sont sourds ou malentendants
• sont aveugles ou ont une basse vision

Que devez-vous faire?

Descriptions

Exemple 1: pas claire:

[caption id="attachment_27" align="alignnone" width="300"] Horton, Sarah; Quesenbery, Whitney. 2014. A Web for Everyone. New York: Rosenfeld Media. rosenfeldmedia.com/books/a-web-for-everyone/[/caption]

Exemple 2- claire et accessible:

• Information sur le projet BC Open Textbook est disponible en anglais en ligne.

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.[footnote]http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140916/G200[/footnote] 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.[footnote]http://accessibility.psu.edu/linkshtml[/footnote]  

Avant de commencer

Quelle forme de multimédia inclurez-vous?

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:
   • Fournir des descriptions auditives des matières visuelles pertinentes dans la ressource.

Pour qui faites-vous ceci?

• Sont sourds ou malentendants, par exemple Steven
• Sont aveugles ou ont une basse vision, par exemple Jacob
• Qui ont une forme de déficience cognitive
• Qui sont dans un endroit où ils ne peuvent pas jouer et entendre l'audio
• Qui apprennent dans une langue autre que leur langue maternelle et ont besoin de format écrit pour appuyer la compréhension.

Que devez-vous faire?

Transcriptions

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

Sous-titres

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

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:

Avant de commencer

Pour qui faites-vous ceci?

• Sont aveugles ou ont une basse vision
• Ont une forme de déficience cognitive par exemple Mark
• Ont une déficience physique

Que devez-vous faire?

MathML

Image avec une étiquette ALT

Exemple 1- une équation en HTML:

LaTeX

1. Copier et coller un morceau de code LaTeX comme

Exemple- équation avec audio.

Avant de commencer

Pour qui faites-vous ceci?

• sont aveugles ou ont une basse vision, par exemple Diane
• ont une forme de déficience cognitive
• sont aveugles ou malentendants
• ont une déficience physique

Avant de commencer

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

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:
   • Confirmer qu'il y a un contraste de couleur suffisante entre votre contenu de premier plan et votre couleur ou texture choisie d'arrière-plan.
2. Avez-vous inclus des hyperliens dans votre contenu? Si oui, vous devriez:
   • Confirmer que la couleur de vos hyperliens est distincte de votre couleur d'arrière-plan et la couleur du texte qui entoure.
3. Avez-vous utilisé de la couleur pour transmettre des concepts ou d'information? Si oui, vous devriez:
   • Confirmer que vous n'utilisez pas uniquement la couleur pour transmettre cette information.

Pour qui est-ce que vous faites ceci?

• ont une basse vision, comme Diana
• Ont une pauvre vision de contraste
• Sont daltoniens et ne peuvent pas voir la différence entre certaine couleurs
• Utilisent une machine avec un écran monochrome.

Que devez-vous faire?

Contraste

[caption id="attachment_58" align="alignnone" width="500"] 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.[/caption]

Ê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'entoure[footnote]WebAIM (2015), WCAG 2.0 and Link Colors. Accessed from: http://webaim.org/blog/wcag-2-0-and-link-colors/[/footnote].

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*