Des conseils pour l'accessibilité et la validation ...

Bonjour, je suis un petit nouveau ici, mais j'étais déjà passé une ou deux fois pour piocher des infos. Je suis en train de refaire mon site fait sous iWeb sous Mac, mais de façon plus propre (avec du vrai code ).

Voici ma page qui me servira de template pour tout le reste du site. Pour l'instant, il n'y a aucun contenu (ou presque) et les liens ne pointent vers rien, ou la même page, mais je voudrais déjà que ma page de template soit la plus parfaite possible (si tant est que ce puisse être possible, en tout, l'améliorer au maximum de mes capacités) vu qu'elle sera répétée sur tout le reste du site.

J'ai lu des sujets traités ici sur l'accessibilité, je me suis à peu près arrangé pour qu'on puisse agrandire la police, mais je cherche d'autres idées/améliorations qui pourrait constituer un plus pour mon site. Je sais que je dois remplir tous les alt="" de mes images, mais à par ça, je sais pas trop quoi faire.

J'ai aussi passer cette page au W3C validator et j'ai 16 erreurs. Il y a en 14 que je peux facilement régler en mettant la balise alt="" sur les images de mes bordures, mais les 2 autres erreurs (les 2 premières) je ne sais pas à quoi ça correspond.

J'ai un problème sur la définition de mon javascript (le seul en plus ) et un autre problème sur l'attribut onLoad qui me permet de donner la bonne largeur au navigateur au chargement de la page.

Je suis tout nouvau en codage, il y a une semaine et demi, je savais même pas ce que c'était un div !;) mais je m'y suis mis à fond et ai lu et vu pas mal de tutos et dossiers (dont un certain nombre ici). Du coup, j'aimerais tout de suite avoir les bons réflexes pour coder proprement et avoir un site valide et accessible.

Je suis donc ouvert à toutes remarques et propositions (et coup de pouce pour ma validation).

Merci d'avance

PS : zauriez un tuto expliquant la différence entre XHTML transitional et strict ? (EDIT : j'ai trouvé ICI quelques infos, mais je suis preneur de plus
PS2 : si vous allez au dossier racine, vous avez au CSS si besoin est
Modifié par FXF (10 Jun 2007 - 02:59)

Bon, d'accord, je vire ce js
Je l'avais mis pour éviter dans la but d'agrandir le navigateur à la taille de mon site, mais vous dites apparemment que la le réduis plus qu'autre chose. J'avais donc fait un postulat érroné sur les tailles par defauts des navigateurs.

Sinon, je me suis aperçus que mon menu est directement accessible avec la touche Tab, donc un bon point niveau accessibilité, je vais voir ce que je peux faire pour les accesskey (dur, je connaissais même pas), et les liens d'évitement (facile, juste des liens dans le body).
Du coup, dans le CSS, j'ai mis ça :

#divPage {
	background-color: #000000;
	min-width: 800px;
	padding: 0px;
	width:100%;
}

C'est plus propre comme ça ?

Sinon, en ce qui concerne la validation, j'ai viré le script, donc 2 erreurs de moins. J'ai rajouté des

alt=""

vide parce que c'est uniquement des images pour faire des bords arrondis, donc pas besoin de description.
Par contre, j'ai un problème que je comprend pas avec le validateur : il me sort une erreur ligne 17, alors que le code est strictement identique ligne 19, mais là, pas d'erreur. Pas d'erreur non plus sur les 10 autres bouts de code identiques (pour mes bordures arrondies). Il me dit "there is no attribute "background" ???

J'ai tenté de rajouter un

 alt="roundedborder" 

puisqu'il y a une image, mais il en veut pas .... je comprends pas ...

EDIT (encore) : je viens de voir comment faire des accesskeys, c'est en fait super simple ! du coup, je vais peut-être en mettre, mais est-ce bien utile ? J'ai vu des articles indiquant que c'était un peu une fonctionnalité "râtée" dans le sens où elle n'avai pas réussi à se répandre si s'homogénéiser.
Modifié par FXF (10 Jun 2007 - 13:14)

FXF a écrit :
je viens de voir comment faire des accesskeys, est-ce bien utile ?

Certainement pas.

FXF a écrit :


c'est ironique ?

Absolument pas.

Pour les accesskey, l'article qui va bien : Accesskey le grand échec de l'accessibilité du Web.

Le Référentiel général d'accessibilité pour les administrations (RGAA) a un point de contrôle sur le sujet : 9.5 Proposer des raccourcis clavier.

Le test qui vérifie si des accesskeys sont présents sur le site est noté comme « Recommandé » à l'année N+2, c'est à dire qu'il ne sera jamais obligatoire.

L'existence de ce point de contrôle et de ce test ne signifient pas qu'il soit recommandé d'utiliser des accesskeys, comme le dit le texte explicatif :

a écrit :
A l'heure actuelle, l'implémentation du système de raccourci clavier dans les navigateurs n'étant pas harmonisé, leur utilisation n'est pas conseillée. Néanmoins, si vous estimez indispensable la mise en place de raccourci clavier cela nécessite le respect des règles suivantes : (...)

En gros, ce point de contrôle sert à encadrer l'usage des accesskeys dans le cas où on a décidé de les utiliser.


Pour résumer tout ceci en une réponse simple : pour un nouveau site ou un site qui n'a jamais eu d'accesskeys, laisser tomber les accesskeys (et les explications sur leur utilisation qu'il faudrait alors fournir dans une page ad hoc). On gagnera du temps pour travailler le reste.

Pour un site qui en a déjà et depuis longtemps, il est peut-être préférable de les conserver...
Modifié par Florent V. (10 Jun 2007 - 21:03)

FXF a écrit :
Du coup, dans le CSS, j'ai mis ça :

#divPage {
	background-color: #000000;
	min-width: 800px;
	padding: 0px;
	width:100%;
}

C'est plus propre comme ça ?

Oui. Mais à priori le width: 100% est inutile, vu que ta div prendra déjà toute la largeur disponible dans son conteneur. De plus, éviter de préciser width: 100% te facilitera la tâche si tu veux utiliser des border ou padding latéraux sur cet élément.

Ah oui, et si tu précises que tu veux une couleur de fond noire, il peut être utilise de demander du texte blanc ou clair avec par exemple un color: white, quitte à le contredire par la suite. Si tu te retrouves avec du texte en contenu direct de div#divPage, attention à ce qu'il soit bien lisible.

FXF a écrit :
Il me dit "there is no attribute "background" ???

Eh bien, c'est très simple : l'attribut HTML background n'existe pas, tu l'as en quelque sorte « inventé ». Donc forcément ça n'est pas valide.
On passera par la feuille de style pour utiliser la propriété CSS background ou bien background-image.
Modifié par Florent V. (10 Jun 2007 - 21:11)

OK, donc dans l'ordre :
J'avais lu cet article, c'est pour ça que je demandais si c'était utile, mais je constate que ça apporte pas grand chose donc. je vais donc juste mettre des liens d'évitement (si j'ai bien compris comment ça marchait, c'est juste des ancres. Je vais donc faire comme sur Alsacréations, dans mon cas dans le body des liens en gris alignés à droite.

Sinon, pour le bout de code CSS, effectivement le width:100% sert à rien, je vais le virer, et rajouter une color:#99999 (gris comme les liens) sur mon body (et ça servira de couleur pour les liens d'évitement.

Enfin, pour le backroung, je l'ai fait avec Dreamweaver, donc je saurais qu'il faut pas Par contre, j'ai lu que IE avait du mal avec le background-image dans le CSS. Vrai ou pas ? Et si oui, il y a moyen de contourner ?

En tout cas, merci pour ces réponses et cet accueil, j'ai non seulement plaisir à coder, mais en plus, ce forum m'a l'air bien cool ! Je vais peut-être y poser mes valises

Victoire !!
http://www.w3.org/Icons/valid-xhtml10

Ma page est valide !

Donc, j'ai ajouté comme prévu les liens d'évitement pour le menu, le contenu et le pied, et sans même utiliser d'ancre, mais les div (merci alsacréations pour le truc !) avec un simple #divContent, #divFooter etc ...

Pour mes bordures arrondis, j'ai créer des classes et ça donne donc des trucs dans le genre :

<td class="topleft"></td>
<td class="topright"></td>
<td class="bottomleft"></td>
<td class="bottomright"></td>
<td class="top"></td>
<td class="left"></td>
<td class="bottom"></td>
<td class="right"></td>

et ensuite, j'ai tout foutu dans les CSS la taille des coins, et l'image en background-image.

Ca passe nickel sous Safari, FF Mac, FF PC et IE6 !! (j'avais peur pour IE6, mais ça passe). D'ailleurs, j'ai pas IE7, donc pas pu tester, si l'un de vous l'a, merci de me dire si c'est bon (a priori, si c'est bon sous le 6, ça devrait aller sous 7 )

Bon, ben je crois que j'ai résolu tous mes problèmes depuis le début de ce fil.
Maintenant, j'ai plus qu'à créer un nouveau topic dans la section design pour avoir des avis, aides, etc ...


En tout cas, merci. @+

(Une réponse pour juste dire "Coucou" à FXF )