Voici donc une liste (non-exhaustive) des points de contrôle effectués :

Points de contrôle
Ergonomie
	Ne pas utiliser de soulignement de texte pour autre chose que des liens.
	La page 404 est indispensable et doit être personnalisée aux couleurs du site. Proposer éventuellement un formulaire de recherche.
	Une feuille de style d’impression doit être prévue.
Accessibilité
	En cas d’utilisation de plug-ins (vidéo, Flash), prévoir une alternative textuelle pour un utilisateur qui n’aurait pas installé et/ou ne voudrait pas installer le plug-in.
	Tester la page sans images (via l’extension Webdevelopper de Firefox) pour s’assurer que l’ensemble du contenu est lisible sans les images de fond. Exemple : Un texte blanc sur une image def fond peut devenir illisible si aucune couleur de fond n’a été spécifiée dans les propriétés du bloc conteneur.
	Toute image doit avoir un alt, renseigné ou non. Illustration : alt vide, ou image de fond
	Dans le cas où des fichiers sont proposés au téléchargement, deux points sont à respecter : format ouvert, poids du fichier à télécharger doit être indiqué.
	Le javascript doit être non-obstrusif et le site doit être parfaitement utilisable s’il est désactivé par l’utilisateur.
Intégration HTML / CSS
	Les pages sont valides W3C
	Le balisage est propre : pas de styles ou de scripts dans le code HTML
	Le doctype du document HTML sera du XHTML 1.0 Transitional dans le cas (limité) d’utilisation d’iframe.
	Le doctype du document HTML sera du XHTML 1.0 Frameset dans le cas (limité) d’utilisation de frameset.
	Bannir l’utilisation de tableaux pour la mise en page, les tableaux ne doivent être utilisée que pour des données tabulaires et non pas pour créer des mises en page.
	S’efforcer de renseigner l’intitulé « title » des liens pour des raisons de référencement et d’accessibilité. Le title du lien doit fournir plus d’informations que l’intitulé du lien lui-même (mais y compris l’intitulé ; ex : « Aide (nouvelle fenêtre) »)
	La structuration de l’information doit être cohérente par rapport au contexte général du site Web (ex : pas de pub au milieu du texte)
	Une page Web doit posséder une structure cohérente (utiliser h1 (oblig.), h2, …pour leur fonction 1ère ; les blocs d’infos doivent être distincts)
	Pour les tableaux de données, identifier les zones suivante : « thead » (pour l’entête du tableau), « tbody » (pour le corps du tableau) et « tfoot » (pour les données de pied de tableau). On s’efforcera de fournir une description du tableau au sein de la balise « summary »
	Les champs de saisie d’un formulaire doivent être reliés à leurs textes explicatifs respectifs (spécifier label, id et for)
	Respecter le sens sémantique des balises. Proscrire l’utilisation des balises et attributs dépréciés (ex : b, center, basefont, applet, dir, font, isindex, menu, s, strike, u et align, bgcolor, height…).
	Utiliser la balise <abbr> et/ou <acronym> ainsi que son attribut title lorsque cela est possible.
	Dans le cas d’un style spécifique à Internet Explorer, utiliser les commentaires conditionnels. Evitez les hacks du type « _margin » ou encore « *width »
	Pour conserver un maximum de souplesse aux feuilles de style, limiter tant que possible le « poids » des déclarations. Exemple : privilégier « .content » à « body.page #wrapper div.content »
	Pas de notions topographiques ou colorimétriques dans les noms de classes ou : noms faisant référence à la structure. Pas de couleur ni gauche/droite. Exemple : ne pas utiliser div.rouge ou div.left. Si on décide un jour de modifier les propriétés de placement ou d’apparence, ces classes n’auront plus de sens.
	Ne pas utiliser de cote, double ou simple, dans les chemins des CSS.
	Les sites, les pages doivent pouvoir être actualisés facilement et avec souplesse. De ce fait, les zones de contenu doivent s’étendre graphiquement en hauteur (pas de hauteur fixe donc pour les blocs)
