1178 sujets

Accessibilité du Web

Texte invisible mais pas inaudible

Pages :
Bonjour

Ce post fait suite à la clôture de celui (texte invisible) de antx qui cherchait pour de mauvaises raisons à rendre un texte invisible.
C'est une question pas si simple à résoudre : on peut en effet imaginer une structuration de document qui annonce à l'audition, par un balisage spécifique du genre <h1 class="invisible">, un certain nombre d'informations que l'oeil analyse sans y réfléchir mais que l'oreille ne comprend pas si facilement. Par exemple annoncer de façon invisible mais pas inaudible comment sont structurées les pages (où sont les outils, où est le contenu, etc.) est une alternative à la charte graphique qui donne immédiatement parce que visuellement ce genre d'infos. J'ai fait récemment le test d'"écouter" une page et c'est très déroutant parce que la voix commence à annoncer un tas d'infos à partir desquelles on doit se construire mentalement une "image sonore" de la page le plus vite possible... J'ai ensuite installé des balises invisibles mais audibles et je vous assure que le confort est incomparable dès qu'on arrive à construire rapidement cette image mentale.
Les fonctions speech de CSS3 ne régleront pas cette question à mon avis, elles ne feront que dupliquer en sonore des pages structurellement pensées pour être vues.
Donc ma question est de savoir quelles sont les contre-indications d'une telle pratique comparées à ses avantages.
Vous en pensez quoi ?
Administrateur
mpop a écrit :
Qu'entends-tu exactement par « des balises invisibles mais audibles » ?

Je pense : "non présent dans le media screen, mais présent dans le média speech".
Arsene a écrit :

C'est une question pas si simple à résoudre : on peut en effet imaginer une structuration de document qui annonce à l'audition, par un balisage spécifique du genre <h1 class="invisible">, un certain nombre d'informations que l'oeil analyse sans y réfléchir mais que l'oreille ne comprend pas si facilement. Par exemple annoncer de façon invisible mais pas inaudible comment sont structurées les pages (où sont les outils, où est le contenu, etc.) est une alternative à la charte graphique qui donne immédiatement parce que visuellement ce genre d'infos.


Et pourquoi ne pas expliquer tout cela sur la page dédiée à l'accessibilité, c'est fait pour. Personnellement je pousse même le truc jusqu'à expliquer quelles couleurs j'ai utilisées, la disposition des pages etc.
Non, comme dit le média speech risque de n'être qu'une décalque "auditive" d'un contenu préalablement conçu comme "à visualiser". Il s'agit plutôt d'une assistance vocale permettant de créer des conditions de bonne compréhension de l'organisation du contenu.
Un exemple :


<h1 style="invisible"> cette page est organisée en 2 parties</h1>
<h2 style="invisible"> 1. menu de navigation, 2. contenu de la page</h2>

<h2> Menu de navigation</h2>
<ul><li>.........</li></ul>

<h2 style="invisible">Vous arrivez à 2, le contenu de la page</h2>

<h1> Titre de la page</h1>
<h2> Soustitre</h2>
<p>Texte</p>


Cette page présenterait graphiquement un menu titré "Menu de navigation" suivi de la liste, puis le contenu proprement dit avec sa hiérarchie <hn>, <p>, etc. A CSS de disposer ceci sur l'écran de façon à ce que le visiteur comprenne immédiatement qu'il y a deux objets distincts : un menu et un texte.

En revanche, une lecture auditive donnerait :
a écrit :

cette page est organisée en 2 parties 1. menu de navigation, 2. contenu de la page

