Javascript, display et accessibilité

mistike a écrit :
Je voudrais savoir si les lecteurs vocaux peuvent gérer du javascript

Oui.

mistike a écrit :
ou est-ce qu'ils l'ignorent complètement ?

Non.

Le plus simple serait d'installer JAWS (il y a une version d'essai gratuite), là tu te rendra compte de la façon dont tes pages sont lues.

AMHA le truc c'est de positionner les éléments masqués en absolu en dehors de la page et de ne pas utiliser le display:none (comme dans ce sujet), l'élément sera ainsi accessible aux lecteurs d'écran.

Au clic, on le passe en display:none si nécessaire, on repositionne l'élément en static et on applique l'effet jquery.
Modifié par Patidou (07 Dec 2008 - 11:10)

Patidou a écrit :
AMHA le truc c'est de positionner les éléments masqués en absolu en dehors de la page et de ne pas utiliser le display:none (comme dans ce sujet), l'élément sera ainsi accessible aux lecteurs d'écran.

Au clic, on le passe en display:none si nécessaire, on repositionne l'élément en static et on applique l'effet jquery.

Ah ben oui mais non, justement. Pour moi, le display:none est à éviter lorsque l'on veut remplacer une information par une image (comme un titre). Ce n'est pas mon cas ici.

En fait je me demandais juste comment était rendu ce genre d'effets. Est-ce qu'en arrivant sur le titre cliquable, le lecteur va dire un truc du genre "clique là, je sais pas trop ce que ça va faire mais c'est cliquable", ou quoi... ou est-ce qu'il va juste lire le titre ?

mistike a écrit :


Ah ben oui mais non, justement. Pour moi, le display:none est à éviter lorsque l'on veut remplacer une information par une image (comme un titre). Ce n'est pas mon cas ici.

Je me suis mal exprimé : je parlais de manière générale et je prenais ce cas comme exemple.

mistike a écrit :
En fait je me demandais juste comment était rendu ce genre d'effets. Est-ce qu'en arrivant sur le titre cliquable, le lecteur va dire un truc du genre "clique là, je sais pas trop ce que ça va faire mais c'est cliquable", ou quoi... ou est-ce qu'il va juste lire le titre ?

Il y a un tuto pour un menu accordéon sur alsa, je crois que tu devrais reprendre cette méthode en créant des liens sur les H3 avec un title. Comme ça les personnes naviguant au clavier devraient pouvoir s'y retrouver.

Il y a juste que, perso, je ne ferait pas un hide mais positionnerais les sous-menus hors de la page pour qu'ils soient toujours accessible.

J'espère que je ne dis pas trop de bêtises.
Modifié par Patidou (07 Dec 2008 - 16:08)

Bon le sujet m'intéressait fortement alors j'ai fait un test, qu'en pensez-vous? C'est accessible pour les personnes aveugles? Et les autres?
Modifié par Patidou (07 Dec 2008 - 17:19)

Patidou a écrit :
Bon le sujet m'intéressait fortement alors j'ai fait un test, qu'en pensez-vous? C'est accessible pour les personnes aveugles? Et les autres?

Hello

Pas mal je vais regarder d'un peu plus près. Je vois deux différences principales avec ce que j'ai fait (via JQuery) :

