Plongez dans l'accessibilité

Jour 20: Fournir un résumé pour les tableaux

Le commentaire final pour baliser les tableaux astucieusement est à propos de l'élaboration d'un résumé. Le résumé d'un tableau n'est jamais affiché dans les navigateurs visuels ; il est uniquement conçu pour les lecteurs d'écrans et les navigateurs vocaux. Voici de quoi il en est : un résumé, une description plus longue que le titre. Il est habituellement lu juste après le titre.

Tout tableau devrait avoir un résumé. Si vous avez un calendrier, le résumé peut-être aussi simple que "Calendrier mensuel avec des liens vers les contributions quotidiennes". Si vous utilisez des tableaux pour la mise en page, vous devriez donner à chacun de ces tableaux un résumé vide pour indiquer que le tableau est utilisé uniquement pour la présentation visuelle et non pas pour présenter des données tabulées. (C'est un raisonnement similaire à celui de fournir un attribut ALT vide sur des images utilisées uniquement pour l'espacement visuel. Nous discuterons de ces "images d'espacement", lundi prochain.)

Qui en bénéficie ?

1. Jackie en bénéficie. Quand JAWS croise votre calendrier, Jackie entend "Résumé : Calendrier mensuel avec des liens vers les contributions quotidiennes." Ensuite elle entend le titre, et puis elle entend les en-têtes du tableau, enfin elle peut naviguer dans le calendrier. she can navigate through the calendar.
2. Les utilisateurs d'iCab en bénéficie. iCab peut utiliser des fonctionnalités de lecture vocale propre à Mac OS pour lire les pages Web et il lira le résumé de tous les tableaux où ceux-ci sont définis.

Comment le réaliser : calendar

Dans Movable Type, trouvez le calendrier dans votre gabarit Main Index. (Une fois de plus, cherchez "calendarhead".) Vous verrez une balise <table> comme celle-ci :

<table border="0" cellspacing="4" cellpadding="0">

Changez le pour :

<table border="0" cellspacing="4" cellpadding="0" summary="Calendrier mensuel avec des liens vers les contributions quotidiennes.">

Dans Radio, vous procéderez de la même façon que nous avons fait les jours précédents.

1. Dans Radio, ouvrir l'application Radio. Sur Windows, clic-droit sur l'icône Radio de votre système et choisissez "Ouvrir Radio".
2. Dans le menu "Tools", sélectionnez "Developers", ensuite "Jump..." (Control+J). Rendez vous à "system.verbs.builtins.radio.weblog.drawCalendar" (pas de guillemets).

3. Maintenant dans le menu "Edit", "Find and Replace", "Find..." (Control+F) et trouvez "draw the month and year". Cela devrait afficher et mettre en valeur une ligne comme celle-ci "bundle // draw the month and year". Double-cliquez le triangle pour afficher le code qui devrait ressembler à ceci :

   add ("<table cellspacing=\"0\" border=\"0\" class=\"hCalendarTable\">"); indentLevel++

4. Changez le par :

   add ("<table summary=\"Calendrier mensuel avec des liens vers les contributions quotidiennes.\" cellspacing=\"0\" border=\"0\" class=\"hCalendarTable\">"); indentLevel++

Comment le réaliser : tableaux de mise en page

Si vous utilisez des tableaux pour la mise en page, ajoutez summary="" � chaque tableau. C'est plus facile � faire avec un chercher remplacer. Cherchez ceci :

<table

Et remplacez le par :

<table summary=""