Initiation à la création de site Web

Outils de validation

Voir aussi :

Directives pour l'accessibilité aux contenus Web
Procédure afin de valider l'accessibilité d'une page
WAI

Validation du code HTML

Les documents HTML sont des documents structurés et l'imbrication des balises a son importance et ses contraintes.
Certaines balises délimitent des paragraphes complets et ces sections ne peuvent pas être imbriquées dans d'autres sections correspondant à des paragraphes complets.
Deux sections ne peuvent pas se chevaucher partiellement. Suivant les balises utilisées, elles peuvent être imbriquées.
En cas de non-respect des règles de syntaxe, il se peut que votre navigateur affiche malgré tout le document correctement.
Un navigateur Web en général fonctionne suivant un des deux modes : le mode « standard » et le mode « quirks » (vieux coutume). Dans le mode « standard », le navigateur tente d'afficher un document en suivant les recommandations du W3C, au risque d'avoir des problèmes si le document ne respecte pas ces standards. En mode « quirks », le navigateur tente d'afficher la page de son mieux, même si cette page n'est pas bien codée.
L'utilisation d'un des deux modes est dictée par la présence (ou l'absence) d'une déclaration DOCTYPE au niveau de la page à afficher.
Si une déclaration DOCTYPE est présente, le navigateur tentera d'afficher la page en mode « standard ». Dans l'autre cas, il passera en mode « quirks ».
Voici les différentes variantes de DOCTYPE :
- HTML :
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
```
- XHTML :
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
```
  Cette déclaration de type de document se place toujours au début du document.
La page Web doit contenir un DOCTYPE pour dire au validateur quelle version du HTML sera utilisée.
Il convient pour la réalisation d'un site Web d'utiliser le doctype XHTML strict.
Exemple :
```
<!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" lang="fr">

<head>
  <title>Titre</title>
</head>

<body>
  <p>texte texte</p>
</body>

</html>
```
Commentaires :
- l'attribut xmlns est l'abréviation de « XML-Name-Space » (espace de nommage XML), et il a toujours comme valeur http://www.w3.org/1999/xhtml; il définit les balises du langage XHTML
- l'attribut lang indique la langue dans laquelle le document est écrit
- la DTD (définition de type de document) définit la grammaire du fichier XHTML
Le W3C (World Wide Web Consortium) est une organisation indépendante gérant les standards du Web (HTML, CSS, XML, ...) et d'autres outils qui supportent le développement de pages Web.
Pour assurer le même affichage sur différentes plateformes, le W3C a développé un validateur du HTML.
Accessible via l'adresse : http://validator.w3.org/, il permet de valider la structure de votre page Web.
L'utilisation du code JavaScript à l'intérieur du code HTML peut causer des problèmes au cours de la validation. Une des solutions pour régler ce problème est l'ajout d'un commentaire HTML autour du code JavaScript :
```
<script type="text/javascript">
//
</script>
```
L'outil Validateur W3C Multipages permet de valider plusieurs pages HTML d'un seul coup.

Validation du code CSS

Le W3C a développé un validateur, lequel analyse les feuilles de style CSS et affiche les erreurs trouvées.

Validation d'hyperliens

Le validateur de W3C, http://validator.w3.org/checklink permet de vérifier s'il y a des hyperliens brisés.

Correcteur d'orthographe

L'outil http://labs.translated.net/correcteur-orthographe/ vous permet de vérifier l'orthographe de votre document.

Firefox 2 a introduit un correcteur d'orthographe (en anglais seulement à cause de droit de licence) sur les zones de texte (textarea) et champs de saisie (input) des formulaires Web.

Un dictionnaire français est disponible, pour en profiter vous devez installer cette extension.

Liens utiles

http://www.interpc.fr/mapage/billaud/ponctua.htm : Règles de ponctuation et de typographie

Directives pour l'accessibilité aux contenus Web

Le contexte

de nombreux utilisateurs peuvent être amenés à opérer dans des contextes très différents du nôtre
- problèmes de vision
- problèmes d'utiliser un clavier ou une souris
- des écrans n'affichant que le texte
- version ancienne du navigateur ou un système d'exploitation différent
les développeurs de sites Web doivent considérer ces différentes situations
- un contenu textuel peut être présenté à l'utilisateur sous forme de voix synthétique (l'ouïe), de braille (le toucher), et de texte affiché visuellement (la vision)
« L'accessibilité du web signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du Web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » (W3C)

