[resolu]Display:none. Comportement attendu avec lecteur vocaux.

Bonjour,

Je viens de lire les différents articles sur le souci de la non-accessibilité du display:none. Mon problème est le suivant, j'ai la forte impression qu'il y a une contradiction entre deux phrases:

citation du billet
remplacement d'image:

a écrit :
Mais l'explication est simple : le comportement prévu de la propriété "display" est de s'appliquer à tous les rendus, aussi bien visuels qu'auditifs ou contextuels.
En clair, "display : none" ne doit pas se limiter aux médias graphiques, mais concerner tous les médias : l'élément ne doit tout simplement pas être pris en compte du tout.

Et de la phrase sur le même thème de Laurent Denis sur Blog & Blues:

a écrit :
Tous les medias non graphiques devraient ignorer la feuille de style et restituer le contenu du span... Mais en réalité, la plupart des lecteurs d'écrans actuels ont un comportement non conforme qui leur fait tenir compte d'une feuille de style destinée à l'écran, et appliquer fréquemment les propriétés display: none aussi bien que visibility: hidden.

Alors si je me trompe pas ...qui dois-je croire ?? les deux sont vrais ??

Merci de m'éclairer,

Edit: je viens de tomber sur ce post mais je ne comprends pas bien
Modifié par Seb1952 (26 Jun 2006 - 11:37)

Les deux affirmations sont vraies :

- display n'est pas réservé au média écran : un élément en "display : none" devrait être ignoré autant à l'écran que dans les autres médias (auditifs, imprimante, etc.)
- les lecteurs d'écran ne devraient pas restituer un élément en "display none" (= en appliquant à la lettre la feuille de style, ils devraient ignorer l'élément)
- tous les lecteurs d'écrans ne se comportent pas comme le voudraient les standards : certains ne prennent pas en compte le display none et restituent l'élément.

Plus de précisions :
http://blog.alsacreations.com/2006/01/29/220-remplacement-dimages-halte-au-display-none

Ben en fait tu me donnes le lien que je cite . Alors l'utilité n'est pas grande !! Je ne comprends toujours pas. Pour moi, il y a une contradiction évidente.

Tu me dis: "display doit s'appliquer à tous les médias", et je lis également:

a écrit :
Mais en réalité, la plupart des lecteurs d'écrans actuels ont un comportement non conforme qui leur fait tenir compte d'une feuille de style destinée à l'écran

.

C'est pas l'inverse cela ??

Heu, les deux passages cités ne signifient-ils pas :
– display: none; devrait pouvoir s'appliquer à tous les médias, pas uniquement au rendu visuel (média écran) ;
– les lecteurs d'écran devraient ignorer les feuilles de style destinées au média écran (media="screen") mais certains ne le font pas… donc un display: none destiné par l'auteur de la feuille de style au seul média écran risque d'être appliqué par les lecteurs d'écran, ce qui neutralise l'utilité du display: none pour masquer visuellement un texte alternatif qui sera rendu par les lecteurs d'écran ou autres navigateurs en mode texte.

Je ne vois pas la contradiction…

Par contre la réponse de Raphaël me laisse perplexe, j'ai l'impression qu'il y a un contresens dedans. J'ai compris quelque chose de travers, ou bien c'est un emmêlage de pinceaux de notre cher standardiste ?

C'est quand même pas franchement clair. Désolé

Seb1952 a écrit :
C'est quand même pas franchement clair.

Ah ?

Est-ce que tu as saisi la nuance à propos de la notion de média ? Parce que sinon, forcément ça n'aide pas.

On peut préciser pour chaque feuille de style à quel type de média elle s'adresse. Les lecteurs d'écran sont censés interpréter display: none; comme « je zappe l'élément » du moment que cette propriété leur est adressée (feuille de style spécifique pour le média « aural » ou feuille de style sans média précisé), et ça tombe bien car ils le font.