Optimisation du référencement
	Pour des raisons de référencement, limiter au maximum les paramètres et les caractères « exotiques » dans les liens.
	Les balises d’indexation <title>, <meta name= »description » /> et <meta name= »keywords » /> doivent êtres renseignées même si leur action en terme de référencement peut être discutable. Elles doivent être situées juste sous la balise définissant l’encodage et dans l’ordre suivant : title / description / keywords
	La balise <title> doit être présente et renseignée sur toutes les pages. Elle doit être en adéquation avec son contenu et donc, dans la plupart des cas, différente d’une page à l’autre.
	La balise <meta name= »description »> doit être présente et renseignée sur toutes les pages. C’est une balise visible par l’internaute. Elle doit être significative de son contenu, des services rendus par la page, des informations livrées.
	La balise <meta name= »keywords »> doit être présente et renseignée sur toutes les pages. Elle doit reprendre les quelques mots-clé de la page. On peut aussi y inclure certains pluriels, synonymes, anglicismes, etc.
	Prévoir un fichier à l’intention des robots d’indexation, à la racine du site. (robots.txt)
Compatibilité Navigateurs
	Internet Explorer 6, (N.B. : Pour cette version, il faut que le site soit un minimum exploitable)
	Internet Explorer 7 et +,
	Firefox 2 et +,
	Safari 2 et + (tolérance)
	Opera 9 et + (tolérance)
	Les pages livrées doivent s’afficher, sans ascenseur horizontal, dans un écran en 1024 x 768
Performance
	Le poids maximal d’une page, images incluses, ne doit pas dépasser 150k.
	Seule la page d’accueil fait exception et peut atteindre jusqu’à 250k, images incluses.
	Évitez les appels multiples à des feuilles de style ou à des fichiers javascript. Merger ces appels pour des raisons évidentes de performance
	L’utilisation du format PNG 24 devra être utilisé avec parcimonie pour des raisons de compatibilité navigateur (IE6 ne supporte pas les couches alpha sans l’utilisation de DirectX. Ce dernier pose des soucis de performances, les images filtrées n’étant pas mises en cache).
Autre…
	L’encodage privilégié est l’UTF-8, il est indiqué avec la balise meta « content type ».
	Les caractères suivants doivent être encodés sous forme d’entité HTML : &, <, >, €
	Prévoir une icône de favori à la racine du site.
	Les valeurs monétaires, statiques ou dynamiques, doivent suivre le format suivant : un espace insécable comme séparateur de millier une virgule comme séparateur de décimale un espace insécable entre le nombre et son unité
	Utiliser un espace insécable entre une double ponctuation et le mot qui la précède : !, ?, :, ;
	Les chemins vers les pages (mais aussi vers les scripts, feuilles de style, images, etc) doivent être en absolu en considérant le répertoire / comme la racine du site.
	Dans le cas d’envoi de paramètre dans l’URL, ne pas oublier d’encoder sous forme d’entité HTML le « & » (&amp;).

Que faut-il faire exactement pour rendre son site accessible?

Nous allons voir brièvement une liste d’éléments à intégrer dans le code XHTML pour permettre à son site de respecter les contraintes d’accessibilité.

Bien organiser son document XHTML

Un document accessible se doit de respecter une certaine logique. On ne doit surtout pas organiser son contenu en fonction de l’apparence graphique du site. C’est la méthode qui était utilisée lorsque l’on construisait des structures graphique à l’aide de tableau. Il faut veiller à ce que le document soit lisible sans la présence de feuilles CSS. On respecte impérativement l’ordre logique des balises (<h1>, <h2>, etc…). Le titre du site et de la page consultée doit se trouver en haut du document suivi du menu principal. On passe ensuite au contenu et enfin le pied de page.

Veiller à ce que le titre de la page change

