Cyber apprentissage et accessibilité. Créer du contenu accessible

Transcription

1 Cyber apprentissage et accessibilité Créer du contenu accessible JUIN 2014

2 Table des matières Introduction... 3 Contenu visuel... 3 Images et Alt... 3 Iconocartes et Alt... 4 Images dénuées de sens et Alt... 4 Images employées comme bouton... 4 Organisation du contenu... 4 Imbrication séquentielle des en-têtes... 4 Ajout d en-têtes aux tableaux... 5 Listes... 7 Liste ordonnée... 7 Liste à puces... 8 Liste descriptive ou de définitions... 8 Navigation avec le clavier... 8 Évènements Javascript... 9 Feuilles de styles :hover et :focus... 9 Formulaires...10 Description des formulaires avec Label, Fieldset et Legend...10 Liens...11 Compliqué avec un texte ponctué de liens dénués de sens...12 Plus facile avec des liens qui ont du sens...12 Langage et lisibilité...13 Autres conseils...14 À faire...14 À éviter

3 Introduction Le créateur peut recourir à diverses stratégies pour rendre le contenu Web qu il conçoit accessible. Le document que voici décrit ces stratégies en détail. Une connaissance rudimentaire du langage HTML vous aidera à mieux les saisir. Lorsqu il est question de HTML, on entend souvent les termes «élément» et «attribut». Pour plus de clarté, disons que le premier se rapporte fréquemment à une balise HTML et le second, à une propriété de cette balise. Dans l exemple qui suit, la balise image est représentée par l élément <img> qui a pour propriétés les attributs «src», indiquant le chemin jusqu à l illustration ou au fichier d origine (source), et «alt», qui renferme le texte décrivant l image. // Les éléments HTML sont souvent appelés balises. // L élément <img> ci-dessous a un attribut src indiquant où se trouve l image // et un attribut alt contenant le texte qui décrit celle-ci. <img src="images/big_cat.jpg" alt="un gros chat noir" /> Contenu visuel L auteur s assurera que le contenu pédagogique est présenté sous plusieurs formes, bref qu on peut en prendre connaissance avec divers sens. Les aveugles, par exemple, auront besoin d une solution de remplacement pour le contenu visuel, le plus souvent un texte quelconque. Bien qu on puisse recourir à une version sonore du contenu visuel (un fichier MP3 décrivant une illustration complexe, par exemple), le fichier audio interférera sans doute avec ce que restitue le lecteur d écran. Un texte optionnel, en revanche, peut aisément être adapté, voire simplifié et déchiffré par le lecteur d écran, converti en braille en vue d être affiché sur un écran tactile ou traduit dans une autre langue. Alt. La solution de rechange textuelle la plus courante est l attribut Alt, associé à la balise HTML des images. Cet attribut devrait fournir de l information utile que comprendra la personne examinant l image ou, si on utilise cette dernière comme lien ou bouton, en décrire l utilité ou la destination. On devrait aussi ajouter l attribut Alt à l élément Area, quand on crée une iconocarte, c est-à-dire une image à zones cliquables menant à d autre contenu Web. Les quatre exemples que voici montrent comment utiliser cet attribut en HTML. Images et Alt // Usage de l attribut alt avec des images significatives. // Ici, alt procure une description utile // de ce que représente une photographie. <img src="images/black_cat.jpg" alt="un gros chat noir" height="244" width="325" /> 3