* les blocs cachés sont en display:none ==> c'est voulu, je souhaite qu'ils soient cachés tant que l'utilisateur ne demande pas à ce qu'ils soient montrés, même pour les aveugles. ==> question, sont-ils en mesure de le faire ? (j'ai ajouté en plus des liens pour tout afficher / tout masquer directement)

* mes titres <h3> cliquables ne sont pas assortis d'un lien ==> c'est peut-être là qu'il y aurait un problème ???

Bon du coup pour comparer j'ai mis ma page en ligne . Soyez zentil, c'est pas fini hein

Comme c'est un poil long et que les scripts sont à part, je vous met ici les codes concernés :

HTML ==> c'est la div "details" qui est masquée/affichée par clic sur le <h3> qui précède

<h3 class="toggle">depuis 02/2008 :<span>Projet de migration vers ECC6 Unicode</span></h3>
		<div class="details">
			<p  class="environment">
				7 systèmes concernés en production, bases allant de 800Gb à 3,5Tb.<br />
				Equipe de trois personnes à temps plein, plus intervenants ponctuels selon les besoins.
			</p>
			<ul>
				<li>Upgrade de tous les systèmes R/3 4.6 non unicode vers ECC6 Unicode, avec activation de la compression des données</li>
				<li>Combined Upgrade and Unicode Conversion (CU-UC), downtime-minimized.</li>
				<li>Utilisation de techniques R3load avancées et optimisées (Migration Monitor, split des plus grosses tables, utilisation de serveurs déportés (AS), export/import en parallèle.</li>
				<li>Mise en place des systèmes de test, procédures de migration, documentations, cutover plan détaillé.</li>
				<li>Migrations préalables de DB2 v8 à v9.1</li>
			</ul>
		</div>

CSS (je vous passe les mises en forme pures)

#contenu h3.toggle
{
	cursor: pointer;
	padding-left: 8px;
}

Javascript

$(document).ready(function() 
{
	// When element with class "toggle" is clicked, show or hide the immediately
	// next div with "details" class
    $(".toggle").click(function() 
	{
		if($(this).next('.details').is(':visible'))
		{
			$(this).next('.details').hide();
			$(this).children("img").attr({ src: "/images/plus.png", alt: "+" });
		}
		else
		{
			$(this).next('.details').show();
			$(this).children("img").attr({ src: "/images/minus.png", alt: "-" });
		}
	});
	
	// When link "Afficher les détails" is clicked, show all ".details" divs,
	// and give the the '-' sign to their parent h3.
    $("#toggleAll").children("a:eq(0)").click(function()
    {
    	$('.toggle').next(".details:hidden").show();
		$('.toggle').children("img").attr({ src: "/images/minus.png", alt: "-" });
    });
    // When link "Masquer les détails" is clicked, hide all ".details" divs,
	// and give the the '+' sign to their parent h3.
    $("#toggleAll").children("a:eq(1)").click(function()
    {
    	$('.toggle').next(".details:visible").hide();
		$('.toggle').children("img").attr({ src: "/images/plus.png", alt: "+" });
    });

    
	// At page load, append the default image '+' to each element with class
	// "toggle", then hide all the "details" divs (i.e hidden by default)
	$(".toggle").prepend("<img src='/images/plus.png' alt='+' />");
	// All divs with class "details" are hidden at page load (i.e. by default)
	$(".toggle").next('.details').hide();
	
	// Only show div .navHelp and show/hide-all links if Javascript is activated...
	$("#navHelp").show();
	$("#toggleAll").show();
	
});

mistike a écrit :

* les blocs cachés sont en display:none ==> c'est voulu, je souhaite qu'ils soient cachés tant que l'utilisateur ne demande pas à ce qu'ils soient montrés, même pour les aveugles. ==> question, sont-ils en mesure de le faire ? (j'ai ajouté en plus des liens pour tout afficher / tout masquer directement)

Là est le problème : le display:none est inaccessible dans la majorité des cas, le mieux est de ne pas l'utiliser d'autant plus que dans ton cas c'est purement décoratif et ça les personnes aveugles s'en foutent.

Et aussi créer une css print car tout est replié à l'impression également.
Modifié par Patidou (07 Dec 2008 - 17:58)

Patidou a écrit :

...dans ton cas c'est purement décoratif et ça les personnes aveugles s'en foutent.

Hum. Je ne vois pas les choses de cette façon... Je n'ai pas mis ça en place pour des raisons esthétiques, mais à des fins de simplification de la lecture. On a que les informations principales, et si l'on souhaite en savoir plus, on peut. Je trouve la page plus lisible comme ça, pas forcément plus jolie . Ca permet de parcourir les infos plus rapidement (sachant que c'est un CV, et que donc mon "public" est généralement assez pressé, et aime bien avoir une vue d'ensemble pour un premier fitrage.

Peut-être que je suis complètement à côté de la plaque

Pour moi le display:none est inaccessible quand il masque une information qui est par ailleurs convoyée par une image, chose qu'effectivement les aveugles ne peuvent pas voir...

Patidou a écrit :

Et aussi créer une css print car tout est replié à l'impression également. smile

Oui, c'est en cours de développement

mistike a écrit :
Pour moi le display:none est inaccessible quand il masque une information qui est par ailleurs convoyée par une image, chose qu'effectivement les aveugles ne peuvent pas voir...

(j'avais raté cette partie)

Ben à partir du moment où une image* ou un texte est masqué, il est inaccessible.

*qui peut avoir une signification grâce à l'attribut alt.

On en arrive à une discussion plus large sur la notion même d'accessibilité...

C'est très très intéressant... mais ça mérite reflexion... je vais y réfléchir et voir jusqu'où ça me mène

Merci Patidou ! Je reviendrai héhé ^^

Je vois que j'ai encore raté le début d'un sujet intéressant.

tout d'abord il est temps d'arrêter les idées reçues sur le support de javascript. Comme ça a vaguement été dit, les lecteurs d'écran habituels (jaws, NVDA, windwos eye, supernova, etc.) s'interfacent avec le navigateur (IE, plus récemment firefox). Par conséquent, le javascript fonctionne de manière habituelle et ils héritent logiquement du moteur adoc.

Deuxième idée reçue : le display:none peut être utile dans certains cas. Typiquement pour représenter une liste arborescente, ou pour justement n'afficher certaines parties d'une longue page que si l'utilisateur l'a demandé.

Notez que les éléments HTML dotés d'un attribut onclick codé en dur (directement dans le HTML donc) peut être reconnu par exemple par jaws. Selon les paramètres par défaut, lorsqu'il en rencontre, il lit le texte de l'élément suivi de la mention "cliquable". En naviguant avec le curseur virtuel, on peut alors "cliquer" sur l'élément avec la touche enter ou le slash du pavé numérique.
Il en va de même pour onmouseover avec la mention "mouseover" et la combinaison Ctrl+Enter ou Shift+Enter (j'ai un doute... je ne l'utilise pratiquement jamais). Ce dernier raccourci est très largement méconnu et relève presque de l'astuce d'expert car en général non fonctionnnel (étant donné qu'on ne contrôle pas la position de la souris par la suite, les menus mouseover se rétractent souvent automatiquement ce qui les fait masquer juste après l'apparition et ce qui les rend donc inutilisables).

Évidemment, ce n'est hélas pas le cas si ce même attribut onclick est assigné dynamiquement par javascript, que ce soit dès le chargement ou plus tard. Dommage ! Mais ce serait difficile à implémenter de toute façon.

Pour compliquer encore les choses, il est des scripts qui ne fonctionnent pas du tout, d'autres qui fonctionnent dans tous les cas et enfin d'autres qui fonctionnent à condition de forcer le rechargement du DOM dans la mémoire du lecteur d'écran après le clic. (Pour jaws, ce rechargement peut être demandé à l'aide de la combinaison Insert+Escape).
Je n'ai malheureusement encore jamais réussi à établir des règles précises qui font que ça marche ou pas, ni l'influence des différentes versions des lecteurs et des navigateurs. IL faudrait que je fasse des tests, si je trouve un moment (ça ça va être plus difficile).

Là où c'est curieux, c'est que des scripts à priori similaires n'ont pas du tout le même effet.
Par exemple j'avais fait un script pour une [url=http://quentinc.net/javascript/script61-menu-arborescent-automatique-avec-des-listes-non-ordonnees-dotees-d'une-classe-specifique/]liste arborescente automatique[/url]. IL n'y a absolument rien dans le code HTML (c'était le but du script) et pourtant si j'ai réussi à faire ce script et que je vous le montre, c'es justement parce qu'il fonctionne parfaitement avec jaws.

Pour les tests mis en lien sur ce topic, verdict rapide :
- Celui de miss tick fonctionne et le alt des images est même mis à jour automatiquement. Je remarque qu'il est très similaire à mon plan de site...
- L'autre avec la page laurem ipsum ne marche pas du tout. J'ai beau cliquer sur les liens, rien ne se passe.

Il faudrait vraiment que je fasse des tests un de ces quatre pour bien voir ce qui marche et ce qui ne marche pas et dans quel cas. Pour le moment, je suis sur IE7 avec jaws 9.0.
Modifié par QuentinC (08 Dec 2008 - 04:38)

a écrit :
J'ai bien essayé Jaws, mais quand on ne le connait pas et qu'on n'a pas l'habitude de ce mode de navigation, et surtout aucune notion de ce que ça peut
être de ne pas voir, c'est pas facile

Pour éviter d'être tenté, éteins ton écran. Mets la voix à une vitesse lente. C'est sûr que c'est une histoire d'habitude que d'être guidé à la voix et ce n'est effectivement pas facile.

P.S. Pardonnez-moi pour les fautes mais je viens de constater avec désarroi que le champ de réponse ne fonctionne plus avec IE6 + jaws 7.10 sur ma vieille machine. Quelque chose a été modifié récemment sur le forum ?