[Résolu] Agenda accessible

Bonjour,

Je suis en train de mettre en place un agenda accessible, le problème est que je doute un peu de la démarche à suivre.

Voici ce que j'ai actuellement (caption et summary ne sont pas encore implémentés)

<table>
<thead>
<tr>
<th id="hours">Horaires</th>
<th class="days" id="lundi">21 juin 2010<br/>Lun</th>
<th class="days" id="mardi">22 juin 2010<br/>Mar</th>
<th class="days" id="mecredi">23 juin 2010<br/>Mer</th>

<th class="days" id="jeudi">24 juin 2010<br/>Jeu</th>
<th class="days" id="vendredi">25 juin 2010<br/>Ven</th>
</tr>
</thead>
<tr>
<th class="heures" headers="hours" id="h_08:00">08:00</th>
<td headers="lundi h_08:00 h_08:30 h_09:00 h_09:30 h_10:00 h_10:30 h_11:00 h_11:30 h_12:00 h_12:30 h_13:00 h_13:30 h_14:00 h_14:30 h_15:00 h_15:30 h_16:00 h_16:30 h_17:00 h_17:30 h_18:00 h_18:30 " class="free" rowspan="22"></td>
<td headers="mardi h_08:00 h_08:30 h_09:00 h_09:30 " class="free" rowspan="4"></td>
<td headers="mecredi h_08:00 h_08:30 h_09:00 h_09:30 h_10:00 h_10:30 h_11:00 h_11:30 h_12:00 h_12:30 h_13:00 h_13:30 h_14:00 h_14:30 h_15:00 h_15:30 h_16:00 h_16:30 h_17:00 h_17:30 h_18:00 h_18:30 " class="free" rowspan="22"></td>
<td headers="jeudi h_08:00 h_08:30 h_09:00 h_09:30 h_10:00 h_10:30 h_11:00 h_11:30 h_12:00 h_12:30 h_13:00 h_13:30 h_14:00 h_14:30 h_15:00 h_15:30 h_16:00 h_16:30 h_17:00 h_17:30 h_18:00 h_18:30 " class="free" rowspan="22"></td>
<td headers="vendredi h_08:00 h_08:30 h_09:00 h_09:30 h_10:00 h_10:30 h_11:00 h_11:30 h_12:00 h_12:30 h_13:00 h_13:30 h_14:00 h_14:30 h_15:00 h_15:30 h_16:00 h_16:30 h_17:00 h_17:30 h_18:00 h_18:30 " class="free" rowspan="22"></td>
</tr>

<tr>
<th class="heures" headers="hours" id="h_08:30">08:30</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_09:00">09:00</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_09:30">09:30</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_10:00">10:00</th>
<td headers="mardi h_10:00 h_10:30 h_11:00 h_11:30 h_12:00 h_12:30 " class="busy" rowspan="6">Nouvel événement</td>

</tr>
<tr>
<th class="heures" headers="hours" id="h_10:30">10:30</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_11:00">11:00</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_11:30">11:30</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_12:00">12:00</th>
</tr>

<tr>
<th class="heures" headers="hours" id="h_12:30">12:30</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_13:00">13:00</th>
<td headers="mardi h_13:00 h_13:30 h_14:00 " class="free" rowspan="3"></td>
</tr>
<tr>
<th class="heures" headers="hours" id="h_13:30">13:30</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_14:00">14:00</th>
</tr>

<tr>
<th class="heures" headers="hours" id="h_14:30">14:30</th>
<td headers="mardi h_14:30 h_15:00 " class="busy" rowspan="2">Nouvel événement 1</td>
</tr>
<tr>
<th class="heures" headers="hours" id="h_15:00">15:00</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_15:30">15:30</th>
<td headers="mardi h_15:30 h_16:00 h_16:30 h_17:00 h_17:30 " class="busy" rowspan="5">Nouvel événement 2</td>
</tr>
<tr>

<th class="heures" headers="hours" id="h_16:00">16:00</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_16:30">16:30</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_17:00">17:00</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_17:30">17:30</th>
</tr>
<tr>
<th class="heures" headers="hours" id="h_18:00">18:00</th>

<td headers="mardi h_18:00 h_18:30 " class="free" rowspan="2"></td>
</tr>
<tr>
<th class="heures" headers="hours" id="h_18:30">18:30</th>
</tr>
</table>

En gros, j'ai un tableau avec des entêtes correspondant aux jours et des entêtes correspondants aux horaires.

J'effectue un rowspan dès que j'ai un évènement sur la plage horaire qu'il occupe, et je fais de même lorsqu'il n y a pas d'évènements.