4 Iconocartes et Alt // Usage de l attribut alt avec une iconocarte. // Chaque zone de la carte est associée à l attribut alt qui lui correspond. <map id ="planetmap" name="planetmap"> <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="soleil" /> <area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="mercure" /> <area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="vénus" /> </map> Images dénuées de sens et Alt // Usage de l attribut alt avec une image dénuée de sens. // Ici, une illustration décorative est assortie d un attribut alt vide // ce qui force les technologies d assistance à ne pas en tenir compte. <img src="images/corner_decoration.jpg" alt="" /> Images employées comme bouton // Usage de l attribut alt avec les images servant de bouton. // Ici, on a utilisé type="image" pour créer un bouton // qui ouvre une séance. C est pourquoi l image nécessite un attribut alt. <form name="myform" action=" method="post"> <input type="text" size="25" value="inscrivez votre nom ici!" /></br /> <input type="image" src="login.png" name="image" width="60" height="60" alt="connectezvous maintenant!" /><br/> </form> Organisation du contenu Quand on intègre du HTML structural au contenu pédagogique, ce dernier prend plus de sens pour les apprenants qui recourent à une technologie d assistance (TA). Imbrication séquentielle des en-têtes Grâce aux en-têtes HTML (H1, H2, H3, etc.), le HTML structural décrit les liens entre sujets principaux et sujets secondaires qui sauteraient immédiatement aux yeux d un lecteur sans problème de vision, à la vue de la taille ou de l indentation des titres, ou d une autre présentation visuelle, par exemple. Il procure aussi à l utilisateur de TA un moyen pour naviguer dans la page Web. La plupart des technologies d assistance proposeront à ce dernier une liste des en-têtes apparaissant sur la page qui lui résumera non seulement le contenu, mais lui 4

5 permettra aussi de passer directement d une section à l autre, en escamotant le reste du contenu. On ne devrait jamais recourir aux balises d en-tête pour formater une page (avec de gros caractères gras, par exemple). En outre, les en-têtes devraient être imbriqués correctement. Ainsi, on ordonnera les en-têtes dans la séquence H1, H2, H3, H2, H3, H4, H2, H3, mais pas H1, H3, H4, H2, H4, où les titres secondaires ont été omis. Dans l exemple qui suit, le niveau des en-têtes a été indenté pour mieux faire ressortir la façon dont le contenu est structuré. // Structurer les en-têtes pour faire ressortir leurs liens. // Ne pas sauter de niveau lorsqu on présente des sujets secondaires. // Ne pas utiliser les balises d en-tête pour la présentation visuelle. <h1>le système solaire </h1> <h2>le Soleil /h2> <h2>les planètes intérieures </h2> <h3>mercure</h3> <h3>vénus</h3> <h3>la Terre</h3> <h3>mars</h3> <h2>les planètes extérieures </h2> <h3>jupiter</h3> <h3>saturne</h3> <h3>uranus</h3> <h3>neptune</h3> Ajout d en-têtes aux tableaux On peut également se servir du HTML structural dans les tableaux de données. L apprenant qui utilise un lecteur d écran pour se déplacer dans un tableau recourra habituellement aux touches fléchées pour passer d une cellule à l autre. Arrivé à la quatrième rangée de la cinquième colonne, par exemple, il aura du mal à se rappeler le texte qui décrit la colonne, au sommet, et l endroit où il se trouve dans celle-ci. Comprendre ce que représentent les données dans la cellule gagnera donc en difficulté. Quand on crée un tableau en associant le texte descriptif de la première rangée, et parfois celui de la première colonne, à l élément <TH> (en-tête de tableau), cette description sera lue avec le contenu de la cellule (<TD>). L apprenant qui utilise une technologie d assistance n a alors plus besoin donc de garder en tête l endroit du tableau où il se trouve. Examinez le tableau ci-dessous. Le contenu de la première rangée et de la première colonne est inclus à l élément «en-tête de tableau» TH. S il navigue avec un lecteur d écran, l utilisateur d une TA qui parvient à la partie de la page correspondant au tableau entendra le contenu des en-têtes qui se croisent à chaque cellule, par exemple «Jean, Janvier, 20», puis «Jean, Février, 23» et ainsi de suite. S il n y pas d en-têtes, le lecteur annoncera simplement «20» 5

