Bonjour,

Je travail sur l'accessibilité des tableau HTML pour les malvoyants. Le but est que la synthèse vocale lise correctement le tableau.

Voici ce que j'ai fais :

<table summary="Mobi'Fil : Affluence des appels reçus">
    <caption>Mobi'Fil : Affluence des appels reçus</caption>
    <thead>
    <tr style="font-size: 17px;">
        <th class="cm_alignCenter" style="width: 110px; height: 25px; font-size: 15px;">&nbsp;</th>
        <th id="entete1" style="width: 110px; height: 25px;">Lundi</th>
        <th id="entete2" style="width: 110px; height: 25px;">Mardi</th>
        <th id="entete3" style="width: 110px; height: 25px;">Mercredi</th>
        <th id="entete4" style="width: 110px; height: 25px;">Jeudi</th>
        <th id="entete5" style="width: 110px; height: 25px;">Vendredi</th>
        <th id="entete6" style="width: 110px; height: 25px;">Samedi</th>
    </tr>
    </thead>
    <tfoot></tfoot>
    <tbody>
    <tr>
        <th headers="entete1" class="cm_alignCenter" style="width: 110px; height: 25px; font-size: 15px;"><span>15:00 - 16:00</span></th>
        <td headers="entete2" style="background: #fe0000;">0</td>
        <td headers="entete3" style="background: #fe0000;">0</td>
        <td headers="entete4" style="background: #fe0000;">0</td>
        <td headers="entete5" style="background: #f79647;">1</td>
        <td headers="entete6" style="background: #fe0000;">0</td>
        <td headers="entete7" style="background: #fe0000;">0</td>
    </tr>
    <tr>
        <th headers="entete1" class="cm_alignCenter" style="width: 110px; height: 25px; font-size: 15px;"><span>15:00 - 16:00</span></th>
        <td headers="entete2" style="background: #fe0000;">0</td>
        <td headers="entete3" style="background: #fe0000;">0</td>
        <td headers="entete4" style="background: #fe0000;">0</td>
        <td headers="entete5" style="background: #f79647;">1</td>
        <td headers="entete6" style="background: #f79647;">1</td>
        <td headers="entete7" style="background: #f79647;">1</td>
    </tr> <!-- Il y a encore des lignes après mais c'est toujours la même chose -->
    </tbody>
</table>

• Le premier problème que je rencontre est que l'attribut summary n'est pas supporté en HTML5 et je ne trouve rien qui pourrai le remplacer (le but est que la description du tableau ne soit pas afficher pour les utilisateurs graphique mais que la synthèse vocale lise la description).
• Deuxième problème, je ne sais pas comment m'y prendre pour que la synthèse vocale lise correctement les mots, je pourrais écrire de façon à ce qu'elle les lise correctement mais cela modifierai la façon de lire des utilisateurs graphique. ex Mobi'fil doit se lire Mobifile, je souhaiterai que la synthèse vocale le lise comme cela (et non Mobïafaïle comme elle dit actuellement ^^) mais en l'affichant Mobi'fil sur le site. Je ne trouve pas comment faire.

Salut

Pour commencé, <summary> est parfaitement accepté par HTML5

summary n'est pas un attribut qu'on ajoute dans <table>, il est une balise à lui seul. De plus, il doit être précédé de <details> juste avant.

En gros ça doit donner un truc de ce genre :

<details open>
    <summary>Mobi'Fil : influence des appels reçus</summary>
    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</details>

Non il y avait bien un attribut summary pour la balise <table> https://www.w3schools.com/tags/att_table_summary.asp

Celui-ci servait a décrire le tableau mais n'était pas afficher, justement c'était ce que je recherchait pour les malvoyants.

La balise <summary> dans <details> n'est pas ce que je cherche, je ne veux pas d'un tableau qui "se déplie" a cause de la balise <details>.

Merci de ta réponse :).

essaye de remplacer l'attribut summary par aria-describedby

Du créés un div avec une id et avec l'aria-describedby tu mets l'id de ta div

-
Edité par stefde3 18 mai 2017 à 13:59:36

-
Edité par stefde3 18 mai 2017 à 15:00:53