• L'absence de support des types de media aural (CSS2.0) et speech (CSS2.1 et future 3.0) tant dans les navigateurs graphiques usuels (Internet Explorer, Firefox) que dans les lecteurs d'écran qui leur sont associés empêche de distinguer des valeurs de la propriété display entre l'écran et la voix ;
• Le support défectueux des feuilles de styles screen et de la propriété visibility par Jaws, IBM Home Page Reader et consors agrave les choses, en permettant à une propriété réservée à l'écran de masquer du contenu à la lecture orale d'un document.
• Les nombreuses solutions de contournement à base de positionnement hors de la zone de visualisation (text-indent: -5000px et autre position: absolute) ou de rapetissement extrême (font-size: 0px; et autres line-height) s'avérent toutes également hasardeuses dans telle ou telle scénario utilisateur concret.

En bref, toutes les tentatives actuelles pour masquer du contenu à un navigateur tout en le laissant accessible à un lecteur d'écran relèvent au mieux du bricolage plus ou moins fiable.

Et pourtant, ce serait tellement simple, si les applications vocales implémentaient correctement les types de media CSS. C'est là où le support du media speech par le nouvel Opera 8.0 bêta 2 change la donne, et montre le chemin que doivent suivre ces applications.

Posons concrètement le problème d'un texte supposé n'avoir de sens ou d'utilité que dans les medias vocaux : un lien d'évitement de navigation, par exemple. En supposant que nous voulions masquer ce lien à l'écran, nous commençons par écrire froidement :

<p>Test...
<a href="#" class="hidden">Skip navigation</a>
...End of test.</p>

Avec comme CSS :

.hidden {
display: none;
}

De la sorte, notre lien disparaît... partout. En effet, display, en dépit de son nom, n'est pas une propriété uniquement visuelle, et s'applique indifféremment quelque-soit le media.

Que faire ? Simplement utiliser les descripteurs de media pour distinguer deux modes de display dans nos styles CSS :

@media screen, print, projection, tv {
   .hidden {
   display: none;
   }
}
@media speech {
   .hidden {
	 voice-family: female;
	 cue-before: url(ding.wav);
	 cue-after: url(ding.wav);
   }
}

Que se passe-t-il désormais ?

• Le media speech étant supporté, les propriétés réservées aux medias screen, print, projection, tv ne s'y appliquent pas : le display: none n'agit plus que visuellement ;
• Nous pouvons ajouter à notre lien les propriétés auditives de notre choix : ici, un changement de voix et un signal sonore précédant et suivant l'énoncé de son intitulé.

Faisons le test (utilisez Opera 8.0 bêta) :

(Opera affiche Test... ...End of test et lit: Test... [ding] Skip Navigation [ding] ...End of test).

De la même manière, et sur un sujet peut-être plus sensible, nous pouvons à présent remplacer à l'écran un texte par une image, tout en conservant ce texte pour le rendu oral, en utilisant la classique technique de la FIR :

<p>Test...</p>
<p class="logo">
   <span class="hidden">This is a logo</span>
</p>
<p>...End of test.</p>

Et en CSS :

@media screen, print, projection, tv {
   .hidden {
   display: none;
   }
   .logo {
   background: url("logocliptransparent.png") top left no-repeat;
   height: 100px;
   width: 100px;
   }
}

Faisons le test, toujours dans Opera 8.0 bêta 2 :

(Opera affiche le logo entre les deux lignes de texte, et lit: Test... This is a logo ...End of test).

Sur le même principe que ci-dessus, le display:none ne s'applique qu'à l'écran, laissant le texte accessible à la lecture.

Ne rêvons cependant pas : Jaws, IBM Home Page Reader, WindowsEyes, etc. sont sans doute encore loin, hélas, de se préoccuper des atouts que leur offrirait le support du standard CSS. Tout au plus peut-on espérer que le récent partenariat entre Opera et IBM donne à ce dernier quelques idées ;). D'autre part, que faut-il attendre d'Internet Explorer ? Firefox est sans doute un meilleur candidat...

Mais cette avancée réalisée par Opera montre très concrètement dès aujourd'hui quels bénéfices pourraient en tirer utilisateurs et auteurs. La balle est désormais clairement dans le camp des développeurs de ces applications.

(Note: les exemples données dans cette page ne sont pas correctement restitués dans les navigateurs ne supportant pas le media speech, dont Internet Explorer6.0 et Firefox1.0)