6 puis «23» et «18», de sorte que l utilisateur de la TA aura de la difficulté à comprendre ce que les chiffres signifient. Pourcentage des économies mensuelles quand on laisse l automobile chez soi Nom Janvier Février Mars Avril Mai Jean Marie Diane Marc Le balisage HTML ci-dessous illustre comment les en-têtes des rangées et des colonnes du tableau qui précède ont été créés. Notez aussi les éléments Caption et Summary, qui décrivent le tableau et en résument les données, respectivement. // Usage de la balise TH avec les rangées et les colonnes d un tableau // pour que la description de ces dernières // soit lue avec le contenu de chaque cellule. <table summary="pourcentage des coûts de transport économisés par les employés recourant aux transports en commun" border="1"> <caption>pourcentage des économies mensuelles réalisées quand on laisse l automobile chez soi</caption> <tr> <th>nom</th> <th>janvier</th> <th>février</th> <th>mars</th> <th>avril</th> <th>mai</th> </tr> <tr> <th>jean</th> <td>20</td> <td>23</td> <td>18</td> <td>5</td> <td>25</td> </tr> <tr> <th>marie</th> <td>21</td> <td>14</td> <td>24</td> <td>24</td> 6

7 <td>17</td> </tr> <tr> <th>diane</th> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> </tr> <tr> <th>marc</th> <td>29</td> <td>25</td> <td>27</td> <td>22</td> <td>28</td> </tr> </table> Listes La liste est un autre élément structural utile du HTML. Elle peut être ordonnée (<ol>), chaque article étant numéroté, ou pas (<ul>), ses éléments étant séparés par des puces. Il existe aussi une liste de définitions ou descriptive (<dl>), dans laquelle chaque terme (<dt>) est suivi d une explication (<dd>). Chaque type de liste a un sens sémantique différent pour l utilisateur de TA. Ainsi, on recourra à une liste ordonnée quand il est important de présenter les éléments dans un ordre précis, tandis qu on privilégiera la liste à puces si cet aspect présente moins d importance et la liste descriptive quand le premier élément d une paire dans la liste (<dt><dd>) est associé au second. L utilisateur d une TA qui rencontre une liste entendra d abord qu il s agit d une liste, puis le nombre d éléments qui la composent et l emplacement de chacun, à mesure qu il progresse dans la liste. Cette information supplémentaire l aidera à naviguer dans la liste, tout en rendant celle-ci plus utile. Liste ordonnée // On se servira d une liste ordonnée // quand il est important de présenter les éléments dans un ordre précis. <ol> <li>mercure</li> <li>vénus</li> <li>la Terre</li> <li>mars</li> </ol> 1. Mercure 2. Vénus 3. La Terre 4. Mars 7

8 Liste à puces // On utilisera la liste à puces quand l ordre // dans lequel les éléments sont présentés n a AUCUNE importance. <ul> <li>pomme</li> <li>orange</li> <li>banane</li> <li>poire</li> </ul> Liste descriptive ou de définitions Pomme Orange Banane Poire // On recourra à la liste descriptive avec // des éléments groupés par deux. <dl> <dt>pomme</dt><dd>fruit dur de couleur rouge, jaune ou verte </dd> <dt>orange</dt><dd>fruit juteux de couleur orange, de la famille des agrumes </dd> <dt>banane</dt><dd>fruit allongé, légèrement recourbé, tendre et de couleur jaune </dd> <dt>poire</dt><dd>fruit tendre ou dur, de couleur variée, plus large à sa base</dd> </dl> Pomme fruit dur de couleur rouge, jaune ou verte Orange fruit juteux de couleur orange, de la famille des agrumes Banane fruit allongé, légèrement recourbé, tendre et de couleur jaune Poire fruit tendre ou dur, de couleur variée, plus large à sa base Navigation avec le clavier Un aspect important de l accessibilité Web est la capacité de naviguer à travers le contenu à la fois avec la souris et le clavier. C est ce qu on appelle souvent «indépendance» ou «autonomie du dispositif». La majorité des apprenants aveugles accéderont au contenu Web avec un clavier, pas une souris, réalité que négligent fréquemment le développeur. Lorsqu il rédige le script qui rendra son contenu pédagogique interactif, le créateur de contenu combinera donc des évènements souris et clavier. Il s assurera aussi que les changements résultant des feuilles de style en cascade (CSS) activées par la souris soient également déclenchés par le clavier. Ainsi, si le pointeur de la souris modifie la couleur du lien qu il survole, ce changement de couleur devrait aussi survenir quand on utilise la touche Tabulation pour naviguer jusqu au lien avec le clavier. 8