Par contre, si tu précises que ta feuille de style s'adresse au média « screen », les lecteurs d'écran devraient ignorer cette feuille de style, et toutes les propriétés qu'y s'y trouvent. Il s'avère que les lecteurs d'écran ne le font pas (ignorer ces feuilles de style dont pourtant on avait précisé qu'elles n'étaient pas pour eux !), et du coup un display: none; que l'on voulait actif uniquement pour le média « screen » sera également actif avec une partie des lecteurs d'écran, ce qui fait bien chier le monde tout de même.

Euh… c'est un peu plus clair, là ?

mpop a écrit :

Par contre, si tu précises que ta feuille de style s'adresse au média « screen », les lecteurs d'écran devraient ignorer cette feuille de style, et toutes les propriétés qu'y s'y trouvent.

mpop a écrit :


Euh… c'est un peu plus clair, là ?

Euh pas vraiment en fait. Si on relit la phrase que j'ai mise en citation en considérant que "screen" veut dire "écran" alors le résultat est carrément surréaliste. On se demande vraiment pourquoi un lecteur de "screen" devrait ignorer un <link> concernant justement ce media.

Que sur le mode lu les propriétés concernées ne puissent être rendues est une autre question et débouche sur une simple tautologie.

Si la propriété ne peut être rendue (marge de 50px à gauche par exemple) alors elle n'est pas rendue.

De ce fait le

display:none;

Pouvant lui être rendu en mode lu alors il est rendu, tout simplement et c'est logique.

La vraie difficulté vient de

visibility:hidden;

Dont on pourrait penser qu'il ne peut être rendu en mode lu (l'élément concerné étant non visible mais bien présent) et qui est mis en équivalent display:none; notamment par jaws. C'est un abus et la panade vient de là. Mais à mon humble avis seulement de là, le reste étant assez logique finalement.

soulignons aussi qu'il est explicitement écrit "devraient" ou "devrait" ...

Merci mpop, en fait c'était bien mon souci je n'avais pas fait attention aux principes de feuilles de style différentes selon le média donc j'étais dans le brouillard.
Modifié par Seb1952 (26 Jun 2006 - 11:36)

clb56 a écrit :
On se demande vraiment pourquoi un lecteur de "screen" devrait ignorer un <link> concernant justement ce media.

Peut-être parce qu'il n'y a pas d'adéquation entre le terme « screen » de media="screen" et le terme « screen » de screen reader ? À vrai dire, on ne devrait pas parler de lecteur d'écran, mais de lecteur de contenu.

clb56 a écrit :
Si la propriété ne peut être rendue (marge de 50px à gauche par exemple) alors elle n'est pas rendue [et si elle peut être rendue alors elle doit l'être].

À quoi servent les médias alors ?
Exemple : je précise display: none pour le menu de navigation de mon site dans la feuille de style destinée à l'impression (média print). Je peux donc m'attendre à ce que mon menu ne soit pas pris en compte à l'impression, mais soit tout de même présent dans mes pages avec un navigateur graphique (media screen) ou un lecteur d'écran (média aural). Je ne vois pas pourquoi je n'aurais pas droit à la même adaptabilité de la mise en forme média par média dans le cas des lecteurs d'écran qui, je le répète, ne sont pas censés s'intéresser au média screen, qu'on les appelle screen readers, brouettes rouillées ou canards boiteux.

C'est pas que je veuille absolument prouver que j'ai raison (ou alors si ?), mais « média screen et screen reader », c'est vraiment un mauvais argument.

mpop a écrit :

Je ne vois pas pourquoi je n'aurais pas droit à la même adaptabilité de la mise en forme média par média

Là dessus on est bien d'accord et on imagine le bénéfice d'une interface répondant au media="aural".
Il se trouve simplement que les lecteurs d'écran ne sont pas ce type d'interface. On peut trouver celà surprenant et regrettable tant ça paraitrait "naturel" mais c'est ainsi, et à tout le moins l'appellation "screen reader" doit nous alerter que l'on n'est peut être pas dans la bonne perspective.

clb56 a écrit :
et à tout le moins l'appellation "screen reader" doit nous alerter que l'on n'est peut être pas dans la bonne perspective

