Accessibilité du Web : Les tableaux

Durée = 5:05 min. Niveau = débutant / expert. Handicap concerné = visuel.

Description

Pour un internaute aveugle, accéder à des données organisées en tableaux est difficile voire impossible quand le développeur n’a pas pris la précaution d’écrire un code conforme aux standards d’accessibilité. Le tutoriel explique l’un des moyens de rendre accessible des tableaux…

Tutoriel vidéo

Traduction espagnole réalisée par Lucas Bride Traduction chinoise réalisée par Lianhui Zhou Traduction anglaise réalisée par Ruth Woodrow

 

Ressources

Pour en savoir plus sur les tableaux :

Les différentes façons de rendre accessible un tableau accessible selon son niveau de complexité : Au tableau sur www.pompage.net

Créez un tableau accessible en quelques secondes. Un outil pratique et efficace : Outil de création de tableaux sur www.accessify.com

Contribuez à la traduction

Contribuez à la diffusion de cette vidéo pédagogique à l’international en traduisant les sous titres de cette vidéo :

  1. Téléchargez le fichier de sous titres français, espagnol, chinois ou anglais au format SRT
  2. Envoyez par email le fichier sous titres au format SRT traduit à l’équipe Access-Key

Sous titres

Voici les sous titres en version texte de la vidéo pédagogique sur les images-liens (notez que le texte en italique correspond à la voix de la synthèse vocale utilisée par Isabelle):

Jean: démonstration d’une mauvaise accessibilité des tableaux

Nous allons maintenant nous intéresser à l’exemple des tableaux pour un tableau il faut bien identifier chacune des cellules sinon on se heurte au problème suivant : je suis à la recherche d’une salle, dans un centre qui comprend un certain nombre de salles qui portent le nom d’une ville de la Côte d’Azur et je vais chercher une salle dans ce tableau Titre html : l’ensemble des salles disponibles sont répertoriées ci-dessous Voilà l’ensemble des salles disponibles est répertorié. Pour chaque salle, j’ai : Nom de la salle, étage, capacité, climatisation, vue mer. Antibes Ah, la salle Antibes ! 1, 26, oui, oui,Biot La salle "Biot" 1, 12, non, non, Cannes La salle "Cannes" 3, 26, oui, oui, Eze, 2, 8, non, non, Frejus, 3, 30 Ah, 30 personnes ! ça m’intéresse oui, non je ne me rappelle plus à quoi correspondent ce "oui" et ce "non". Je n’ai aucune information oui, oui donc je suis embêté, parce que je ne peux pas remonter c’est long, c’est fastidieux. Il suffirait pourtant de bien avoir identifié chacune des cellules.

Jean: démonstration d’une bonne accessibilité des tableaux

Nous allons voir un exemple quand un tableau est bien rentré. Maintenant voici un tableau qui est bien composé où chacune des cellules est en lien avec le titre de la colonne et où je vais pouvoir me repérer. Alors Jaws, enfin le logiciel de lecture d’écran me dit déjà : tableau avec 5 colonnes et 10 lignes Je sais que c’est un tableau de 5 colonnes et 10 lignes. Je me retrouve bien dans mon tableau de recherche de salles Titre html = inventaire des salles disponibles. Le titre est gestion des salles, Microsoft Internet Explorer Et j’ai le titre de mes différentes colonnes : Nom de la salle, étage, capacité, climatisation, vue mer, Antibes Et maintenant je peux chercher ligne par ligne Et chercher les renseignements concernant ma salle Fréjus. Me voici sur la ligne "Fréjus" Fréjus Et pour chacune de mes informations contenue dans les colonnes je peux trouver : 3, ligne 6, colonne 2, Etage fréjus : 3 Troisième étage donc, "Etage 3" 30, ligne 6, colonne 3, Capacité Fréjus : 30 30 personnes, c’est la capacité oui, ligne 6, colonne 4, Climatisation Fréjus : oui La climatisation il me dit oui donc ce "oui" concerne la climatisation non, ligne 6, colonne 5, Vue mer Fréjus : non Et non, on n’a pas la vue mer dans la salle Fréjus ! Et donc j’ai toute l’information je suis aussi à l’aise que si je pouvais lire mon tableau avec mes yeux mon logiciel me donne toutes les informations disponibles grâce à la bonne "rentrée" de ce tableau.

Tutoriel: fournir des tableaux accessibles

Les problèmes que rencontre Jean dans la lecture du premier tableau sont le résultat d’un code non accessible. Dans cet exemple, aucune distinction n’est faite entre les entêtes de tableau codées ici avec l’élément td et les cellules du tableau, elles aussi codées avec l’élément td. Un tableau bien codé doit prendre en considération les points suivants : En premier lieu il est important d’utiliser l’attribut summary pour offrir une description assez longue du tableau. S’il est facile pour une personne voyante de se faire une idée du tableau qu’elle s’apprête à lire, cet exercice est en revanche beaucoup plus difficile pour une personne aveugle. Le contenu de l’attribut summary n’est pas interprété par les navigateurs visuels mais peut être lu par un logiciel de lecture d’écran. Cet attribut doit être privilégié dans la création de tableaux complexes. L’élement caption peut fournir une courte description du tableau de la même façon que l’attribut alt peut le faire pour une image. Caption sera affiché par la plupart des navigateurs graphiques, généralement centré au dessus du tableau. Retenons que cet élément doit être utilisé pour une courte description. La principale différence entre nos deux tableaux réside dans la façon dont ont été codées les entêtes et les cellules. Ici les entêtes de colonnes sont spécifiées par la balise TH. A la balise TH est ajouté l’attribut ID. Les cellules pour leur part utilisent la balise TD à laquelle on attribue "Headers" pour relier le contenu de la cellule au titre de colonne auquel il est associé. De cette façon, un tableau est accessible à une personne non-voyante car il peut être facilement lu par un logiciel de lecture d’écran.

Logo de l'Université Nice Sophia Antipolis  Logo de l'Université de Haute Alsace    Logo de la Fondation Orange