9 Évènements Javascript Ceux qui se servent de Javascript pour créer du contenu recourront soit à des gestionnaires d évènements indépendants du dispositif, soit à des gestionnaires d évènements pour la souris et le clavier. Évènements souris // ne pas utiliser seul // mais avec un évènement // clavier onclick ondblclick onmouseover onmouseout Évènements clavier // ne pas utiliser seul // mais avec un évènement // souris onkeydown onkeypress onkeyup Évènements indépendants du dispositif // peuvent être utilisés seuls // mais attention de ne pas // modifier le contexte onchange onfocus onblur Feuilles de styles :hover et :focus Pour créer une feuille de style qui donnera accès au contenu avec la souris et le clavier, on combinera les styles :hover et :focus. Le premier active les changements de style qui surviennent quand le pointeur de la souris survole un élément; le second en fait autant quand l élément est mis en relief au clavier. L exemple ci-dessous montre un lien dont la couleur change quand le pointeur de la souris le survole et quand on utilise la touche Tabulation pour le cibler avec le clavier. // Quelques commandes simples en HTML // pour faire ressembler un lien // à un bouton. <html> <body> <a href="" class="button-link">un lien en forme de bouton</a> </body> </html> // Voici la feuille de style CSS // qui transforme le lien en // bouton. Notez les styles // :hover et :focus qui // modifient la couleur du fond // en bleu avec la souris et le clavier <style type="text/css">.button-link{ border:1px solid green; background-color: red; padding:1em; 9

10 }.button-link:hover,.button-link:focus{ background-color: blue; color:white; } </style> Formulaires Quand le cyber apprentissage fait appel à des formulaires, il importe de s assurer que les éléments de saisie comme les champs de texte, les boutons radio et les cases à cocher sont étiquetés afin que l utilisateur recourant à une technologie d assistance puisse s en servir lui aussi. Dans de nombreux cas, placer simplement le texte explicatif à côté du champ de saisie suffira; cependant, rien ne garantit que le texte reste accolé à l élément du formulaire. En effet, lorsqu on modifie la résolution de l écran ou prend connaissance du contenu sur un dispositif mobile, il se peut que l étiquette change de place et soit séparée du champ du formulaire. Pour l éviter, on utilisera la balise HTML <label> qui associe explicitement le texte descriptif à un élément précis du formulaire. Où que l étiquette se trouve sur l écran, cette association fera en sorte qu elle soit lue et que l apprenant recourant à une TA obtienne une description appropriée du champ du formulaire. La balise <label> rend aussi le texte de l étiquette cliquable, donc permet d activer l élément correspondant du formulaire et agrandit la cible pour ceux qui auraient du mal à placer le pointeur de la souris dans un espace exigu, comme un bouton radio ou une case à cocher. Description des formulaires avec Label, Fieldset et Legend L exemple ci-dessous montre comment se servir de la balise HTML <label> pour étiqueter un formulaire. Notez que l attribut «for» de cette balise correspond à l attribut «id» du champ de saisie qui y est associé dans le formulaire. Remarquez aussi que l élément Fieldset englobe la totalité du formulaire, ainsi que les boutons radio avec lesquels la personne signale être de sexe masculin ou féminin. La balise Fieldset regroupe et décrit des éléments apparentés du formulaire. Chacune s accompagne de l élément Legend, espèce d étiquette principale qui renferme le texte décrivant les éléments du formulaire réunis par Fieldset. Quand elle rencontre le formulaire, la technologie d assistance lit la balise «Se joindre au groupe» puis les étiquettes «Nom, modifier texte» et, plus loin, «Se joindre au groupe, Sexe, bouton radio Masculin non sélectionné». Dans chaque cas, la balise Legend est répétée avec l élément Label du champ correspondant, de sorte qu il est plus facile de comprendre le but de l information saisie. Sans Fieldset, la technologie d assistance annoncerait «Nom» pour le premier élément, puis «Masculin, bouton radio non sélectionné», ce qui laisse planer un doute sur le but du champ de saisie. 10

