Tablature accessible ?

Bonjour,

Je suis en train de refondre complètement un de mes sites persos (ben oui, j'ai raté le CSS Summer Refresh 2007...) que j'ai fait dans mes toutes jeunes années d'informatique, avec tout ce qu'il faut de tableaux, de balises "font", et autres horreurs... Bref, aucune sémantique, aucune séparation du contenu et de la forme : le site inaccessible au possible... J'ai juste récemment collé un DotClear pour la gestion des news sur la home, mais c'est l'arbre qui cache la forêt. Si vous voulez voir, c'est par là : http://www.palace.free.fr

Mon but maintenant est de le rendre le plus accessible possible, en plus d'un petit rafraîchissement de design. Je suis quasiment décidé sur le choix du CMS, ce sera CMS Made Simple.

Pour la majeure partie des contenus (news, articles, galerie photos, paroles, etc.), j'ai les idées plutôt claires et je ne vois pas de gros problème en perspective.

Il me reste par contre un problème de taille : les tablatures. Si vous n'êtes pas allé voir le site, il s'agit donc d'un site dédié à un auteur-compositeur, et le site propose des tablatures pour guitares (et c'est la source principale des visites !). Pour l'instant, la mise en page des tablatures est horrible : c'est un tableau à 3 colonnes et une seule ligne, avec le texte de la chanson à gauche, une colonne vide au milieu (!), et les accords à droite. Avec évidemment ce qu'il faut de retours à la ligne ajoutés pour faire correspondre les accords avec la bonne ligne du texte de la chanson. Ne me demandez pas ce qu'il se passe en cas de redimensionnement de la page ou d'augmentation de la taille du texte, svp

Ma question est donc : comment rendre cela accessible ?