Cela vous paraît il correct ? J'ai quelques doutes sur le référencement de tous les headers sur mes plages horaires.

Bien cordialement,
Modifié par Shala (25 Jun 2010 - 16:24)

JE ne mettrais pas de cellules fusionnées là où il n'y a rien. Je mettrais simplement des cellules vides isolées, c'est beaucoup plus simple à comprendre je pense.

Si je navigue sur un jour complètement vide avec un lecteur d'écran, il va me lire lundi 8h 8h30 9h 9h30 10h .... 18h 18h30. Ca ne sert à rien d'énumérer toutes les périodes s'il n'y a rien !
ET pour les endroits où il y a quelque chose, l'idéal serait de pouvoir remplacer l'énonciation des en-têtes de 8h 8h30 9h 9h30 par 8h-9h30, mais là c'est dificilement modifiable.

Pour faire encore mieux, il faudrait à mon avis proposer deux vues : une vue tableau, et une vue liste. La vue liste énumèrerait simplement les plages déjà prises les unes après les autres, p.ex. 8h-9h30 : X, 13-30-16h : Y, 17h-17h30 : Z.

Par contre, je doute d'une chose : tu es sûr que les deux points sont autorisés dans les identifiants ?

Bonjour,

Merci pour la réponse.

Concernant la liste, j'aimerais mieux éviter de refaire le boulot deux fois si je peux atteindre quelque chose d'accessible en tableau.

En fait, dans le premier affichage effectué, les cellules vides n'étaient pas fusionnées. Seulement, je n'arrivais pas à imaginer quelqu'un naviguant au clavier dessus avec une centaine de cellules vides (contre moins de 10 actuellement).

Pour l'énumération des headers bien trop longs, ne pourrais je tout simplement pas spécifier que le header correspondant à l'heure de début et le header de l'heure de fin d'évènement ?

Pour la question des id, ca doit être autorisé, mon code passe au validateur w3c en xhtml strict

Bien cordialement

QuentinC a écrit :
Par contre, je doute d'une chose : tu es sûr que les deux points sont autorisés dans les identifiants ?

Shala a écrit :
Pour la question des id, ca doit être autorisé, mon code passe au validateur w3c en xhtml strict

Je confirme que les deux points sont autorisés (source).

La sécification HTML 4.01 a écrit :
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Shala a écrit :
Pour l'énumération des headers bien trop longs, ne pourrais je tout simplement pas spécifier que le header correspondant à l'heure de début et le header de l'heure de fin d'évènement ?

Malheureusement, si tu ne spécifies que ces deux valeurs-là, la cellule sera considérée comme étant associée à deux en-têtes seulement alors qu'en réalité il y a d'autres en-têtes auxquels elle est également associée. Ainsi, il vaut mieux ne pas fusionner les cellules vides entre elles, comme te le suggère QuentinC. Autrement dit, ne fusionne les cellules que si elles correspondent à une plage horaire « chargée ».

Shala a écrit :
En fait, dans le premier affichage effectué, les cellules vides n'étaient pas fusionnées. Seulement, je n'arrivais pas à imaginer quelqu'un naviguant au clavier dessus avec une centaine de cellules vides (contre moins de 10 actuellement).

N'oublie pas qu'un utilisateur de lecteur d'écran (qui, par nature, navigue au clavier ) a la possibilité de parcourir un tableau de données de façon non linéaire : il peut le parcourir ligne par ligne, par exemple, et il y a fort à parier que, s'il maîtrise bien les raccourcis clavier de son lecteur d'écran, il dénichera l'information peut-être plus rapidement qu'un utilisateur qui peut lire un tableau avec ses yeux.

Shala a écrit :
j'aimerais mieux éviter de refaire le boulot deux fois si je peux atteindre quelque chose d'accessible en tableau

Avec un tableau, on peut faire quelque chose d'accessible, rassure-toi.

Merci beaucoup pour les infos

a écrit :
et il y a fort à parier
que, s'il maîtrise bien les raccourcis clavier de son lecteur d'écran, il dénichera l'information peut-être plus rapidement qu'un utilisateur qui peut
lire un tableau avec ses yeux.

Faut quand même pas exagérer, maurice...

a écrit :
Avec un tableau, on peut faire quelque chose d'accessible, rassure-toi.

Oui bien sûr ! Mon idée de liste n'était qu'une proposition, je ne sous-entendais pas que les tableaux étaient inaccessibles. JE me suis peut-être mal exprimé, si ça a été compris comme ça.