11 // Usage de la balise <label> pour associer // une description à chaque champ de saisie // et des éléments <fieldset> et <legend> // pour regrouper des éléments similaires du formulaire <fieldset><legend>se joindre au groupe </legend> <form> <label for="text1">nom</label> <input type="text" id="text1" /> <fieldset><legend>sexe</legend> <label for="radio1">masculin</label> <input type="radio" id="radio1" name="sex" /> <label for="radio2">féminin</label> <input type="radio" id="radio2" name="sex" /> </fieldset> <label for="checkbox1">je suis nouveau</label> <input type="checkbox" id="checkbox1" /> <br /> <input type="submit" value="se joindre" /> </form> </fieldset> Le balisage qui précède crée un formulaire semblable à celui-ci. Liens Une erreur courante lorsqu on crée du contenu pour un site Web consiste à utiliser comme lien du texte vide de sens, par exemple «cliquer ici» ou «en savoir plus». Les liens de ce genre 11

12 ne fournissent aucune information utile et compliquent la navigation pour tout le monde. Il est beaucoup plus facile de parcourir une page et de voir où aboutiront les liens qui s y trouvent quand le texte signifie quelque chose en soi, comme «Inscription», «À notre sujet» ou «Ouvrir une séance maintenant». Bien que les technologies d assistance permettent à l utilisateur de dresser la liste des liens qui apparaissent sur une page, une série de «cliquer ici» ou «en savoir plus» n aura guère d utilité, à moins que le texte voisin ne remette le lien en contexte. C est le cas, notamment, des sites de nouvelles où la manchette servant de lien est suivie d un court extrait de l article puis d un lien «plus» conduisant à sa version intégrale. La manchette confère tout son sens au lien «plus» qui suit, pour la personne utilisant une TA. Si étoffer un lien de cette manière est acceptable au niveau A des WCAG 2.0 (Guideline 2.4.4), cela ne l est pas au niveau AAA, car les technologies d assistance trient souvent les listes de liens par ordre alphabétique à la demande de l utilisateur, ce qui, dans l exemple qui précède, modifiera l emplacement de la manchette en la séparant du lien «plus», lequel perdra le sens qu elle lui donnait précédemment. En matière de liens, la règle générale veut qu on sache à quoi sert chaque lien à sa lecture, bref que le texte décrive la fonction du lien (ouvrir une fenêtre en incrustation, par exemple) ou sa destination (ce que découvrira l utilisateur qui l active). Examinez les deux exemples que voici et songez aux efforts que vous devriez déployer, vous dont la vue est intacte, pour découvrir où mènent les liens si vous parcouriez le paragraphe en diagonale sans le lire. Compliqué avec un texte ponctué de liens dénués de sens Les Web Content Accessibility Guidelines (WCAG 2.0) du W3C expliquent comment rendre le contenu Web accessible à tous. Apprenez-en plus sur les WCAG 2.0 ici. Les WCAG 2.0 comprennent plusieurs documents d appoint qui exposent en détail les critères de réussite en la matière, ainsi que les techniques pour y arriver. Cliquer ici pour en savoir plus à ce sujet. Les outils comme AChecker Web Accessibility Checker, disponible ici, peuvent servir à identifier les problèmes d accessibilité et montrent comment les surmonter. Plus facile avec des liens qui ont du sens Les Web Content Accessibility Guidelines (WCAG 2.0) du W3C expliquent comment rendre le contenu Web accessible à tous. Les WCAG 2.0 comprennent aussi plusieurs documents d appoint qui exposent en détail les critères de réussite en la matière, ainsi que les techniques pour y arriver. Les outils comme AChecker Web Accessibility Checker peuvent servir à identifier les problèmes d accessibilité et montrent comment les surmonter. 12