Je continue à affirmer que ça n'a rien à voir. Le terme « screen reader » a été forgé indépendamment des spécificités des CSS, donc le rapport est au mieux ténu, et logiquement inexistant.

Ensuite, que dans la pratique les lecteurs d'écrans ne se contentent pas du média aural mais vont chercher ailleurs, c'est regrettable, car c'est une erreur de conception. Dans le cas des navigateurs, on parle d'insuffisances ou de bugs d'implémentation. Dans le cas des lecteurs d'écrans, on devrait juste dire que c'est « l'état de l'art » qui est ainsi, et que cet état de l'art doit définir ce qu'est un lecteur d'écran et la manière dont les standards doivent être interprétés ?

La question n'est pas de savoir si les lecteurs d'écran se contentent ou pas du media="aural" ils ne l'interprètent tout simplement pas.

Ceci étant posé que ce type d'interface interprète le media screen (dans la mesure où quelque chose peut être rendu des propriétés concernées) ba pourquoi pas. Si le display:none; n'était jamais possible je crois bien qu'ils se trouveraient des circonstances où l'on trouverait qu'il s'agit d'une carence.

Encore une fois la chose vraiment agaçante c'est cette fichue équivalence entre visibility:hidden; et display:none; que donne Jaws. S'il n'y avait pas celà on s'en tirerait plutôt bien en fait.

Tout ceci laisse évidemment en suspend la question de fond. Pourquoi n'y a t'il pas de véritables interfaces de rendu du media="aural" prévu par les css.

Notez bien que jaws n'est pas une synthèse vocale en soi mais une revue d'écran. IL est censé lire du mieux possible ce qui se trouve à l'écran, mais ce n'est pas son seul but : il a aussi pour job de transposer le contenu sur ligne braille si présente, et cela, on le sait moins.

Sinon, à part ça : trouvez-moi un cas où vous auriez besoin de cacher un contenu à l'écran et non à la reproduction vocale ? J'avoue que j'ai du mal de voir où ça peut être intéressant.

QuentinC a écrit :
Sinon, à part ça : trouvez-moi un cas où vous auriez besoin de cacher un contenu à l'écran et non à la reproduction vocale ? J'avoue que j'ai du mal de voir où ça peut être intéressant.

Pour construire les textes alternatifs d'éléments dont l'information est transmise visuellement, via une image. Je ne pense pas aux images de contenu (pour lesquelles il y a l'attribut alt qui remplit tout à fait son rôle), mais plutôt à tout ce qui touche à la mise en forme : pour l'essentiel, des remplacements de titres ou de texte de menus de navigation par des images de fond.

Dans l'idéal, on devrait pouvoir avoir un code du genre, très structuré :

<h1>Mon site</h1>

<h1>Menu de navigation</h1>
	<h2>Première rubrique</h2>
		<ul>
			<li>Premier lien</li>
			<li>Deuxième lien</li>
			<li>Troisième lien</li>
		</ul>
	<h2>Deuxième rubrique</h2>
		<ul>
			<li>Premier lien</li>
			<li>Deuxième lien</li>
		</ul>

<h1>Contenu principal de la page</h1>
… Bla bla tout mon contenu…

Et à partir de là, on cacherait visuellement le deuxième et le troisième h1 (qui transmettent une information de structure qui sera facilement comprise en jetant un coup d'œil à l'organisation dans l'espère du contenu, donc une information qui serait redondante si on avait l'affichage de ces deux titres de section en plus du rendu visuel) via une simple règle display: none à appliquer strictement aux navigateurs graphiques.

Autre chose, le premier h1 pourrait être mis en forme sous la forme d'un en-tête, avec une image de type bandeau via CSS (en image de fond, donc), ce qui demandera de cacher le texte du h1.

Même topo pour les h2 du menu de navigation, que l'on voudra peut-être remplacer visuellement par des images. Et même chose encore, si on le souhaite, pour les éléments du menu.

Ça me semble plutôt raisonable du point de vue de l'accessibilité.
Modifié par mpop (28 Jun 2006 - 23:00)