1178 sujets

Accessibilité du Web

Pages :
Bonjour,

J'ai besoin de pouvoir stocker une information dans différents éléments du DOM. Cette information sera utiliser par des fonctions javascript.
Mon soucis c'est d'arriver a stocker ces informations (dans un attribut) sans pour autant qu'elle ne nuise a l'accessibilité.

Comme je sent que je ne suit pas très clair un petit exemple :

<a href="?action=truc" type="div01">injecter un truc dans la div01</a>
<a href="?action=bicule" type="div02">injecter un bidule dans la div02</a>
<a href="?action=bidule" type="div01">injecter un bidule dans la div01</a>
<a href="?action=truc" type="div02">injecter un truc dans la div02</a>

<div id="div01"></div>
<div id="div02"></div>


Ici, j'utilise l'attribut "TYPE" pour spécifier le conteneur dans lequel une fonction javascript va injecter un résultat après avoir cliquer sur tel ou tel lien.

A quoi sert l'attribut "TYPE" ? Ne risque-t-il pas d'être interpréter par certains navigateurs un peu exotique (comme des navigateurs pour non-voyant) ? Il m'a semblé comprendre que c'était un attribut obsolète mais encore toléré dans les dernières DTD XHTML.
De même pour l'attribut "NAME" ?
Ces 2 attributs n'ont réellement aucun poids sémantique ou informatif pour l'utilisateur ? En existe-il d'autre du même genre ?
Modifié par Citron.mecanik (30 Sep 2008 - 22:31)
L'utilisation d'un attribut type sur un élément A est valide en HTML, et le contenu est censé un type MIME (celui du document sur lequel pointe le lien):
http://www.la-grange.net/w3c/html4.01/struct/links.html#edef-A

Dans les attributs généralement utilisés pour placer des infos destinées aux scripts, il y a:
- title (déconseillé pour des raisons d'accessibilité);
- rel (à priori moins problématique).

Sinon la solution est d'externaliser ces informations (sous forme d'un array dans une balise SCRIPT ou un script externe).
Modifié par Florent V. (29 Sep 2008 - 16:35)
Merci Florent pour le lien. Je n'arrivais très bien à saisir a quoi servait "TYPE" sur le document officiel du W3C, mon niveau d'anglais me fait parfois default...

a écrit :
Sinon la solution est d'externaliser ces informations (sous forme d'un array dans une balise SCRIPT ou un script externe).

J'ai trop d'éléments, je voulais justement éviter ça à tout prix.

a écrit :
class est fait pour...

Je redoutais de l'entendre Smiley langue .
En fait mon problème c'est que comme montrer dans l'exemple, j'ai besoin de spécifier l'id du conteneur.
Et ces id peuvent être très variée.
Conjugué au fait que je ne peut pas sacrifié l'attribut CLASS dans cette unique but (pour des raison de présentation biensûr), je vais devoir mettre en place un truc genre :

<!-- "Skin" est ici une classe CSS lambda dont je pourrais avoir besoin dans  certains cas -->
<a href="?action=truc" class="skin target-div01">injecter un truc dans la div01</a>
<a href="?action=bicule" class="skin target-div02">injecter un bidule dans la div02</a>
<a href="?action=bidule" class="skin target-div01">injecter un bidule dans la div01</a>
<a href="?action=truc"  class="skin target-div02">injecter un truc dans la div02</a>

<div id="div01"></div>
<div id="div02"></div>


Puis je parse l'attribut CLASS et si j'y trouve une classe commençant par "target-" je prend la fin du nom de cette classe qui sera l'id de l'element ou je desire injecter mon résultat.
Ma fois, si c'est le plus propre , ben je remonte mes manches .
C'est la solution que je déduit la plus convenable en fonctions de vos conseil.
Si vous voyez plus simple ... jsuis preneur.
Merci.
Modifié par Citron.mecanik (29 Sep 2008 - 18:49)
Hello,
Il y a rel et rev aussi. J'ai jamais vraiment compris mais je n'ai jamais vu non plus un navigateur les utiliser.
Pour info, pour les input qui ne sont pas de type file, il y a accept, si jamais ça peut servir.

Au risque d'interrompre brusquement le sommeil lourd d'un gros troll des montagnes, je pose néanmoins une question fort stupide mais peut-être cruciale : cela pose-t-il réellement un problème si on décidait d'ajouter son propre attribut personnel p.ex. <a href="..." monaction="bidule">.
Je dois sans doute vous surprendre un peu avec cette proposition, mais laissez-moi aller jusqu'au bout, n'arrêtez pas de lire maintenant pour répondre à chaud.
IL va de soi que le validator va répondre « There is no attribute monaction ». Soit... mais :
1 - L'arbre DOM est conservé intact malgré tout. Donc le rendu CSS ne devrait pas changer, et les scripts qui manipulent le DOM devraient fonctionner pareil aussi.
2 - Dans le cas d'une page XHTML, Un parseur XML générique n'y verra que du feu. Donc si quelqu'un ou quelque chose d'autre utilise de manière automatique votre page, il ne devrait pas y avoir de changement notable non plus
3 - A vérifier mais il me semble qu'on puisse accéder à n'importe quel attribut déclaré dans le HTML via javascript, même s'ile n'existe pas au sens strict des normes.