13 Langage et lisibilité Le langage et la lisibilité favorisent considérablement l accessibilité du contenu Web. On identifiera la langue principale de chaque page en ajoutant l attribut «lang» à l élément HTML qui ouvre la page. De cette façon, on s assurera que la technologie d assistance qui déchiffre la page sache comment prononcer les mots. Imaginez, par exemple, à quoi ressemblerait du français prononcé à l anglaise. L illustration qui suit montre l attribut «lang» dans l élément HTML commandant l ouverture de la page. // L attribut lang dans l élément HTML d ouverture // signale la langue dans laquelle a été écrite la page <html lang="fr"> // Si vous utilisez le XHTML, ajoutez les attributs lang // et xml:lang <html lang="fr" xml:lang="fr"> Quand la page comprend du texte multilingue, il importe d identifier les autres langues employées. Un problème courant sur de nombreux sites Web canadiens a trait au lien Français ou English servant à culbuter les langues. La langue du lien doit être identifiée dans la balise HTML qui englobe ces mots. Encore une fois, on utilisera pour cela l attribut «lang». La même remarque s applique à toute partie du texte sur la page qui n est pas écrite dans la langue principale. // Pour le lien Français sur le site anglais, indiquer que // le texte est en français avec l attribut lang="fr" <a href="french_index.html" lang="fr">français</a> // Pour le lien English sur le site français, indiquer que // le texte est en anglais avec l attribut lang="en" <a href="english_index.html" lang="en">english</a> Le niveau de lecture du contenu peut lui aussi donner du fil à retordre à ceux qui éprouvent des difficultés de compréhension. Quand on rédige pour le Web, surtout si le site est destiné au grand public, on privilégiera le langage le plus simple possible, c est-à-dire, d une manière générale, un vocabulaire de 9 e ou de 10 e année. Évitez le sarcasme, les expressions idiomatiques, les métaphores et d autres figures de style peu courantes, susceptibles d être mal comprises. 13

14 L usage d un langage simple rehaussera la lisibilité du site donc le rendra plus facile à saisir pour ceux dont la langue maternelle n est pas la même que celle du contenu, et pour les personnes qui souffrent d un handicap cognitif ou lié à la lecture. Si le site vise un auditoire précis et plus instruit, adaptez le langage en conséquence en vous rappelant d employer la terminologie la plus simple qui soit, quand la chose est possible. Autres conseils À faire Utilisez les feuilles de style en cascade (CSS) plutôt que les attributs HTML pour changer l aspect de la page. Définissez la couleur de fond si vous avez précisé celle du texte. Autant que possible, servez-vous d unités de mesure relatives (em, %) plutôt qu absolues (px, pt, cm) pour établir les dimensions. Choisissez des couleurs qui contrastent bien pour le texte et l arrière-plan. Donnez un titre différent à chaque page. Efforcez-vous d employer le même libellé pour le lien, le titre de la page et l en-tête principal de la page de destination ou, au strict minimum, employez des mots qui ont le même sens (quand l espace manque, par exemple). Utilisez les mêmes termes quand plusieurs liens mènent au même endroit. Employez un texte unique quand les liens aboutissent à des endroits distincts. Donnez la définition des termes nouveaux ou inhabituels. Écrivez les abréviations au long, de préférence en utilisant chaque fois les balises HTML Abbr ou Acronym. À éviter N utilisez pas la balise HTML blockquote pour décaler le texte, sauf s il s agit d une citation. N utilisez pas d image pour présenter du texte si vous pouvez rédiger celui-ci directement. Ne recourez pas à des éléments HTML dépréciés (par ex., <font>,<b>,<s>, <u> et <center>). N utilisez pas d attributs HTML dépréciés (par ex., align, bgcolor, border, nowrap, width ou vspace). Ne donnez pas de sens à une couleur (à savoir, n écrivez pas «cliquez le bouton rouge»). Ne supprimez pas le soulignement habituel sous un lien quand celui-ci fait partie intégrante du texte. Ne vous servez pas d images invisibles pour créer de l espace. Recourez plutôt aux CSS. N ouvrez pas de nouvelles fenêtres sans d abord en prévenir l utilisateur. 14