valid xhtml et css

[bituur]

juste comme ça, à propos, histoire de. parce que y a des bugs mais y a aussi du boulot d'abattu.
l'index dogmazic.net est valide xhtml & css (xhtml 1.0 transitional & css 2, précision pour geeks à oeil de lynx).
xulops, mr_ersatz &nd rico l'ont fait. merci qui ?

[mpop]

On dit « bravo les gens ! »

Il y aurait encore quelques efforts à faire sur l'accessibilité, comme des liens d'évitement en début de page pour aller directement au menu, à la recherche, à la zone d'identification, à la « zone de contenu » (même si elle est peu définie, vu qu'il y a plusieurs contenus hétéroclites).

[Rico]

Si tu sais comment coder ça, n'hésites pas à nous proposer quelque chose, c'est lié à une propriété comme display: none; ?

[mpop]

c'est lié à une propriété comme display: none; ?

Euh... non, et non.

Théoriquement, un display:none dans une feuille de style réservée au média "screen" devrait faire l'affaire, mais malheureusement la plupart des lecteurs d'écran interprètent cette propriété, média screen ou pas, et ne rendent pas les liens d'évitement. C'est un bug, une erreur d'implémentation, mais c'est comme ça...

Donc, pour cacher ce genre d'informations utiles « uniquement » aux non-voyants et utilisateurs de navigateurs non graphiques, on a souvent recours à des techniques qui positionnent ces liens d'évitement en absolu en dehors de la zone visible, avec un position: absolute; top: -2000px par exemple. C'est déjà mieux, mais cela pose un problème pour la navigation (graphique) au clavier : lorsqu'on passe de lien en lien sur la page, le pointeur disparait de l'écran pour une série de liens invisibles, pour revenir ensuite... assez perturbant.

Mais à la rigueur c'est un « moindre mal ».

Sinon, un truc du genre :

Code : Tout sélectionner

<div id="liens-evitement">
<h2>Liens d'accès rapide</h2>
<ul>
	<li><a href="#connexion" title="Aller au formulaire de connexion et aux informations sur mon compte, ma musique, etc.">Mon compte</a></i>
	<li><a href="#conteneurmenu" title="Aller au menu de navigation">Navigation</a></li>
	<li><a href="#form1" title="Aller au formulaire de recherche">Recherche</a></li>
	<li><a href="#contenuGauche" title="Aller au contenu de la page">Contenu</a></li>
</ul>

À noter que l'accessibilité du formulaire de recherche me semble douteuse (pas de bouton submit ?... par contre, Lynx a l'air de s'en dépatouiller).

Un code à placer en tout tout début de page, avec le CSS suivant :

Code : Tout sélectionner

div#liens-evitement {position: absolute; top: -2000px;}

Voilà, c'est un début mais il faut bien être conscient du fait que ce n'est qu'un plâtre sur une jambe de bois ! On ne peut pas rajouter des éléments pour rendre un site accessible, il faut qu'il soit conçu dès le départ pour être accessible !

Se passer des tableaux de mise en forme est un début. Mais proposer un contenu cohérent et correctement structuré est indispensamble. Cela implique d'avoir un ordre des contenus dans le code source qui soit logique, et surtout -- pour être un peu concret -- une hiérarchie des titres de section hN qui soit la plus rigoureuse et logique possible.

Une bonne hiérarchie des titres de section fait plus encore pour l'accessibilité des contenus d'un site que de simples liens d'évitement vers les diverses sections de chaque page.

Pour l'instant, si je regarde uniquement la page d'accueil, c'est loin d'être satisfaisant. Avec la barre d'outils webdeveloper pour Firefox, on peut faire Information > Plan du document pour voir ce que cela donne. C'est pas tip top.

Le plus déroutant dans cette structure sera sûrement le fait que les titres de la rubrique Actualité sont des h1, tandis que la dite rubrique est introduite par un h2 ! Les titres de chaque article, normalement, devraient êtres des h3 !

Rien que cette correction serait déjà un plus appréciable. Cela permettra aux utilisateurs de lecteurs d'écran de naviguer de titre en titre (fonctionnalité très usitée pour parcourir une page). Les titres des différentes zones de la page étant plutôt clairs, ils forment une bonne base de navigation, plus efficace encore que les liens d'évitement (mais rien n'interdit de proposer AUSSI quelques liens d'évitement).


La structure actuelle de la page d'accueil est la suivante :

Code : Tout sélectionner

<h1> [Titre manquant]
		<h2> Mon compte
		<h2> Ma musique
		<h2> Près de chez moi
				<h3> 79 visiteurs et 4 membres en ligne.
				<h3> L'association
				<h3> Chat IRC
		<h2> Actualités
<h1> musique-libre.org est mort. Vive dogmazic.net !
<h1> Radio de musique libre sur Dogmazic
<h1> LoFi Shop : HipHop domain vol. 3
<h1> Tout le monde vous dira non
<h1> Appel Public pour la Programmation d’Exhibitions Libres
		<h2> A la Une
		<h2> Les 5 derniers inscrits
		<h2> Forums
		<h2> Musique : 10 au hasard
		<h2> Prochains concerts
		<h2> Radios Libres

Il faudrait faire ceci :

Code : Tout sélectionner

(Rappel : Liens d'accès rapide en début de code, avant le h1)
<h1> Dogmazic.net, musique libre (*)
		<h2> Mon compte
		<h2> Ma musique
		<h2> Près de chez moi
				<h3> 79 visiteurs et 4 membres en ligne.
				<h3> L'association
				<h3> Chat IRC
		<h2> Navigation (**)
		<h2> Actualités
				<h3> musique-libre.org est mort. Vive dogmazic.net !
				<h3> Radio de musique libre sur Dogmazic
				<h3> LoFi Shop : HipHop domain vol. 3
				<h3> Tout le monde vous dira non
				<h3> Appel Public pour la Programmation d’Exhibitions Libres
		<h2> A la Une
		<h2> Les 5 derniers inscrits
		<h2> Forums [color=blue](derniers messages)[/color]
		<h2> Musique : 10 au hasard
		<h2> Prochains concerts
		<h2> Radios Libres

* = les ajouts (pour le h1, on peut réutiliser le logo Dogmazic, avec la même image et comme texte alternatif "Dogmazic.net, musique libre" plutôt que "typo dogmazic" comme c'est le cas actuellement... d'ailleurs "typo dogmazic" ne veut pas dire grand chose, à la rigueur "logo dogmazic" serait plus parlant comme texte alternatif).
** = un titre à rajouter au tout début du bloc du menu (avant le table), et à cacher via un positionnement absolu et un top: -2000px; également.



Après quoi, il resterait toujours un certain nombre de chantiers, comme certains tableaux de mise en forme (surtout pour le menu...), et surtout (plus urgent) s'assurer que les fonctionnalités du site (formulaires, liens de téléchargement/écoute, etc.) sont accessibles.



Voilà, je n'ai pas le temps de faire un audit d'accessibilité complet (ni les compétences pour, d'ailleurs), mais ça donne déjà une idée.

[Rico]

Okey, merci bien pour tous ces détails précieux. On va voir ce qu'on peut faire pour tendre vers une accessibilité plus grande et une meilleure structure des pages !
En tout cas c'est pas gagné vu le nombre de fichiers que cela implique d'éditer

[mpop]

En tout cas c'est pas gagné vu le nombre de fichiers que cela implique d'éditer

Et oui, l'accessibilité « après coup » c'est un sacré casse-tête.