Directives d'accessibilité aux contenus Web

Fournir des alternatives équivalant au contenu visuel et auditif
Points à contrôler (exemples) :
- Fournir un texte équivalent (via alt, longdesc, ou dans le contenu de l'élément) pour chaque élément non textuel (images, animations, des applets, des sons, ...)
- Fournir des liens textes redondants pour chaque région active d'une carte cliquable
Ne pas s'en remettre exclusivement aux couleurs;
S'assurer que les textes et graphiques sont compréhensibles quand on les visualise sans couleur.
Points à contrôler (exemples) :
- S'assurer que toute information convoyée par des couleurs est également accessible sans couleur
- S'assurer que la combinaison de couleurs entre le premier plan et l'arrière-plan utilise suffisamment de contraste lorsqu'elle est utilisée par des personnes souffrant d'un déficit de perception des couleurs ou sur un écran noir et blanc.
  méthode : utiliser un écran monochrome ou sélectionner le blanc et le noir dans les options d'affichage
- Lorsqu'on demande à l'utilisateur d'entrer des informations, éviter des questions dans le style : sélectionnez le bouton rouge
Utiliser le balisage et les feuilles de style de façon appropriée;
Points à contrôler (exemples) :
- Quand un langage de balisage approprié existe, utiliser des balises plutôt que des images pour convoyer l'information (MathML pour les équations, des feuilles de styles pour formater le texte et contrôler la mise en page).
- Utiliser des unités relatives plutôt qu'absolues
- Utiliser les éléments d'en-tête pour convoyer la structure du document
Créer des tableaux qui se transforment de façon élégante;
Assurez-vous que vos tables possèdent les balises nécessaires pour être interprétées par les logiciels de consultation existants et autres agents utilisateurs.
S'assurer que les pages qui contiennent de nouvelles technologies se transforment de façon élégante;
S'assurer que les pages sont accessibles même lorsque les dernières technologies ne sont pas supportées ou sont désactivées.

Niveaux d'accessibilité WCAG1.0

(Voir le site de Wikipedia)

Priorité	Obligation	Portée	Niveau d'accessibilité	Exemple	Visiteurs concernés
1	Ce qui doit être fait.	Lève les barrières obstructives à l'accès aux contenus	Niveau A (respect des points de contrôle de priorité 1)	Toute information véhiculée par la couleur est également perceptible sans couleur.	personnes aveugles
2	Ce qui devrait être fait	Lève d'autres barrières significatives	Niveau AA (respect des points de contrôle de priorité 1 et 2)	Les contrastes de couleurs entre avant-plan et arrière-plan sont suffisants dans les images.	utilisateurs daltoniens
3	Ce qui peut être fait	Améliore le confort d'accès	Niveau AAA (respect des points de contrôle de priorité 1, 2 et 3)	Les contrastes de couleurs entre avant-plan et arrière-plan sont suffisants dans les textes.	utilisateurs malvoyants

Quelques documents à consulter

La liste des points de contrôles pour les règles d'accessibilité du contenu du web
Conception du contenu d'un site Web pour les personnes handicapées, Conseil du Trésor du Canada
Une des règles d'accessibilité du contenu du web décrit une conception respectant l'indépendance par rapport au périphérique et un de ses points à contrôler est l'utilisation des raccourcis clavier pour les liens importants. Cette règle est discutable.