Menu de navigation (puis les items du menu dans l'ordre)

Vous arrivez à 2, le contenu de la page

Titre de la page Soustitre Texte


Cette utilisation particulière de balises "invisibles mais audibles" me paraît une piste intéressante à suivre en ce qu'elle permet des restitutions différenciées selon le mode de consultation... elle offre la perception immédiate de l'image mentale du site aux "voyants"de façon classique par sa charte graphique et sa mise en page (couleurs, typos, disposition, etc.) et aux "non-voyants" par un équivalent vocal qui décrit où se placent et comment s'organisent les éléments.

En gros l'idée est de faciliter l'appréhension globale du contenu à quelqu'un qui ne peut pas l'appréhender d'un seul coup d'oeil... pour comprendre, imaginez ouvrir un site de 10000px de large en corps 100em : vous seriez incapables de comprendre immédiatement où se situent les menus, les infos, les textes divers, etc... sans le scroller entièrement et sans vous rappeler où se trouve ceci ou cela. Eh bien la lecture d'une page, ça peut ressembler à ça ! Smiley bawling
@ Stéphane : désolé j'étais persuadé être dans la rubrique Accessibilité du web et handicaps Smiley lol
@Arsene

Je pense que Stephane veut parler de la page "accessibilité" de ton site, et non de la rubrique du forum ...

Smiley cligne
Modifié par Vero (04 Apr 2006 - 13:23)
Oups j'avais pas percuté... ben en fait non, ça servirait à rien puisqu'a priori le visiteur est passé par la page d'accueil et donc il a déjà compris, non ?
Merci véro pour avoir explicité ma pensée.
Arsène : On préconise de placer le lien vers la page accessibilité au tout début du code pour que, justement la personne qui a besoin d'info supplémentaires pour apréhender le site, trouve ces infos tout de suite.
Le lien doit être présent sur toutes les pages car la page d'accueil est loin d'être la seule porte d'entrée d'un site. Une recherche via Google t'envoie plus souvent vers les pages internes d'un site plutot que vers la page d'accueil.
Mais ça on le sait déjà... Ton lien "accessibilité" se trouvant à l'intérieur du contenu et en faisant pleinement partie n'exclut pas qu'un système alternatif extérieur puisse être développé ? L'un n'exclut pas l'autre. Un genre de métastructuration, si j'ose dire. Ou alors une "charte sonore" ? De la même façon qu'une balise <alt> propose une alternative à l'image, je pense qu'on peut imaginer une alternative auditive aux informations implicitement données par l'aspect graphique quand celui-ci est absent ou désactivé.

Qu'est-ce qui fait que lorsqu'on ouvre une page on sait de suite que tel objet est un menu, tel autre un texte, tel autre l'entete, et tel autre ceci ou cela ? c'est l'interface graphique, c'est-à-dire le positionnement et l'aspect d'objets que tu appréhendes d'un coup, tous ensemble, et par lesquels tu te crées une image mentale du site et de sa structuration. C'est pas pour rien qu'une des recommandations est de toujours positionner certains éléments au même endroit et selon le même aspect : c'est pour ne pas perturber cette image du site que tu te forges dès l'accueil. Or si cette image se crée instantanément en mode graphique, elle est très lourde à créer en mode auditif, pour ne pas dire extrêmement pénible. C'est du moins l'expérience que j'ai faite.

Je souhaiterais que des Alsanautes ayant des problèmes de lecture visuelle et lui préférant une "lecture vocale" nous fassent part de leurs points de vue.
Bonjour,

As tu essayer d'écouter le rendu avec une synthèse vocale.

As tu demandé à des utilisateurs, pensent ils que cela peux s'avérer utile.

Si une personne décide de naviguer de titre en titre est ce que cela ne risque pas de surcharger inutilement et rendre la navigation justement moins aisée.

Quelle méthode serait utilisée pour rendre invisible ces balises?

display:none
visibility:hidden

On sait qu'elles ne sont pas réstituée pareil selon le logiciel utilisé.

Remplacement d'images : halte au display none !

Je suppose (fait chier ces lacunes de l'expérience utilisateur) qu'une personne malvoyante qui utilise une synthèse vocale et qui à tout de même un suivis graphique entendras des liens qu'elle ne voit pas.

Est ce que cela ne rendra pas la navigation plus difficile?

Il y as déjà fort longtemps j'avais pensé à décrire textuellement sur ma page d'accessibilité la position graphique des différents blocs sur les pages.

A cette époque Laurent Denis m'avait mis en garde sur le fait que si une page d'accessibilité devenait un manuel complet d'utilisation du site il y avait de forte chance que la moitié des choses ne soient pas retenue et que l'objectif visé jamais atteinds au contraire.


EDIT

Y'as eu croisement de post Smiley smile .

Admettons que l'on mette en place une page descriptif en plus de la page d'accessibilité.

Il faudrait donc lire 2 pages et les mémoriser avant de pouvoir atteindre un début d'information concernant le sujet recherché.
Modifié par knarf (04 Apr 2006 - 17:25)
Arsene a écrit :

Qu'est-ce qui fait que lorsqu'on ouvre une page on sait de suite que tel objet est un menu, tel autre un texte, tel autre l'entete, et tel autre ceci ou cela ? c'est l'interface graphique, c'est-à-dire le positionnement et l'aspect d'objets que tu appréhendes d'un coup, tous ensemble, et par lesquels tu te crées une image mentale du site et de sa structuration.


Je ne suis pas tout à fait d'accord. L'utilisation d'un balisage respectant la sémantique le permet aussi ...

Il est possible de naviguer de titre en titre, par exemple. Ce que beaucoup d'utilisateurs de lecteurs vocaux font.

Mais la discussion est, néanmoins, très intéressante !

Pour ceux qui ne le connaissent pas :
Perception de la structure d'une page Web par un handicapé visuel, tentative d'explication
Merci vero Smiley cligne j'avais pas retrouvé le lien sur le coup.

C'est suite à ce billet que j'avais pensé à cette page de description de la structure graphique du site.
Modifié par knarf (04 Apr 2006 - 17:07)
Merci Véro, lien effectivement très intéressant et qui aborde la même question sous un angle très riche, et comme d'hab Laurent est à la pointe (au fait on le voit plus beaucoup sur Alsa ces temps-ci...).
Le post de Alain Brugières
a écrit :

Les capacites d'attention ainsi mobilisées le sont au détriment d'une réflexion sur le fond. En somme, l'accessibilité 'auditive' serait un bon critère de clarté de la présentation...

résume assez bien l'enjeu.

Cette idée de déperdition d'énergie à comprendre et mémoriser une structuration de page est effectivement un vrai souci. La solution de Laurent de recourir aux tableaux vaut ce qu'elle vaut (je suis pas trop chaud) mais n'y aurait-il pas une réflexion à mener sur d'autres pistes ? C'est dans cette idée que j'ai lancé ce post.
En tout cas cette idée d' "image mentale de la topographie d'une page" exposée par Laurent est primordiale. Au risque de me répéter, puisqu'elle est générée par la charte graphique, elle ne l'est logiquement pas en son absence.

Quant à la remarque de Véro
a écrit :

L'utilisation d'un balisage respectant la sémantique le permet aussi

je ne crois pas, parce que le balisage sémantique est par définition (ou devrait être) porteur de sens, et à vouloir aussi lui faire porter de l'aspect on revient en arrière Smiley eek
Bonjour,

a écrit :

Qu'est-ce qui fait que lorsqu'on ouvre une page on sait de suite que tel objet est un menu, tel autre un texte, tel autre l'entete, et tel autre ceci ou
cela ?

Si la page est correctement balisée, et si tu possèdes une synthèse vocale civilisée, elle est censée l'annoncer, ça.

Pour ton idée, je pense que c'est de la surcharge inutile. AVec l'habitude, on se forge relativement rapidement une "image mentale" du site, même si évidemment, on ne bat de loin pas le record de vitesse du mode visuel.
C'est peut-être une question d'habitude, oui, c'est possible.

La question de la surcharge ne devrait pas entrer en ligne de compte si ça apporte un vrai plus utilisateur (après tout les éléments graphiques aussi, c'est pas une raison pour s'en passer Smiley biggol et c'est pas trois lignes de code de 0,5 ko qui vont assassiner le processeur) mais si ça n'apporte rien autant l'oublier, effectivement.
Arsene a écrit :

je ne crois pas, parce que le balisage sémantique est par définition (ou devrait être) porteur de sens, et à vouloir aussi lui faire porter de l'aspect on revient en arrière Smiley eek


Quentin a écrit :

Si la page est correctement balisée, et si tu possèdes une synthèse vocale civilisée, elle est censée l'annoncer, ça.


Et bien, justement, un bon balisage permet un bon repérage dans la page, lequel se suffit à lui-même.

Sur le plan visuel, nous reconnaissons un titre parce qu'il est écrit en plus gros ou mise en valeur d'une manière quelconque, alors qu'un lecteur vocal va tout simplement repérer une balise hn ...

C'est fait pour, d'ailleurs, peut-être ...

Smiley lol

<edit>

A relire : POurquoi respecter la semantique

D'ailleurs, pourquoi ?

OpenWeb a écrit :

Respecter la sémantique des balises, donc encadrer un contenu avec la balise adéquate, permet tout d'abord de structurer le document correctement, indépendamment de la forme qu'il va prendre. Ceci permet aux programmes qui traiteront l'information contenue dans la page, de l'interpréter correctement, et donc de l'utiliser comme il se doit.


Nul besoin de décrire le rendu visuel de la page, en fait ...
Modifié par Vero (04 Apr 2006 - 19:30)
Arsene a écrit :
C'est peut-être une question d'habitude, oui, c'est possible.

Ce n'est pas seulement "possible", c'est sûr !
Je suis un utilisateur quotidien de jaws depuis maintenant 3 ans, et je peux t'assurer qu'au début, c'était vraiment pas facile. Maintenant, c'est devenu naturel, et je trouve presque aussi vite l'information, tant que la page n'est pas trop polluée.


Arsene a écrit :

La question de la surcharge ne devrait pas entrer en ligne de compte si ça apporte un vrai plus utilisateur (après tout les éléments graphiques aussi, c'est pas une raison pour s'en passer Smiley biggol et c'est pas trois lignes de code de 0,5 ko qui vont assassiner le processeur) mais si ça n'apporte rien autant l'oublier, effectivement.


0,5 Ko certes non, mais 30 secondes de texte inutile, ouii, ça peut faire fuir.
@ Quentin

a écrit :
30 secondes de texte inutile, ouii, ça peut faire fuir


L'argument qui tue ! Tu as raison, c'est de loin pas négligeable...

@ Véro

a écrit :
Sur le plan visuel, nous reconnaissons un titre parce qu'il est écrit en plus gros ou mise en valeur d'une manière quelconque, alors qu'un lecteur vocal va tout simplement repérer une balise hn ...


Justement, l'idée était de produire un équivalent sonore. Offrir à l'auditeur qui entend un texte "plat" et linéaire (genre Lynx, sans cette mise en forme particulière qu'est la charte graphique qui fait qu'il sait intuitivement où trouver les informations) un système d'appréhension de la structuration générale. Il ne s'agit pas d'une remise en question du balisage sémantique, de son utilité, de son rôle et de son utilisation, mais plutôt de pallier en plus à la difficulté d'appréhender la page dans son ensemble. Mais l'argument de QuentinC sur les 30 secondes inutiles est effectivement un problème important.
Pages :
Sujet clos
Aller à