Jour 19 : Utiliser de vrais en-têtes de tableaux
Si vous avez un calendrier sur votre site web, il devrait surement être conçu comme un tableau HTML. Il y a eu quelques tentatives pour créer des calendriers uniquement CSS. A part pour la beauté de l'exercice de style, les données d'un calendrier sont tabulaires et doivent être balisées comme telles.
La chose plus importante apropos d'un tableau de donnée est de baliser correctement les en-têtes. Dans le cas d'un calendrier, cela signifie les jours de la semaine en haut. Vous devriez absolument inclure des en-têtes pour les jours de la semaine ; si vous ne voulez pas qu'ils soient visibles, vous pouvez toujours les rendre invisible avec CSS. (Je le fais sur mon carnet Web.) Mais les en-têtes doivent absolument être là, car les lecteurs d'écran en dépendent pour aider les utilisateurs aveugles à naviguer dans le tableau quand ils sont perdus.
Le truc à propos d'un calendrier (et tous tableaux de données, en fait, mais nous parlons aujourd'hui des calendriers) est qu'il est très facile de l'utiliser si vous pouvez le voir tout entier en une seule fois, mais très difficile à utiliser si vous ne pouvez voir qu'un jour à la fois. Imaginez que vous ayez un calendrier jour par jour sur votre bureau, mais que chaque page liste seulement le jour du mois, pas le jour de la semaine. Page après page : 1, 2, 3, 4, 5, 6, 7... Aujourd'hui est le 4, que je sais être un jeudi. Maintenant avancez jusqu'à 11, 12, 13. Rapidement : Quel est le jour de la semaine qui est daté du 13. La page ne vous le dit pas ; Vous avez à vous le rappeler par vous-même.
C'est ce qui se passe pour un utilisateur aveugle qui navigue dans un calendrier sans en-têtes adéquats. Vous obtenez une masse de nombres mais aucun contexte pour les comprendre ou les suivre. Ajouter les en-têtes adéquats à un calendrier permet au logiciel lecteur d'écran d'associer l'en-tête du tableau (jour de la semaine) avec les données du tableau (jour du mois) et de les associer ensemble. "jeudi 4, jeudi 11, vendredi 12, samedi 13." Oh ! On est samedi.
Notez que j'ai dit des en-têtes adéquats. Placez les jours de la semaine dans des balises <td> dans la première ligne n'est pas assez. Ils doivent être à la place dans des balises <th>. La plupart des gabarits de carnet Web ne le font pas correctement, mais c'est assez simple à corriger et votre calendrier sera exactement le même dans de nombreux navigateurs visuels une fois fait.
Qui en bénéficie ?
Jackie en bénéficie. Lorsqu'elle tombe sur votre calendrier, JAWS lit le titre en premier, et puis annonce les en-têtes, alors Jackie peut suspendre avec Contrôle + ALT et se déplacer dans le tableau avec les touches flêchées. Lorsqu'elle se déplace, JAWS annonce les en-têtes (jour de la semaine) et la donnée de la cellule (jour du mois).
Tous les lecteurs d'écran connus permet ce type de navigation dans les tableaux. Home Page Reader permet aux utilisateurs de passer au mode de "navigation tableau" (ALT+T), et de se déplacer au sein du calendrier sans avoir à faire des combinaisons de touches. Home Page Reader va même un peu plus loin que JAWS. Tel que nous le verrons dans une minute, vous pouvez définir un titre plus court (ou plus long) pour les titres de chaque en-tête de tableau (du même type que d'ajouter des titres à vos liens), et Home Page Reader lira ceci à la place du texte de l'en-tête original textuel du tableau. Ceci veut dire que vous pouvez afficher visuellement vos jours de la semaine avec "Lu", "Ma", "Me", mais vous pouvez dire à Home Page Reader de les lire comme "Lundi", "Mardi", "Mercredi". Cool.
Comment le réaliser ?
Si vous ne l'avez pas encore fait, vérifiez que votre calendrier a un vrai titre. La balise <caption> doit être la première chose après la balise <table> et la ligne de balise <th> devrait être la première chose juste après.
Dans Movable Type, trouvez le calendrier dans le gabarit Main Index. (Encore une fois, cherchez "calendarhead" pour le trouver.) Juste après <caption>, vous verrez les jours de la semaine définis comme ceci :
<tr>
<td align="center"><span class="calendar">Sun</span></td>
<td align="center"><span class="calendar">Mon</span></td>
<td align="center"><span class="calendar">Tue</span></td>
<td align="center"><span class="calendar">Wed</span></td>
<td align="center"><span class="calendar">Thu</span></td>
<td align="center"><span class="calendar">Fri</span></td>
<td align="center"><span class="calendar">Sat</span></td>
</tr>
Changez le comme ceci :
Note du traducteur : C'est le moment de rendre plus accessible votre calendrier mais également de le franciser :)
<tr>
<th abbr="Dimanche" align="center"><span class="calendar">Di</span></th>
<th abbr="Lundi" align="center"><span class="calendar">Lu</span></th>
<th abbr="Mardi" align="center"><span class="calendar">Ma</span></th>
<th abbr="Mercredi" align="center"><span class="calendar">Me</span></th>
<th abbr="Jeudi" align="center"><span class="calendar">Je</span></th>
<th abbr="Vendredi" align="center"><span class="calendar">Ve</span></th>
<th abbr="Samedi" align="center"><span class="calendar">Sa</span></th>
</tr>
Deux choses se passent ici : Toutes les balises <td> ont été changées en <th> et un attribut "abbr" a été ajouté pour spécifier le nom complet du jour de la semaine. (L'attribut "abbr" peut servir dans deux cas. Pour les en-têtes de tableau très longs, il peut être utiliser comme abréviation ; d'où le nom. Mais pour les en-têtes de tableau très court, il permet des versions plus longues, ce que nous faisons ici même.)
Dans Radio, la façon de faire est similaire à ce que vous avez fait hier pour donner un vrai titre avec caption à votre tableau.
- Dans Radio, ouvrir l'application Radio. Sur Windows, clic-droit sur la petite icône Radio dans votre système et sélectionnez "Ouvrir Radio".
- Dans le menu "Tools" (Outils), choisissez "Developers", et puis "Jump..." (Control+J). Rendez vous à "system.verbs.builtins.radio.weblog.drawCalendar" (pas de guillemets).
Ensuite dans le menu "Edit", "Find and Replace", "Find..." (Control+F) et trouvez "addDayName". Ceci devrait afficher et mettre en valeur la fonction addDayName. Double-cliquez le triangle pour afficher le code de cette fonction, qui devrait ressembler à ceci :
on addDayName (name)
add ("<td width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</td>")Changez le par :
on addDayName (name, fullname)
add ("<th abbr=\"" + fullname + "\" width=\"19\" height=\"10\" align=\"center\" style=\"font-size:9px\">" + name + "</th>")Maintenant double-cliquez sur la ligne "
for i = 1 to 7" pour faire apparaître ceci :for i = 1 to 7
addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + i))Que vous changez par :
for i = 1 to 7
addDayName (radio.string.getLocalizedString ("dayOfWeekShort." + i), radio.string.getLocalizedString ("dayOfWeek." + i))
Note très importante sur les tableaux de mise en page
Les tableaux utilisés uniquement pour la présentation visuelle ont un ensemble de règles complètement différents. N'utilisez pas les balises dans les tableaux de mise en page. En dehors du fait de bricoler vos tableaux pour présenter votre contenu principal en premier, il n'y a pratiquement aucun intérêt à les rendre accessible. Nous discuterons d'une petite chose demain.
Approfondir
Si vous désirez baliser des données tabulaires plus complexes qu'un calendrier (tableaux avec plusieurs niveaux d'en-têtes et de sous-en-têtes), vous êtes livrés à vous-même. Voici quelques pistes :
- Jim Byrne: Table Manners.
- WebAIM: Create tables that transform gracefully.
- Kynn Bartlett: Understanding Accessible Table Markup.