Cela parait peut être anecdotique mais la balise <title> est très importante pour les personnes ayant des déficiences visuelles. Cela leur permet de mieux se repérer dans les différentes pages du site internet. Si vous laissez le même titre pour chaque page, il sera complètement perdu. Et puis, prendre la peine de mettre des beaux <title> en fonction du contenu, ça fait déjà plus sérieux

Indiquez à l’utilisateur où il se trouve sur la page

Il est important parfois de signaler à l’utilisateur utilisant un lecteur d’écran où il se trouve sur la page en l’indiquant dans un texte masqué par CSS pour les autres utilisateurs. Pour cela, on signale par exemple à l’internaute qu’il se trouve sur le menu principal par cette phrase : « Vous êtes actuellement sur la navigation principale du site ». On cache cette phrase par la propriété CSS > display:none. Attention, n’utilisez pas la propriété > visibility:hidden car la phrase ne sera pas lue par le lecteur d’écran.

On ne fait pas de la mise en page avec des tableaux

Beaucoup de sites ont encore des structures graphiques à base de tableaux. Sémantiquement, ça ne veut rien dire. Rappelons-le, les tableaux sont destinés uniquement à la structuration de données.

Renseignez correctement vos tableaux

Le tableau est certainement l’élément le plus difficile à rendre accessible. Les lecteurs d’écran ont beaucoup de mal à lire les données tabulaires non renseignées. L’attribut « Summary » permet de donner une indication sur les données contenues dans le tableau. « Caption » servira à donner un titre. Il faut également définir les entêtes du tableaux. Les balisages <thead>, <tbody> et <tfoot> permettent de rassembler les différentes parties du tableau, ils correspondent respectivement à l’entête, le corps et le pied du tableau. Ensuite, on place des ID à chaque entête et on assigne aux cellules associées cet ID par le biais de l’attribut headers= »". Enfin, si vraiment on souhaite être pointilleux, on ajoute aux entêtes l’attribut abbr= »" afin de donner une abréviation du contenu de la cellule.

Voici un tableau non-accessible…

<p class="desc">Evolution du prix des jouets</p>
<table border="1" cellspacing="0" cellpadding="2">
     <tr>
     	<td><b>Jouets</b></td>
     	<td><b>Elmo</b></td>
     	<td><b>Nono le robot</b></td>
     	<td><b>Poupée barbie</b></td>
     	<td><b>Canard vibrant</b></td>
     </tr>
     <tr>
     	<td><b>Prix en 1998</b></td><br />
     	<td>20,3 €</td>
     	<td>35,4 €</td>
     	<td>23,2 €</td>
     	<td>10,5 €</td>
     </tr>
     <tr>
     	<td><b>Prix en 1999</b></td>
     	<td>20,6 €</td>
     	<td>30,4 €</td>
     	<td>25,2 €</td>
     	<td>9,5 €</td>
     </tr><tr>
</tr></table>

.. et le même tableau respectant les contraintes d’accessibilité :

<table summary="Tableaux de prix des jouets en euros" border="1" cellspacing="0" cellpadding="2">
	<caption>Evolution du prix des jouets</caption>
	<thead>
		<tr>
			<th>Jouets</th>
			<th id="elmo" abbr="elmo">Elmo</th>
			<th id="nono" abbr="nono">Nono le robot</th>
			<th id="barbie" abbr="barbie">Poupée barbie</th>
			<th id="canard" abbr="canard">Canard vibrant</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th id="1998">Prix en 1998</th>
			<td headers="elmo 1998">20,3 €</td>
			<td headers="nono 1998">35,4 €</td>
			<td headers="barbie 1998">23,2 €</td>
			<td headers="canard 1998">10,5 €</td>
		</tr>
		<tr>
			<th id="1999">Prix en 1999</th>
			<td headers="elmo 1999">20,6 €</td>
			<td headers="nono 1999">30,4 €</td>
			<td headers="barbie 1999">25,2 €</td>
			<td headers="canard 1999">9,5 €</td>
		</tr>
	</tbody>