Par principe il vaut toujours mieux respecter scrupuleusement les standards. Mais plutôt que de détourner un attribut existant, ce qui pourrait parfois être problématique dans des cas où personne ne s'y attend vraiment étant donné qu'il est rarement (jamais?) utilisé, ne vaut-il pas mieux créer un nouvel attribut, qui, certes rendra la page invalide au sens strict du W3C, mais qui aura au moins l'avantage de ne poser problème à coup sûr à personne d'autre ?

Sur ce, je file au lit. Je dois vraiment être fatigué pour avoir des réflexions pareilles.
QuentinC a écrit :
Je dois sans doute vous surprendre un peu avec cette proposition, mais laissez-moi aller jusqu'au bout, n'arrêtez pas de lire maintenant pour répondre à chaud.

J'ai failli faire la même proposition. Smiley cligne

Il faut voir ce que ça donne du côté des différentes implémentations de JavaScript.
J'avais vu une page utiliser ce principe pour faire des animations sur certains éléments, on pouvait voir des choses comme <h1 animation="...">...</h1>. Ca datait d'IE5 mais ça ne veut pas dire que c'est révolu.
En ce qui concerne l'attribut REL, il a apparement un usage détourner afin d'éviter le référencement de tel ou tel lien (exemple sur wikipedia , tout les liens externes ont rel="nofollow" afin que les gens n'utilisent pas wikipedia comme un moyen de gagner en référencement pour leur propre site.) plus de details sur cet article.

Ce genre de pratique me fait beaucoup réfléchir ... si les moteurs de recherche se mettent a définir arbitrairement des interprétations spécifique pour ce genre d'attribut, mieux vaut ne pas les utiliser.

La solution d'ajouter un attribut arbitraire me plait beaucoup !
Car effectivement, il parait plus logique de créer son propre outils plutôt que de détourner l'utilisation d'un déjà existant. Au passage je trouve dommage que les DTD ne tolèrent pas cela.

Mais du coup, j'ai un peu peur du résultat . Un code non-valide a cause d'un attribut inconnu de la DTD risquerai peut être de faire passé le navigateur en quirkmode ou autre truc du style. Smiley ohwell

L'idée est bonne , mais un peu trop instable ... Je pense que je vais rester sur cette bidouille avec l'attribut class.
Merci encore pour vos reflexions.
Modifié par Citron.mecanik (30 Sep 2008 - 20:28)
Citron.mecanik a écrit :
Au passage je trouve dommage que les DTD ne tolèrent pas cela.

Ben faut faire du XML, dans ce cas. Smiley cligne

Citron.mecanik a écrit :
Un code non-valide a cause d'un attribut inconnu de la DTD risquerai peut être de faire passé le navigateur en quirkmode ou autre truc du style.

Non.
Le pire que tu puisses avoir, c'est un attribut totalement ignoré par le navigateur.
a écrit :
Non.
Le pire que tu puisses avoir, c'est un attribut totalement ignoré par le navigateur.


A oué ? pas de risque d'interprétation foireuse si le code HTML comporte des attributs non-identifié ?
a écrit :
Le pire que tu puisses avoir, c'est un attribut totalement ignoré par le navigateur.

Je confirme. De toute manière, je n'aurais jamais osé faire cette proposition si je savais que ce genre d'ajout provoquait des comportements indésirables. A ma connaissance, aucun navigateur n'examine aussi précisément le code pour déterminer s'il doit activer des modes standard ou non. D'ailleurs je ne n'en vois pas vraiment l'intérêt.
Smiley lol Bon bah, le message n'est pas passé, apparemment Smiley lol

On refait :

l'attribut class est celui qui a été conçu pour gérer des métadonnées destinées à des traitements javascript. Il n'y a aucun besoin de détourner quelque autre attribut que ce soit, ni de créer son petit Web personnel. Il est d'ailleurs tellement évident que Citron.mecanik a tout de suite trouvé comment on faisait.

Autre chose: pour faire un coup de force de ce type avec les moyens de l'assumer, il vaut mieux s'appeler Google, Microsoft ou Mozilla. Là, on peut reconduire les bonnes vieilles pratiques des années héroïques.

Pour l'attribut "maison", rapidement :
* tout va effectivement très bien à première et courte vue dans un horizon limité (MON site, MA problématique, MON script, AUJOURD'HUI, dans les contextes d'utilisation et de production QUE JE CONNAIS, etc.)
* ça le fait beaucoup moins bien dés qu'on en sort. Surtout que si JE le fait, bah... tout le monde le fait aussi, de tous les côtés : producteurs de contenus, agents utilisateurs, services, applications en ligne, etc. Sympa, mais foutoir imprévisible où je devrai assumer des risques dont je tiens absolument à me passer.

Un exemple simple et immédiat: je fais quoi avec mon attribut maison le jour où, par ailleurs, je passe de mes bricolage PHP à un CMS conforme ? Ou même pas conforme, mais ambitionnant de faire du (X)HTML ? J'ai vu passer le problème récemment pour un grand compte. ça s'est résolu, bien-sûr, ça se résout toujours. Mais ça a coûté du développement. Je n'aime pas les coûts issus de décisions à courte vue.

Bref, c'est une option, l'attribut maison. Un choix possible tant qu'on sait qu'on se cantonne à un horizon donné et qu'on se donne, du coup, de fortes contraintes potentielles pour changer d'horizon.

D'ailleurs, ça se fait plus souvent qu'on ne croit. Diverses solutions de publication ont leurs attributs maisons. Généralement, ça s'avère... Devinez ? Coûteux à un moment donné. Un autre exemple: il était une fois une solution de publication qui voulait obtenir un label d'accessibilité...

Bref, si vous tenez tant que cela à vous assoir sur tous les acquis de base de la normalisation et à rester dans la technique quotidienne (ça marche"), pourquoi pas... Mais il faut savoir que les enjeux importants ne sont pas techniques Smiley cligne
Modifié par Laurent Denis (01 Oct 2008 - 08:11)
J'ajoute une remarque sur le fond: il ne faut jamais confier les choix technologiques aux développeurs (ni les choix graphiques aux designers, etc.) Smiley rolleyes
a écrit :
l'attribut class est celui qui a été conçu pour gérer des métadonnées destinées à des traitements javascript. Il n'y a aucun besoin de détourner quelque autre attribut que ce soit, ni de créer son petit Web personnel. Il est d'ailleurs tellement évident que Citron.mecanik a tout de suite trouvé comment on faisait.

Oui, mais l'attribut class a des limites : l'espace a une signification, on ne peut pas utiliser de tirets, etc. Ca peut potentiellement être dangereux si on utilise pas des caractères autorisés dans des noms de classe CSS.
Adapter une information pour que ça passe avec les contraintes de cet attribut, désolé mais j'appelle ça un peu de la magouille. Et qui connaît exactement les influences que ça peut avoir sur les CSS ?

Ici heureusement, c'est une information courte donc on peut le faire facilement.
Je répète à tout hasard qu'un élément SCRIPT, c'est pas la mort non plus.
<!-- La la la mon contenu -->

<ul id="machin">
	<li><a href="ga.php">Ga</a></li>
	<li><a href="bu.php">Bu</a></li>
	<li><a href="zo.php">Zo</a></li>
	<li><a href="meu.php">Meu</a></li>
</ul>
<script type="text/javascript">
var gabuzomeu = ["div01", "div02", "div03", "div04"]
j_instancie_ma_fonction("machin", gabuzomeu);
</script>

<!-- Et mon contenu continue... -->
QuentinC a écrit :
on ne peut pas utiliser de tirets


C'est un détail mais, si, on peut.

QuentinC a écrit :

Adapter une information pour que ça passe avec les contraintes de cet attribut, désolé mais j'appelle ça un peu de la magouille.


La "magouille" consiste au contraire à inventer ou détourner un attribut.

"Adapter une information" ? Je ne comprends pas le sens de cette remarque : il n'y a aucun problème sémantique (ou autre) à opter pour une convention de nommage interne dans le cadre de classes nécessaires à des scripts.

QuentinC a écrit :

Et qui connaît exactement les influences que ça peut avoir sur les CSS ?


On peut craindre peut-être un effet induit de la crise des subprimes sur les mécanismes de base d'HTML. On ne sait jamais, en ces temps d'incertitudes.

Soyons sérieux, svp.
Modifié par Laurent Denis (01 Oct 2008 - 14:36)
a écrit :
La "magouille" consiste au contraire à inventer ou détourner un attribut.

Se servir de classes CSS réservées pour js et qui n'existent pas réellement dans la feuille de style, ce n'est pas une sorte de détournement quelque part ?
Salut,
QuentinC a écrit :

Se servir de classes CSS réservées pour js et qui n'existent pas réellement dans la feuille de style, ce n'est pas une sorte de détournement quelque part ?

Justement, les classes n'ont rien de spécifiques aux CSS, rien de tel n'est mentionné dans les spec. C'est juste une utilisation possible.

Extrait des spec. html 4 (en)
a écrit :

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:
- As a style sheet selector (when an author wishes to assign style information to a set of elements).
- For general purpose processing by user agents.


Je crois même me rappeler que tu utilises les classes dans ton validateur de formulaires, afin de préciser le type de donnée attendu à la saisie.

Donc non, pas de détournement là-dedans, au contraire Smiley cligne

Pour revenir à la question, je plussoie Florent pour l'utilisation de script, plus souple dans ce cas précis et plus modulable si le fonctionnement venait à s'étoffer.

Et si je pousse encore la réflexion, je me dis que l'action du lien est d'exécuter cette action coté serveur si javascript est désactivé, donc je mets le div cible dans l'url.
Si JS actif, j'ai une classe générique "injector" sur mes liens (une information générique de comportement) qui me permet d'ajouter la surcouche javascript, et lors de l'exécution du listener, je parse l'url href...
Mais peut-être que je m'égare Smiley cligne
Pages :