J'ai vu sur le web d'autres présentations de tablature : généralement la ligne d'accord est mise juste au-dessus ou au-dessous de la ligne du texte de la chanson correspondante, dans une police à chasse fixe (ce qui permet de mettre chaque accord au niveau du mot qui va bien). Au moins, il n'y a pas de tableau, c'est déjà ça.
Ou bien les tablatures sont proposées en téléchargement dans un format propriétaire (pour être lues dans un logiciel qui fait un rendu graphique très proche des tablatures que l'on trouve dans le commerce).

J'ai beau retourner le problème dans tous les sens, je ne vois de présentation "idéale", qui permettrait une lecture aisée au plus grand nombre, et respecterait les standards.
Faut-il utiliser des listes de définitions (chaque ligne d'accord étant associée à sa ligne de texte) ? Un tableau à 2 colonnes et autant de lignes que de lignes de texte ? Une alternance ligne de texte / ligne d'accord ?

Auriez-vous des idées ou suggestions ? Avez-vous déjà été confronté à un problème similaire (on ne sait jamais !) ?
Je serais particulièrement curieux d'avoir l'avis d'une personne malvoyante et musicienne qui utilise des tablatures sur le web !

Merci d'avance. Dans tous les cas, je vous tiendrai au courant de mon choix final, ça pourra servir à d'autres.

A+ Sébastien.
Modifié par palacemusic (20 Sep 2007 - 13:40)

Bonjour,

Pour amorcer un début de réponse (ça promet!), j'aurais besoin de deux informations:

1. S'agit-il de tablatures à proprement parler (notation musicale complète pour la guitare), ou bien de textes avec indication des accords?

Pour rappel, une tablature ça peut ressembler à ceci:

Ou bien, plus simplement, à ceci:
http://upload.wikimedia.org/wikipedia/fr/e/e1/Tab3.jpg

2. Une tablature accessible, mais accessible à qui? Une tablature est une représentation visuelle: je pense (mais je peux me tromper) qu'il est illusoire de tenter de la rendre lisible par un lecteur d'écran. Par conséquent:
- soit la tablature sera sous la forme d'une image;
- soit la tablature sera sous la forme de texte préformaté (cf. la deuxième image ci-dessus), donc sera un bloc de texte non lisible par un lecteur d'écran, et il faudra fournir un moyen de passer ce bloc de texte (même mécanisme que pour l'art ASCII).

Pour un public aveugle ou malvoyant, la tablature n'est à priori pas exploitable. Il faudra alors peut-être réfléchir, si on veut fournir des contenus exploitable par ce public, à l'enregistrement de contenus pédagogiques en audio: morceau qui défile en sourdine, si besoin à tempo ralenti, et voix au premier plan qui annonce les accords, par exemple. Enfin, j'imagine qu'on doit pouvoir faire quelque chose comme ça, mais de tels contenus pédagogiques adaptés existent sans doute sous une forme ou une autre, il faudrait donc se renseigner sur l'état de l'art.

Mais ça n'est peut-être pas ce que tu avais en tête?

Pour ce qui est des paroles de chanson avec indication des accords, vu qu'il s'agit essentiellement de texte lisible avec des infos périphériques, ça doit être jouable, par contre.

Il me semble qu'il y avait un sujet sur ce point, mais je ne le retrouve plus. En gros, le principe est d'indiquer l'accord juste avant la syllabe correspondante:

(A) C'est beau la vie, (G) c'est beau l'amour.

Et pourquoi pas d'utiliser le positionnement absolu ou autre combine de positionnement CSS pour placer les informations sur l'accord en dessus ou en dessous du texte.

Sinon, il me semble qu'il y a un élément utilisable en XTHML 1.1 qui peut correspondre à ce genre de besoin, mais j'ai oublié (désolé, Laurent, je retrouve plus le sujet...). Si tu retrouves l'info, il faudra voir si c'est une solution exploitable.

Bonjour,

Merci pour ces éléments, Florent. Pour répondre à tes questions :

1- Il s'agit de textes avec indication des accords. Pour avoir une idée, aller par exemple sur cette page.
On peut donc avoir à la fois la représentation d'accords détaillés via des rangées de tirets et de chiffres, avant le texte de la chanson ; et ensuite le texte de la chanson avec les accords génériques (sous forme de lettre majuscule) à droite de chaque ligne de texte.

2- Eh bien justement, c'est LA grande question existentielle que je me pose : est-il illusoire de tenter de rendre une tablature accessible à un lecteur d'écran ? Pour ce qui est de contenu alternatif (fichier audio), je n'aurai pas le temps de créer cela, mais je vais me renseigner quand même sur l'état de l'art.

Pour ce qui est des accords détaillés, le plus simple est donc en effet peut-être de proposer un lien d'évitemment.
Pour les accords génériques liés à chaque ligne de texte de la chanson, ton idée de mettre l'accord au niveau de la syllabe correspondante est un piste très intéressante.

Je vais tâcher de faire quelques prototypes que je soumettrai ici.

A+ Sébastien.

PS : je viens de retrouver ce post : Astuce pour afficher des accords ; c'est sans doute celui dont tu parlais, Florent, non ? Je jette un oeil dessus...

palacemusic a écrit :
1- Il s'agit de textes avec indication des accords. Pour avoir une idée, aller par exemple sur cette page.

Tu as deux choses différentes:
1. une tablature, sous la forme de texte préformaté;
2. des paroles de chanson avec indication des accords.

À noter que seul le (1) est une tablature (pour qu'on soit sûr de parler de la même chose...). La tablature est une représentation visuelle où la progression horizontale représente la progression temporelle et où les notes dépendent de la combinaison corde+chiffre.

palacemusic a écrit :
est-il illusoire de tenter de rendre une tablature accessible à un lecteur d'écran ?

À ma sens, oui, totalement. On se retrouve dans la même situation que pour l'art ASCII. Voir ici pour la marche à suivre:
http://rgaa.referentiels.modernisation.gouv.fr/index.php/front/web/points_de_controle/13_10

palacemusic a écrit :
Pour les accords génériques liés à chaque ligne de texte de la chanson, ton idée de mettre l'accord au niveau de la syllabe correspondante est un piste très intéressante.

Il y a effectivement une piste à creuser ici. Ceci dit, la version actuelle est déjà pas mal, à part UN gros défaut: le tableau à deux cellules. Si je lis linéairement, j'ai d'abord toutes les lignes de texte, puis ensuite toutes les lignes d'accords. Il faudrait que la lecture linéaire soit: ligne de texte, accords, ligne de texte, accords, etc.

Une solution plutôt pas mal serait d'utiliser... un tableau, mais avec une ligne (tr) pour chaque vers, séparée en une cellule (td) pour le texte et une cellule pour les accords.
Sinon, faire ça avec des paragraphes:

[b]HTML:[/b]
<p class="ligne">
	<span class="texte">And if you wait another day</span>
	<span class="accords">| F_ | Gm</span>
</p>

[b]CSS:[/b]
p.ligne {
	overflow: hidden; /* empêche le dépassement des flottants */
	width: 100%; /* idem pour IE6 */
}
p.ligne span.texte {
	float: left;
	width: 70%;
}
p.ligne span.accords {
	display: block;
	margin-left: 75%;
}

Quelque chose du genre...

Ah oui, tu peux à priori améliorer la lecture par les lecteurs d'écran en traitant les indications des accords comme des abréviations (d'ailleurs, c'est le cas...):

<abbr title="La">A</abbr>
<abbr title="Sol mineur">Gm</abbr>
etc.

Bonjour,

les seuls critères d'accessibilité applicables sont ceux de l'ASCII-ART (voir le RGAA à ce sujet). Mais le résultat final sera très médiocrement accessible, AMHA, dans tous les cas. Ce n'est pas un problème de "comment faire", mais de "ai-je les moyens de faire". Il est possible (je n'ai pas regardé en détail) que ce soit un de ces cas où, actuellement, il faille revoir ses ambitions d'accessibilité avec beaucoup, beaucoup, d'humililité )
Modifié par Laurent Denis (21 Sep 2007 - 13:13)