</table>

• Pour en savoir plus… (Tutorial Open Web)

Bien organiser ses formulaires

Les formulaires bénéficient également de règles d’accessibilité. Lorsque vous créez un <label> pour une balise <input>, vous devez impérativement définir l’id associé :

<p>
	<label for="ymca">YMCA</label>
	<input name="post_ymca" type="text" id="ymca" />
</p>

Ensuite, la balise <fieldset> permet de regrouper différentes catégories de champs. La balise <legend>, quant à elle, permet de donner un titre aux différents <fieldset> :

<fieldset>
	<legend>Civilité</legend>
	<p><label>Nom&nbsp;: <input type="text" name="champs_nom "/></label></p>
	<p><label>Prénom&nbsp;: <input type="text" name="champs_prenom " /></label></p>
</fieldset>
<fieldset>
	<legend>Renseignement divers</legend>
	<p><label>Date d'obtention du permis: <input type="text" name="champs_permis" /></label></p>
	<p><label>Loisirs : <input type="text" name="champs_loisirs" /></label></p>
</fieldset>

(Notez que l’on a organisé le formulaire différemment pour les labels. Néanmoins, Internet Explorer comprend mal ce type de balisage.)

Sur ce même formulaire, on peut ajouter l’attribut tabindex= »" afin de définir l’ordre de tabulation. Cela se révèle très utile :

<fieldset>
	<legend>Civilité</legend><br />  
	<p>
		<label>
			Nom&nbsp;: 
			<input tabindex="1" type="text" name="champs_nom "/>
		</label>
	</p>
	<p>
		<label>
			Prénom&nbsp;: 
			<input tabindex="2" type="text" name="champs_prenom " />
		</label>
	</p>
</fieldset>
<fieldset>
	<legend>Renseignement divers</legend>
	<p>
		<label>
			Date d'obtention du permis:
	 		<input tabindex="3" type="text" name="champs_permis" />
	 	</label>
	 </p>
	 <p>
	 	<label>
	 		Loisirs : 
	 		<input tabindex="4" type="text" name="champs_loisirs" />
	 	</label>
	 </p>
</fieldset>

Concernant les listes déroulantes, on fera appel à <optgroup> afin de créer des catégories lorsque cela est nécessaire :

<select name="constructeur_automobile">
	<optgroup label="Europe">
		<option value="vw" selected="selected">Volkswagen</option>
		<option value="peu">Peugeot</option>
		<option value="ren">Renault</option>
	</optgroup>
	<optgroup label="Asie">
		<option value="hyun">Hyundai</option>
	</optgroup>
</select>

• Pour en savoir plus… (Tutorial Open Web)

Ajouter des combinaisons d’accès rapide

Les attributs accesskey= »" permettent de définir des raccourcis-clavier pour accéder directement aux éléments de la page. Cela peut se révéler pratique pour la navigation à l’intérieur de la page mais également dans les longs formulaires. Il ne faut jamais utiliser de lettre pour les raccourcis-clavier

• Pour en savoir plus… (Article Open Web)

Ajouter des title= »" à chaque lien

Sur chaque lien que vous placerez sur vos pages, il faudra renseigner un title sous cette forme :

<a href="mon lien" title="Se rendre sur la page de mon lien">Mon lien</a>

Il est important de placer dans cet attribut title un vrai texte de description du lien et non pas une phrase bidon.

Ne pas oublier les « alt » des images

Quand cela se justifie, il faut impérativement renseigner l’attribut alt correspondant à l’image affichée. Parfois, il n’est pas important de le renseigner si l’image n’est pas importante (notamment pour certaines images d’illustration) pour comprendre le document. Tout est question de jugement.

Pour aller plus loin

Voici ci-dessous une liste de site qui complètera cet article :

