Partage

Synthèse vocale, tableau accessible

Sujet résolu
18 mai 2017 à 10:01:54

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.
Quelqu'un a-t'il des solutions ?  
18 mai 2017 à 13:34:56

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>



Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
18 mai 2017 à 13:45:24

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 :).

18 mai 2017 à 13:58:31

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

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE
18 mai 2017 à 14:20:51

Ça à l'air de fonctionner avec ça merci, as-tu une idée pour le problème de prononciation de la synthèse vocale ?
18 mai 2017 à 15:00:42

non désolé j'ai jamais fait ça ^^

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

Mon portfolio / Nouveau projet -->Expedition wars/  Le CSS ça peut craindre -->Conférence CSS3.CREATE

Synthèse vocale, tableau accessible

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown