Xhtml1 table caption / position:absolute et IE

Bonjour,

Tentant d'améliorer en terme d'accessibilité un logiciel libre de production de questionnaires/sondages en ligne. J'ai retravaillé les caption des tables.

Ce logiciel utilise un système de template, éventuellement adapté par les utilisateurs. Une classe existe pour masquer certains éléments : hide.

Dont le css (depuis pas mal de temps ) est:

.hide {
  font-weight: normal;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

(je sais, me top est de trop, mais je prend le cas le plus général.

Le HTML de la table est celui-ci:

                
<table class="question subquestions-list questions-list ">
<caption class="hide read">An array with sub-question on each line. The answers are contained in the table header. The last cell are for no answer. </caption>
	<colgroup class="col-responses">
	<col class="col-answers" width="20%">
<col class="odd" width="26.7%">
<col class="even" width="26.7%">
<col class="col-no-answer odd" width="26.7%">
	</colgroup>
	<thead><tr class="dontread">
	<td>&nbsp;</td>
	<th>dsq</th>
	<th>qsdq</th>
	<th>Sans réponse</th>
</tr></thead>
	
<tbody>

	<tr id="javatbd714234X22X382SQ001" class="array2 answers-list radio-list">
	<th class="answertext">
un exemple de sous-question<input name="java714234X22X382SQ001" id="java714234X22X382SQ001" value="" type="hidden">
	</th>
			<td class="answer_cell_00A1 answer-item radio-item">
<label class="hide read" for="answer714234X22X382SQ001-A1">dsq</label>
	<input class="radio" name="714234X22X382SQ001" value="A1" id="answer714234X22X382SQ001-A1" onclick="checkconditions(this.value, this.name, this.type)" type="radio">
	</td>
			<td class="answer_cell_00A2 answer-item radio-item">
<label class="hide read" for="answer714234X22X382SQ001-A2">qsdq</label>
	<input class="radio" name="714234X22X382SQ001" value="A2" id="answer714234X22X382SQ001-A2" onclick="checkconditions(this.value, this.name, this.type)" type="radio">
	</td>
	<td class="answer-item radio-item noanswer-item">
<label class="hide read" for="answer714234X22X382SQ001-">Sans réponse</label>
	<input class="radio" name="714234X22X382SQ001" value="" id="answer714234X22X382SQ001-" checked="checked" onclick="checkconditions(this.value, this.name, this.type)" type="radio">
	</td>
</tr>


	<tr id="javatbd714234X22X382SQ002" class="array1 answers-list radio-list">
	<th class="answertext">
Nouvelle option pour la réponse<input name="java714234X22X382SQ002" id="java714234X22X382SQ002" value="" type="hidden">
	</th>
			<td class="answer_cell_00A1 answer-item radio-item">
<label class="hide read" for="answer714234X22X382SQ002-A1">dsq</label>
	<input class="radio" name="714234X22X382SQ002" value="A1" id="answer714234X22X382SQ002-A1" onclick="checkconditions(this.value, this.name, this.type)" type="radio">
	</td>
			<td class="answer_cell_00A2 answer-item radio-item">
<label class="hide read" for="answer714234X22X382SQ002-A2">qsdq</label>
	<input class="radio" name="714234X22X382SQ002" value="A2" id="answer714234X22X382SQ002-A2" onclick="checkconditions(this.value, this.name, this.type)" type="radio">
	</td>
	<td class="answer-item radio-item noanswer-item">
<label class="hide read" for="answer714234X22X382SQ002-">Sans réponse</label>
	<input class="radio" name="714234X22X382SQ002" value="" id="answer714234X22X382SQ002-" checked="checked" onclick="checkconditions(this.value, this.name, this.type)" type="radio">
	</td>
</tr>
</tbody>
</table>

            

Rien à signaler sur FF (et sans doute les autres naivateurs respectueux).
Rien à signaler sur le validateur w3c (à part un autocomplete="off" en trop )

La page complète est visible ici:
http://205.sondages.pro/survey/index/sid/714234/newtest/Y/lang/fr

Et voila la page sous IE7:


Selon un utilisateur: c'est pareil pour IE10.

Le caption est visible , pourtant en position absolute.

Denis
PS: je sais qu'il existe d'autres problèmes d'accessibilité sur ce logiciel

Hello,

L'information que tu donnes dans ton <caption> semble à première vue relever plus du summary que du véritable caption. La caption d'une table n'est pas censée être une information masquée et uniquement lisible par les lecteurs d'écran, au contraire du summary. Ici, j'ai l'impression que l'indication que tu donnes est expressément dirigée vers les utilisateurs de lecteur d'écran et que pour les autres c'est plutôt évident.

Si tu es d'accord avec ce point, remplace <caption>XXX</caption> par <table summary="XXX"> en supprime le <caption>. Tu n'auras plus aucun problème d'affichage sur aucun navigateur.

Si tu n'es pas d'accord avec ce point, et si tu penses donc que cette information est utile à tout le monde, laisse-la visible. Tu peux éventuellement essayer quelque chose du genre text-indent:-1000000px mais à ce moment-là, préfère summary si ton objectif est vraiment de la masquer.

Salut,

Oui tu as raison, mauvais choix de ma part ici ....

Au passage à l'HTML5, l'attribut summary semble avoir changé : c'était en vue de cette évolution. Mais dans ce cas il existe de meilleur choix ...

Denis

Autant pour moi, je ne savais pas que summary avait été supprimé en HTML5.

w3school a écrit :

The <table> summary attribute is not supported in HTML5.

http://www.w3schools.com/tags/att_table_summary.asp

La spécification HTML5 propose plusieurs alternatives : http://www.w3.org/html/wg/drafts/html/master/tabular-data.html#table-descriptions-techniques
Voir aussi: http://forum.alsacreations.com/topic-6-44765-1-Resolu-Html-5-et-lattribut-summary.html

Je me demande pourquoi ce choix. SI quelqu'un peut m'expliquer ?

Cela dit, il est toujours supporté par les lecteurs d'écran actuels, même en HTML5 (en tout cas sous IE et firefox windows). Ce n'est pas très grave si tu l'utilises quand même, on ne va pas te tuer si la validation W3C plante juste pour un attribut invalide.

Je vais tester si une des plus simples alternatives proposées, aria-describedby, fonctionne. Il me semblais que cet attribut était réservé aux formulaires et aux contenus interactifs, or une table n'est pas vraiment interactive. JE vous tiens au courant.

Rajout: j'ai testé aria-describedby, aria-labelledby et aria-label: aucun ne fonctionne en tant qu'alternative directe à summary, rien n'est énoncé par défaut. Testé avec jaws et NVDA avec IE9 et firefox 22 sous windows 7. Si je rends la table focusable avec tabindex=0, alors j'obtiens directement le label dès la prise de focus, ou bien je peux demander l'aide avec Insert+Tab pour obtenir la description. Or rendre une table focusable n'a bien sûr d'intérêt que si elle entre dans le cadre d'une application concrète ou cela est néecessaire, p.ex. un tableur. Ce qui confirme ce que je pensais: les attributs ARIA sont effectivement réservés aux applications interactives.

Si on réfléchit un peu plus, en fait, cette alternative que la spécification propose est totalement illogique et hors de propos si le but est juste de remplacer summary. ARIA est pour les applications dynamiques, or une table n'est sauf cas très particulier pas dynamique.

Moralité: continuons d'utiliser summary, même si ce n'est plus strictement valide; au moins ça marche.
Modifié par QuentinC (06 Aug 2013 - 14:09)

Salut,

Je pense que en HTML5, il serait aussi bien d'utiliser <detail><summary> a voir en réel.

a écrit :
The <summary> element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any.

http://www.w3.org/wiki/HTML/Elements/summary#Examples

Le conseil qui me semblait le plus simple est bien caption (et puis lecteur braille ou navigateur texte : le navigateur texte à souvent besoin de la même information: ici le caption s'affiche pour lynks, mais pas le attr summary).

Denis
Modifié par Shnoulle (06 Aug 2013 - 14:45)

<summary> et <detail> ne fonctionnent pas pour le moment dans les principaux navigateurs utilisés avec les lecteurs d'écran: IE et firefox.

Je serais aussi d'avis que, pour le moment en tout cas, ne mettre que du texte dans <caption>. Même si HTML5 le permet, les lecteurs d'écran se basent toujours globalement sur la typologie HTML 4 où ce n'est pas permis. Ca pourrait gêner. J'essaierai si ça fonctionne éventuellement plus tard.

Pour summary qui s'affiche pas dans un navigateur texte, c'est normal. L'attribut summary vise expressément les lecteurs d'écran. ET un navigateur texte et un lecteur d'écran, ce n'est pas du tout pareil.