• Section Accessibilité d’Open Web
• Article d’AlsaCréationS sur les Access Keys
• Le site Access-Keys, une référence en la matière
• Un testeur d’accessibilité

Aujourd’hui, l’apparence d’un site Web est un élément primordial qui peut fidéliser des visiteurs. Le look peut saisir l’utilisateur soit par la beauté de sa simplicité (Flickr pour ne citer que lui) ou encore par sa finesse et sa recherche du détail (le blog de Veerle en est un excellent exemple).

La réalisation web est devenu un exercice particulièrement périlleux au vue de la multiplication des supports de lecture (PDA, Lecteurs d’écran, systèmes d’exploitation) et c’est pourquoi il a fallu définir un certain nombre de conventions en quelque sorte.

On utilise le terme « Accessibilité » à tort et à travers mais de quoi s’agit-il exactement ?

Pour Tim Berners-Lee, directeur du W3C, l’Accessibilité c’est :

Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.

Quelle jolie idée ! Sur le papier c’est pas mal mais sur le terrain, c’est une autre histoire. Le message est parfois mal compris.

Le fond et la forme

Le W3C est un consortium qui veille à ce que les pages web respectent plusieurs règles syntaxiques. Il a mis en place sur son site officiel un validateur de pages qui scrute les différentes pages à la recherche de l’erreur de syntaxe fatale !!! Mais beaucoup considèrent que si le site passe dans le validateur, c’est qu’il est accessible. Il n’en est rien.

Plusieurs balises ou informations importantes pour les lecteurs d’écran peuvent être insérées dans le code afin de le rendre plus accessible. Par exemple pour un tableau, il est recommandé de fournir une balise <caption> afin de lui définir une légende. Mettre des title= »" pour les balises de lien est également un reflex à avoir (j’avoue parfois, j’en oublie, suis-je pardonné ?).

La vraie révolution ces dernières années a été de passer au XHTML ! Enfin, on ne mélangeait plus dans le processus de création la structure et la présentation ! C’est à ce moment qu’on a pu constater la puissance des feuilles CSS. En reprenant le même squelette HTML, on pouvait modifier l’apparence totale avec deux feuilles de style. Toutefois, même si de plus en plus de concepteurs web tendent à apprendre CSS et XHTML, d’autres se bornent à poursuivre à réaliser des sites avec tableaux. Et le plus triste dans tout ça, c’est que parfois ces sites sont présentés en exemple. Sur Webcreme (un site que je fréquente régulièrement), j’ai pu découvrir l’horreur (j’en fais trop ?). Le 23 Novembre, Webcreme publie le site FOURIV qui est bâti uniquement sur des tableaux… Je me rassure en me disant que Webcreme ne s’est jamais défini comme un relais des techniques de créations XHTML/CSS mais plutôt comme une inspiration pour le design de site web.

Finalement

Faire du design web actuellement, c’est plutôt imaginer comment disposer les différents calques de manière à obtenir la plus jolies mise en page. Il ne s’agit plus de créer sa maquette sur Photoshop et de l’adapter sans réfléchir sur son éditeur html. Il y a un véritable travail de sémantique. L’ordre dans lequel seront disposées les différentes balises ne sera pas forcément l’ordre dans lequel les éléments apparaîtront sur la page. Par exemple, il est en général, plus convenable de placer le menu de navigation en haut de la page de code juste en dessous de la balise de titre principale (h1) même si sur la maquette du site web, ce menu apparaît sur le coté gauche, en dessous de la bannière.

Lors de la phase de conception, l’idéal, serait en fait, de bâtir dans un premier temps le code html nu sans feuille de style afin de réaliser une hiérarchisation du contenu et surtout organiser une certaine logique de la sémantique (oh ça rime !).

En tout état de cause, le design web n’est plus uniquement un souci d’apparence mais aussi une réflexion autour de l’intégration des éléments graphiques dans le code. Cela permet des rapprocher les codeurs et les designeurs et ça, c’est plutot une bonne nouvelle