1178 sujets

Accessibilité du Web

Recherche d'un plugin (jquery) de visualisation de données

Bonjour à tous,

Je suis à recherche de retours d'expériences et conseils sur le choix d'un plugin jquery (de préférence car déjà utilisé sur le site concerné) de virtualisation de données (bar, pie...) à partir d'un tableau HTML bien formé.

J'ai vu que certains utilisent canvas dont je ne connais quasi rien et m'interroge sur l'accessibilité de tels procédés. Dans mes recherche j'ai pointé visualize mais le site est actuellement tombé.

L’accessibilité est une donnée forte (site public) dans ce micro-projet (2-3 pages pour commencer), mon but est de le généraliser et l'automatiser pour l'affichage de données quand c'est utile.
Modifié par Igor (24 Mar 2011 - 16:37)
Administrateur
Hello,

visu pas virtu Smiley cligne
en cherchant l'URL que tu indiques dans Google, on arrive à la page dans leur cache et à une démo.

canvas n'est aujourd'hui pas du tout accessible et en voyant le code ci-dessus : 3 listes pour les étiquettes des axes des abscisses et ordonnées et les "clés" ('fin légende) avec un canvas, de toute façon ...

Pour les non-voyants, je pense que le plus accessible sera ... le tableau ! Un tri qui soit accessible sur chaque colonne devrait aider ? (si le tableau est long, permet de savoir quelle est la plus grande valeur, enfin ça dépend de ce que contient le tableau)
C'est pas visuel pour les adorateurs des 3D Bar charts en Comic Sans MS dans Powerpoint ( Smiley flamethrower ) mais avec th, caption, summary, thead/tfoot, colgroup et id/headers c'est hautement accessible !

Sinon il y a SVG qui a des éléments d'accessibilté mais je connais rien au sujet ... Et encore moins quel support ça peut avoir dans les lecteurs d'écran (comme SVG et les anciens IE faisaient 2, JAWS devrait pas avoir un très bon support ou alors récent - pure hypothèse).
Par contre SVG est fait pour être zoomé par des loupes d'écran (sauf bien entendu pour les bitmaps si on en insère dans les fichiers) Smiley smile
Merci de tes éclaircissements.

Je suis d'accord avec toi le plus accessible sera un tableau bien fait qui sera de toute façon présent Smiley cligne
Administrateur
J'ai trouvé jQuery Charts qui utilise comme données de départ une table de données. Le lien vers la doc mène à une page vide de documentation (super), en fait tout est en bas de la démo.
Pour ne pas masquer la table, ce serait showoriginal: true

Sinon des plugins comme jqPlot ou RaphaëlJS nécessitent un premier script qui parcourt le tableau HTML pour remplir un tableau JS avec les valeurs et étiquettes d'axes avant d'afficher le graphique de son choix.
Administrateur
Un peu de fun (ou de gore ?) en stylant directement la table Smiley lol
Ça fonctionne en tout cas (testé avec IE6/7, Chromium et Fx3.6+) :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
table { border-collapse: collapse; -moz-box-shadow: 0.6em 0.6em #CCC; -webkit-box-shadow: 0.6em 0.6em #CCC; }
th,td { border: 1px dotted #888; padding: 4px 8px; text-align: center; }
th { border-style: solid; background-color: beige; }

table {	position: relative; table-layout: fixed; width: 1000px; height: 500px;}
div {	position: relative; }
.val {
	position: absolute;
}
</style>
<title>Expérimentation - Une table stylée directement comme un graphique - v0.01 par @PhilippeVay</title>
</head>
<body>
	<h1>Expérimentation - Une table stylée directement comme un graphique <br />v0.01 par @philippevay</h1>
<div>
	<table>
		<thead>
			<tr>
				<th>Nom</th><th>Jan</th><th>Fév</th><th>Mar</th><th>Avr</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Annie</th><td>5</td><td>3</td><td>6</td><td>8</td>
			</tr>
			<tr>
				<th>Barjabulle</th><td>6</td><td>4</td><td>1</td><td>2</td>
			</tr>
			<tr>
				<th>Coltar</th><td>2</td><td>5</td><td>4</td><td>5</td>
			</tr>
		</tbody>
	</table>
</div>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript">
$('table tbody td:not(:first-child)').wrapInner('<span class="val"></span>');
var c = 0;
$('table tbody td:not(:first-child) span').each(function() {
	var serie = 60*$(this).parent().parent().index()
	var w = 10 + 200*$(this).parent().index();
	var h = 50*$(this).text();
	//console.log('(' + serie + ' + ' + w + ')=\t' + (serie+w) + ' # ' + h);
	$(this).css({	left: serie + w + 'px',
					width: '60px',
					bottom: 0,
					borderBottom: (h-30) + 'px solid rgb(' + (255*(serie==0)) + ', ' + (128*(serie==60)) + ', ' + (255*(serie==120)) + ')'
	});

// TODO : cloner les étiquettes gauche et les placer sous chaque série
$('table tbody th').wrapInner('<strike></strike>');
});
	</script>
</body>
</html>

Modifié par Felipe (19 Mar 2011 - 12:57)
Felipe a écrit :
Un peu de fun (ou de gore ?) en stylant directement la table Smiley lol
Ça fonctionne en tout cas (testé avec IE6/7, Chromium et Fx3.6+) :


Pas mal Smiley lol

Tu me fais les camemberts Smiley cligne
Canvas n'est évidemment pas accessible et ne peut pas l'être. Jamais. C'est techniquement impossible. Au mieux on peut peut-être mettre une sorte d'alt, mais sinon ça ne peut se comporter que comme une image.
Sujet clos
Aller à