Normes de développement Internet


Normes de développement Internet

 

Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet 1. ETAPES DE REALISATION ........................................................................................................... 3 2. LOGICIELS UTILISES POUR LA REALISATION DES PAGES WEB .......................................... 4 3. ARBORESCENCE ET NOMMAGE DES SITES ET DES FICHIERS............................................. 5 3.1. NOM DU SITE ET DU SERVEUR ...................................................................................................... 5 3.2. NOM DE DOMAINE DU SITE ............................................................................................................ 5 3.3. CONVENTIONS DE NOMMAGE DES REPERTOIRES ET FICHIERS DES PAGES DU SITE, ORGANISATION DES FICHIERS ......................................................................................................................................... 5 4. ELEMENTS ET CHARTE GRAPHIQUES....................................................................................... 7 4.1. FORMATS GRAPHIQUES................................................................................................................ 7 4.2. COULEURS .................................................................................................................................. 7 4.3. IMAGES ET PHOTOS ..................................................................................................................... 7 4.4. POLICES DE CARACTERES ............................................................................................................ 7 4.5. CHARTE GRAPHIQUE .................................................................................................................... 7 5. CONSTRUCTION DES PAGES ET ERGONOMIE ......................................................................... 9 5.1. MISE EN PAGE ............................................................................................................................. 9 5.2. HAUT DES PAGES ........................................................................................................................ 9 5.3. DECOUPAGE VERTICAL DE LA PARTIE CENTRALE DES PAGES .......................................................... 9 5.4. MENU DE GAUCHE ..................................................................................................................... 10 5.5. CONTENU DES PAGES ................................................................................................................ 10 5.6. PAGE D'ACCUEIL ........................................................................................................................ 10 5.7. PAGE D'ERREUR 404 ................................................................................................................. 10 6. CODAGE DES PAGES.................................................................................................................. 11 6.1. VERSIONS DU CODAGE .............................................................................................................. 11 6.2. FEUILLES DE STYLE ET BALISES .................................................................................................. 11 6.3. STRUCTURATION DES DOCUMENTS HTML, UTILISATION DES TAGS ............................................... 11 6.4. TABLEAUX ................................................................................................................................. 11 6.5. FORMULAIRES ........................................................................................................................... 11 6.6. MODELES ET ORGANISATION DES FICHIERS ................................................................................. 11 6.7. SEPARATION DU CODE EN COUCHES ........................................................................................... 12 6.8. VERSION DU PHP ET COMPATIBILITE ASCENDANTE DU CODE ....................................................... 12 6.9. STYLE DE CODAGE ET DE COMMENTAIRES ................................................................................... 12 7. REGLES A SUIVRE POUR LE REFERENCEMENT.................................................................... 14 7.1. LES REGLES A INCLURE DANS LA CONCEPTION DU SITE ................................................................ 14 7.2. LES REGLES DE CHOIX DES INFORMATIONS DE REFERENCEMENT.................................................. 14 7.3. LES REGLES D'INSCRIPTION DU SITE DANS LES MOTEURS ............................................................. 15 8. TESTS ET VALIDATIONS............................................................................................................. 16 9. NORMES CONNEXES A RESPECTER........................................................................................ 18 9.1. NORMES RELATIVES A L'ACCESSIBILITE DES SITES WEB ............................................................... 18 10. ANNEXE 1 : EXTRAITS DU MANUEL PEAR RELATIFS AU STYLE DE CODAGE PEAR ... 19 11. ANNEXE 2 : EXTRAIT DU SITE DE JAVA SUN : "HOW TO WRITE DOC COMMENTS FOR THE JAVADOC TOOL" ........................................................................................................................ 20 12. ANNEXE 4 : LISTE DE VERIFICATIONS (CHECKLIST DES TESTS) D'UNE PAGE WEB ... 21 13. ANNEXE 5 : SYNTHESE DES CRITERES D'ACCESSIBILITE RGAA ET ACCESSIWEB .... 22 1/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 _______________________________________________ Copyright (c) 2006-2007 Hervé Chuzeville - herve @ chuzeville . com Ce document est mis à disposition selon le Contrat "Paternité-NonCommercial-ShareAlike 2.0 France" disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ ou par courrier postal à Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. 2/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 1. Etapes de réalisation Les étapes de réalisation type d'un site Web ou Intranet sont les suivantes : ? détermination du but du site et des besoins ; ? détermination du contenu du site (texte et graphique) et rassemblement du contenu dans ses supports actuels ; ? organisation du contenu, découpage en rubriques et en pages ; ? maquettes sous forme de croquis des pages (principales) ; ? enchaînement des écrans et workflows ; ? maquettes graphiques des pages (principales), dont page d'accueil ; ? charte graphique et ergonomique ; ? choix des technologies de développement et de la plate-forme d'hébergement ; ? choix des outils de développement ; ? étude des problèmes de droit : ? déclarations administratives (CNIL) ; ? droits d'auteurs (photographiques en particulier) ; ? étude des problèmes de sécurité ; ? réalisation (développement) des pages en prenant en compte les problèmes d'ergonomie et de référencement, compression des images ; ? tests : voir le paragraphe "tests et validations" ; ? réalisation de manuel utilisateur des pages dynamiques (et autres applications utilisées) et du back-office : ? manuel orienté développeur (écriture, modification des programmes) ; ? manuel orienté utilisateur (format des données et fichiers à respecter pour les fournisseurs d'informations) ; ? promotion : ? promotion par messages électroniques/news ; ? échange de liens ; ? bandeaux publicitaires ; ? référencement : ? choix des meta tags éventuels (à prévoir en même temps que le développement) ; ? agencement de la page à référencer (à prévoir en même temps que le développement) ; ? enregistrement dans les moteurs de recherche et annuaires : ? manuel (au moins Google, Yahoo, MSN) ; ? automatique (outils Abondance) ; ? mise en place d'un système de statistiques (à prévoir en même temps que le développement) ; ? livraison des fichiers graphiques sources. 3/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 2. Logiciels utilisés pour la réalisation des pages Web Les logiciels qui doivent être utilisés pour la réalisation des pages Web sont les suivants : ? Editeur Wysiwyg : Macromedia Dreamweaver 8 sur PC (tout autre éditeur Wysiwyg interdit, y compris pour générer des fragments de code) ; ? Editeur HTML : éditeur simple colorisant éventuellement la syntaxe, mais n'ajoutant pas de code automatique (au choix : Editplus 2.1, Notepad, HTML-Kit build 292, ...) sur PC ; ? Editeur graphique : Adobe Photoshop CS (8.0), éventuellement en complément : Jasc Paint Shop Pro 7 pour les captures, Adobe ImageReady ou The Gimp) sur PC ; ? Animations : Macromedia Flash 8 sur PC ; ? Documentation d'accompagnement : Microsoft Word 2002 (XP). Les numéros de version sont indiqués sous réserve d'évolution. Tout autre logiciel ou plate-forme de développement est interdite (en particulier sont interdits : Frontpage, Golive et Mac OS). 4/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 3. Arborescence et nommage des sites et des fichiers 3.1. Nom du site et du serveur Le nom d'un site comprend le nom de la machine d'hébergement (serveur) et le nom de domaine. Le nom de la machine d'hébergement de production du site institutionnel est "www" ("www-test" pour la machine d'intégration et "www-dev" pour la machine de développement ; si une même machine héberge deux plate-formes - ex : production et intégration, c'est "www" qui a la priorité sur "www-test" qui lui même a la priorité sur "www-dev" ; dans l'exemple on a donc deux machines : "www" et "www- dev"). Les noms des autres machines hébergeant d'autres sites, respectent les normes de nommage des fichiers et répertoires décrits ci-après et le modèle de nommage des machines de développement et d'intégration décrit précédemment (ajout de "-dev" au nom de la machine de production, pour la machine de développement et de "-test" pour la machine d'intégration). 3.2. Nom de domaine du site Le nom de domaine doit être significatif et "lisible" pour le site. Il doit comporter des mots clés séparés par des tirets (on pourra éventuellement s'affranchir des tirets à condition que les moteurs de recherche référencent aussi bien les noms de domaines sans tirets). On doit faire un compromis entre le nombre de mots clés significatifs et la longueur de l'URI. Dans le cas où une même machine héberge les sites de production, d'intégration et éventuellement de développement, le site d'intégration doit être accessible à partir de l'adresse : http://nom_machine_production.nom_domaine.domaine_de_haut_niveau/test/ et le site de développement à partir de : http://nom_machine_production.nom_domaine.domaine_de_haut_niveau/dev/. 3.3. Conventions de nommage des répertoires et fichiers des pages du site, organisation des fichiers Le nommage des répertoires et fichiers des pages du site suit le standard suivant : chaque partie du site (rubrique, sous-rubrique, ...) possède un répertoire propre (sauf contrainte d'arborescence éventuelle, liée au CMS utilisé) et tous les répertoires et sous répertoires portent des noms significatifs (non abrégés, non tronqués, sauf en cas de trop grande longueur) où les mots, sans accents, sont séparés par des tirets (exemple : "agenda-reunions-internes"). On essaie de limiter la longueur à entre 2 et 3 mots maximum, 4 mots exceptionnellement. Les fichiers HTML (ou PHP, ...) eux-mêmes, placés directement à la racine des répertoires, portent aussi des noms significatifs avec des tirets, tout comme les fichiers graphiques ou de scripts (exemple : "qui-sommesnous.htm", "recherche.php"). La première page (page par défaut obligatoire) ou la page d'accueil de chaque répertoire ou rubrique doit être nommée index.htm ou index.php. Les extensions des noms de fichiers sont sur trois lettres, en particulier : ".htm" pour les fichiers HTML et ".php" pour les fichiers PHP. Les images sont séparées des documents HTML et placées dans des sous-répertoires appelés strictement "images". Un répertoire "images" principal est créé, regroupant l'ensemble des images "partagées" (entre les pages HTML), ainsi que les images de la page d'accueil. Les documents, en particulier les documents téléchargeables et documents bureautique (Word, PDF, Excel, Powerpoint, etc.), sont également séparés des documents HTML et placés dans des sous- répertoires appelés "documents". Les rubriques transverses ("aide.htm", "plan-site.htm", "recherche.htm", "contacts.htm", "mentions- legales.htm", "nouveautes.htm", "votre-avis.htm") sont rassemblées dans le répertoire "a-propos". 5/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 Les feuilles de style sont dans des répertoires nommés "styles". La feuille de style principale est nommée "principale.css". Les fichiers d'inclusion (notamment les fichiers de traitements ? autres que affichage ? php, dont l'extension est : .inc.php ) sont placés dans des répertoires "inc". Les logs et autres fichiers résultats de traitements et batches (en particulier, de nuit) doivent être présents dans des sous répertoires appelés "logs". 6/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 4. Eléments et charte graphiques 4.1. Formats graphiques Les formats graphiques autorisés sont : JPG (JPEG), GIF, PNG, SWF (Flash) ; ils peuvent être combinés dans une même page ou au sein d'un même site. Les éléments graphiques doivent être optimisés en poids (découpés par jeux de couleurs, compressés ; nombre de couleurs diminué au maximum de couleurs utilisées). 4.2. Couleurs Les couleurs utilisées sur le site, en dehors des photographies, doivent être, dans la mesure du possible, des couleurs standard de la palette sécurisée web (http://livedocs.macromedia.com/dreamweaver/8_fr/using/wwhelp/wwhimpl/common/html/wwhelp.htm ?context=LiveDocs_Parts&file=13_page5.htm ; voir aussi la documentation en ligne de Dreamweaver : "les [212] couleurs Web-safe"). Justification : chargement plus rapide de la palette de couleurs et surtout couleurs identiques quelle que soit la machine (écran Mac ou PC notamment). 4.3. Images et photos Les photos insérées dans les pages du site le sont dans une résolution de 96 dpi (résolution des écrans PC actuels). On prévoit la possibilité pour l'internaute d'agrandir les images en cliquant dessus. Chaque image créée est conservée dans sa version pour le web, avec le site, mais aussi dans son format source (".PSD" ou ".PSP", avec tous les calques et les polices éventuelles correspondantes), afin de pouvoir être reprise comme modèle ou modifiée. 4.4. Polices de caractères Seules les polices de caractère pour Windows sur PC sont autorisées pour la réalisation des images. Toutes les polices de caractères utilisées dans la création du site (en particulier celles utilisées pour créer des titres sous forme d'images ou des textes insérés dans les images, et sauf celles fournies en standard sous Windows) doivent être fournies avec une licence d'utilisation de ces polices par personne susceptible de modifier ou créer des images avec ces polices (au moins le webmestre et son intérim). 4.5. Charte graphique La charte graphique doit permettre de construire un site homogène du point de vue graphique et ergonomique. Elle décrit la mise en page et la construction visuelle des pages (découpage en blocs, taille des côtés des blocs), le choix des couleurs pour le site (codes des couleurs utilisées pour chacun des éléments), le choix de typographies des pages (polices utilisées, caractéristiques, ?), le choix des tailles et styles des polices en fonction des types de texte, la présentation des tableaux et des images? La charte doit s'appuyer sur les standards en matière d'ergonomie et d'accessibilité des sites Internet et fait apparaître les règles d'ergonomie utilisées. Elle présente également les feuilles de style utilisées (codes sources). 7/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 La charte doit être fournie avant la phase de réalisation du site et n'est pas un simple ensemble de quelques maquettes de pages du site, mais décrit bien l'ensemble des pages (et ceci afin de respecter l'homogénéité tout au long de la réalisation du site) de manière très précise. Etant entendu qu'on ne peut pas tout prévoir pendant la phase de conception du point de vue graphique, le document sera mis à jour au fur et à mesure de la réalisation du site, mais il ne s'agit en aucun cas de constituer, pour autant, la charte après la réalisation du site. 8/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 5. Construction des pages et ergonomie 5.1. Mise en page Les pages du site seront construites pour tenir dans un écran 800x600 ou 1024x768 et sur une impression papier, sous Internet Explorer, en mode portrait, avec les marges par défaut (19,05). La largeur des pages devra être non fixe. Les pages devront être construites dans l'optique de pouvoir être éventuellement imprimées. On vérifiera l'impression correcte des pages dans leur totalité (notamment en largeur) avec les marges standard d'Internet Explorer. Si une page est ouverte dans une nouvelle fenêtre de taille réduite, on prévoira la possibilité de l'imprimer (inclure le menu d'IE si besoin). L'utilisation de cadres ("frames") n'est pas autorisée. On détaille dans la suite la mise en page type pour les sites Web et Intranet. 5.2. Haut des pages En haut à gauche des pages, est inséré le logo de l'organisme (taille standard IAB si possible : 120 x 60 ou 88 x 31 ; ou 160 x 60 ou 180 x 60), cliquable et menant vers la page d'accueil du site. Tandis qu'en haut des pages, on réserve une place pour accueillir un visuel, un bandeau (taille standard IAB de 468 x 60 pixels ; http://www.iab.net/standards/adunits.asp) éventuellement déroulant, ou des actualités/informations importantes. Transversalement, sous ces entêtes de pages, on a un menu regroupant les rubriques "a propos" du site lui-même (ou "le site"), dans cet ordre : "aide", "plan du site", "rechercher" (avec un champ texte pour lancer directement une recherche rapide + un lien vers une recherche détaillée), "contacts", "infos légales", "nouveautés" (ou "quoi de neuf ?") et "votre avis". Toutes ces rubriques ne sont pas obligatoires pour tous les sites (seules "plan du site" et "contacts" représentent le minimum indispensable). On note que les menus sont constitués de textes et non d'images, afin de permettre une modification aisée et rapide. 5.3. Découpage vertical de la partie centrale des pages Les pages elles-mêmes sont divisées en trois "colonnes" (à l'aide de feuille de style et non de tableaux), avec à gauche (largeur : 160 pixels, si fixe), le menu de navigation dans le site, la page proprement dite au centre (largeur non fixe), et en "colonne" de droite (largeur : 120 pixels, si fixe) des informations connexes à la page, des animations promotionnelles, des liens ou encore un cadre pour se connecter dans une session, etc... Si la colonne de droite n'a pas d'utilité dans un site ou dans une page, ou si un tableau ou un objet ne tient pas en largeur dans la colonne centrale, elle est supprimée (et c'est la colonne centrale qui vient s'étendre à sa place). Si un tableau, une application ou un objet ne tient pas dans la largeur 370 + 120, on l'ouvre dans une nouvelle fenêtre, sans menu, sans bandeau et sans liens vers les rubriques connexes ; on veille simplement à conserver, le plus en haut à gauche possible de l'écran, le logo du site qui sert de lien vers la page d'accueil (et, si possible, le chemin de situation dans le site : le fil d'Ariane). Le découpage de la page en bandeaux et trois colonnes est fait à l'aide de feuilles de style. 9/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 5.4. Menu de gauche Pour le menu de gauche, si l'utilisation d'un menu déroulant est envisagée, on pourra utiliser, par exemple, des scripts comme "HM Menu" (http://www.webreference.com/dhtml/) ou Coolmenus (http://www.dhtmlcentral.com/projects/coolmenus/?m=10). Dans ce cas, il faudra néanmoins prévoir également l'accès aux pages du site en cliquant sur des liens intermédiaires n'utilisant pas le menu déroulant (au cas où ce dernier ne fonctionnerait pas dans certaines configurations). Mais ceci est à relativiser car à mettre en regard du fait que le site doit être accessible (le menu déroulant doit donc l'être et la page faire néanmoins moins de 70 Ko !). On note que les menus sont constitués de textes et non d'images, afin de permettre une modification aisée et rapide. 5.5. Contenu des pages La page (centrale) a une structure type, avec un titre, différents paragraphes, des illustrations, et un pied de page avec la date de mise à jour de la page (automatique) et éventuellement le nom du responsable de la page, plus un lien vers sa messagerie électronique. De plus, la situation dans le site ("Fil d'Ariane") est toujours présentée en haut à gauche des pages, au dessus du titre (sauf page d'accueil). 5.6. Page d'accueil La page d'accueil présente en général, dans sa partie centrale, les actualités. On n'utilise pas de page "tunnel" (page graphique ou animée d'introduction). Sur la page d'accueil, doivent apparaître l'adresse et les coordonnées de l'organisme (au moins pour un site Web), ainsi qu'un lien vers l'adresse du webmestre. Une notice légale doit être accessible. 5.7. Page d'erreur 404 Il doit exister une page d'erreur http 404 personnalisée pour chaque site (éventuellement aussi pour les erreurs 403 ou 500). Pour cette page, les adresses des images et autres liens sont indiquées en absolu (adresses URL complètes). Justification : lorsqu'on cherche une page dans un sous répertoire qui n'existe pas, la référence des chemins d'adresse de la page d'erreur est ce répertoire. 10/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 6. Codage des pages 6.1. Versions du codage Le code final (sur le client) des pages est du XHTML 1.0 standard W3C (http://www.w3.org/TR/xhtml1/), appuyé sur les feuilles de style CSS de niveau 2 standard W3C (http://www.w3.org/TR/REC-CSS2/). 6.2. Feuilles de style et balises Dans la mesure du possible, les feuilles de style redéfinissent au maximum des styles par défaut pour les balises (<title>, <h1>, <h2>, <p>, <td>, <table>, <body>, <img>, ?) avant de définir des classes spécifiques supplémentaires, si besoin. On note que les balises HTML propriétaires Microsoft (IE) ou Netscape sont proscrites. On n'utilise pas non plus les balises dépréciées du HTML 3 ou 4 qui ont leur équivalent en XHTML 1 ou en feuille de style CSS (ex : <font color="?" size="?"> est remplacé par un style). 6.3. Structuration des documents HTML, utilisation des tags Les documents (pages) HTML doivent être bien structurés, en utilisant de manière pertinente les tags. "title" correspond au titre de la fenêtre du navigateur, mais aussi au titre de la page (ou du site) apparaissant dans les moteurs de recherche et à l'intitulé du lien apparaissant dans la liste des "favoris" du navigateur. Il doit correspondre au titre de la page ("h1"), éventuellement raccourci (mais ne doit pas répéter, par exemple, le nom de l'organisme, le nom de la rubrique ou le chemin). Le titre de la page doit être entre tags "h1". Les titres des paragraphes doivent être entre tags "h2", les sous titres entre tags "h3", les sous sous titres entre tags "h4", etc. Le texte est mis en valeur avec les tags "strong" (gras ; et non "b") et éventuellement "em" (italique ; et non "i"). Pour les images, l'attribut "alt" doit obligatoirement être renseigné et décrire le contenu de l'image (ou répéter le texte contenu dans l'image ; pour une image servant de décoration, comme les images transparentes de séparation, alt doit être mis à vide : ""). Pour les tableaux, les cellules d'en-tête doivent être identifiées (utilisation du tag "th"), ainsi que le titre et le résumé renseignés. 6.4. Tableaux L'imbrication des tableaux HTML ne dépasse pas 3 niveaux. 6.5. Formulaires Pour les formulaires, en particulier, les pages HTML de formulaire et de résultat ("votre envoi a bien été effectué") sont, de plus, séparées dans deux fichiers (deux pages web distinctes). 6.6. Modèles et organisation des fichiers Le code commun relatif aux modèles des pages doit être factorisé dans des fichiers séparés (fichier d'inclusion : ".inc.php") de manière à séparer au maximum le fond de la forme et à n'avoir qu'à modifier en un seul endroit la présentation. Il doit être réalisé un fichier modele.inc.php, utilisé comme gabarit pour toutes les pages et définissant la mise en page de toutes les pages du site. Ce modèle appellera lui-même les fichiers d'inclusion correspondant aux blocs communs d'information : bandeau du haut de la page (bandeau- haut.inc.php), menu de haut de la page (menu-haut.inc.php), menu de gauche (menu- 11/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 gauche.inc.php), pied de page (pied-page.inc.php), etc. Chaque page du site, en particulier les index.php des différents répertoires, définiront simplement les données globales (titre de la page, chemin, etc.), incluront (par un "require_once") le modèle et la page de contenu proprement dite. Cette dernière pourra être une page d'inclusion HTML (.inc.htm) ou PHP (.inc.php) et ne contiendra que le contenu (la partie entre les tags <body> d'une page HTML bien formée habituelle). Les modèles de Dreamweaver (fichiers templates ".dwt") pour la construction des pages sont interdits. 6.7. Séparation du code en couches Le code autre que HTML (javascript, php ou java, ?) doit être séparé au maximum du code HTML et regroupé dans des fichiers distincts. La page HTML ne contiendra que l'appel au code permettant l'affichage. Les fichiers de code autre que HTML sont séparés en plusieurs couches : ? affichage (ex : "questionnaire-affichage.inc.php"), ? traitements (ex : "questionnaire-traitements.inc.php"), ? connexion aux bases de données (ex : "questionnaire-persistance.inc.php") ou aux fichiers, ? erreurs (ex : "questionnaire-erreur.inc.php"), ? etc. 6.8. Version du PHP et compatibilité ascendante du code Les pages dynamiques sont codées en PHP 4 (sous réserve d'évolution de version) et s'appuient, si besoin, sur la base de données mySQL (ou sur une base Oracle pour certaines applications de taille importante). On produira du code PHP dans l'optique d'une compatibilité ascendante (exemple : utiliser $_GET['variable'] au lieu de $variable ou $_SERVER['REMOTE_ADDR'] au lieu de $REMOTE_ADDR). 6.9. Style de codage et de commentaires Le code source PHP, Javascript ou JSP sera correctement présenté, indenté (4 caractères d'indentation) et abondamment commenté (voir le paramétrage de la commande "appliquer le formatage de la source" sous Dreamweaver sur le poste du webmestre). Les fichiers autres que HTML, c'est-à-dire : PHP, JS, CSS, JSP, etc..., doivent comporter une entête en commentaire décrivant : le nom du "fichier", son "format", son "auteur", sa "version" et son contenu ("description"). Le codage des fichiers PHP (également CSS, JS, ou HTML) doit suivre le style de codage PEAR défini sur le site pear.php.net à l'adresse suivante : http://pear.php.net/manual/fr/standards.php, ainsi que la convention de documentation de fichier source PHPDoc (similaire à Javadoc) : http://www.phpdoc.de/doc/doccomments.html. On note cependant que, par dérogation aux standards PEAR et PHPDoc, les commentaires des fichiers sources sont faits en français. Le code source des feuilles de styles (fichiers .css) et des fichiers Javascript sera également présenté et commenté selon les normes décrites ci-dessus, en particulier, chaque classe des feuilles de style doit avoir une ligne de commentaires associés. Que ce soit dans le cadre d'un logiciel sous licence GPL ou non, toute modification dans du code, pour une correction ou une évolution, doit faire l'objet d'un commentaire encadrant la portion de code modifiée, ajoutée ou supprimée et précisant : ? le type de modification : "ajout", "modification" ou "suppression", ? la date de la modification, ? l'auteur de la modification (nom + société), 12/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 ? l'objet de la modification, ? et éventuellement, si besoin, l'ancien code (ou l'ancienne valeur). La règle s'applique également aux fichiers de configuration des applications. 13/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 7. Règles à suivre pour le référencement 7.1. Les règles à inclure dans la conception du site ? Choisir un nom de domaine significatif et "lisible" pour le site ; il devrait comporter des mots clés séparés par des tirets (faire un compromis entre la longueur de l'URL et le nombre de mots clés significatifs). Justification : les moteurs de recherche utilisent les noms de domaine pour le référencement. ? Donner des noms si possible significatifs (mots clés) et séparés par des tirets hauts aux fichiers html et répertoires. Justification : les noms des répertoires et des fichiers html apparaissent dans l'URL et sont lus par les référenceurs. ? Faire particulièrement attention à la construction de la page d'accueil (voir règles de construction des pages). ? Ne pas utiliser de cadres ("frames") pour la page d'accueil. Justification : certains moteurs ne savent pas référencer les pages avec des frames. Dans le cas d'une utilisation de frames, utiliser absolument le tag "noframe". ? Eviter de créer une page constituée uniquement d'images pour la page d'accueil. Justification : seul le texte est une information significative pour les moteurs. ? Eviter de créer une page tout en Flash pour la page d'accueil, dans le cas contraire, utiliser un frameset avec un seul frame et mettre le texte dans "noframe". ? Bien choisir la balise de titre (tag "title") et placer en début les mots et phrases clés les plus importants (mais toujours sous forme d'une phrase lisible). ? Faire commencer si possible le titre par une lettre du début de l'alphabet. Justification : classement par ordre alphabétique de certains répertoires ou annuaires. ? Placer les mots clés en bonne position sur la page (le plus près possible du sommet de la page). ? Un mot ou une phrase clé ne doit pas être répété plus de quatre ou cinq fois au total dans la page. ? Placer de préférence le corps du texte au tout début de la page et écrire un texte de 800 mots maximum ; l'idéal serait que la page d'accueil comporte entre 50 et 300 mots minimum. ? Ne pas afficher une ligne de mots clés invisibles (couleur du texte identique à la couleur du fond). Justification : risque de rejet de la page et de mise sur la liste noire des moteurs, de l'adresse. ? Toujours créer des balises "alt" pour les images (contenant, si c'est approprié, des mots clés). Justifications : seul le texte est une information significative pour les moteurs ; ces balises sont une façon intéressante de placer les mots clés ; les personnes ayant désactivé l'affichage des images du navigateur ou les personnes malvoyantes peuvent exploiter ces informations. ? Placer si possible les mots clés dans le texte des liens, mais aussi sous forme de texte mis en forme (tags "h1", "b"?). ? Les mots clés placés dans des commentaires ne sont plus pris en compte par les moteurs. ? Utiliser la technique de la "Hallway page" (page passerelle) avec prudence : cette page qui contient un index de liens vers toutes les pages passerelles (d'entrée) du site, devra être hébergée sous un nom de domaine différent et être enregistrée auprès des moteurs (ceux-ci trouveront le site sans qu'on ait soumis son adresse à meilleure position) ; à n'utiliser qu'avec les moteurs. ? Ne pas créer une page optimisée pour chaque moteur. Justification : risque de se retrouver sur la liste noire des moteurs. ? Pour voir comment réagissent les moteurs lors du référencement, utiliser Netscape 1.0 ou Lynx. 7.2. Les règles de choix des informations de référencement ? Choisir les mots clés de manière pertinente ; se mettre dans la position du visiteur et penser à de courtes phrases que le visiteur pourrait taper dans un moteur. Par exemple, pour un site de 14/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 vente de vins sur Internet, on choisira comme mots clés plutôt "achat, vin" que "vente, vin" (mais mettre les deux possibilités est encore mieux). ? Pour le choix des mots clés, faire des statistiques sur les mots qui reviennent le plus souvent. ? Choisir entre 20 et 25 mots clés pour la balise "meta keywords". Justification : certains moteurs et annuaires n'acceptent pas plus de mots clés. ? Placer les mots clés les plus importants en premier dans la liste des mots clés. ? Dans la balise "meta keywords", ne jamais mettre le même mot clé deux fois sur la même ligne (même avec une casse ou une accentuation différente ; les mettre sur deux lignes). ? Mettre les mots clés sous plusieurs formes si besoin : casse différente, accentuation ou non (on pourra notamment utiliser l'accentuation en vue du référencement dans les moteurs francophones et la non accentuation pour un référencement dans les moteurs anglophones). ? Ne pas utiliser les mêmes mots clés lors de l'utilisation de plusieurs pages passerelles, et même dans les différentes pages d'un même site. Justification : cela pourrait provoquer un effet de spam-indexing (et risque d'être placé sur la liste noire). ? Faire commencer si possible la balise "meta description" par le contenu de la balise "title". Justification : certains moteurs offrent un meilleur positionnement en respectant cette règle. ? Dans la liste des mots clés et la description (balises "meta"), mettre les accents sous forme codée ("&?.;"). 7.3. Les règles d'inscription du site dans les moteurs ? Choisir de manière pertinente la catégorie de classement du site dans un "répertoire" ou "annuaire". ? Inscrire le site aux principaux moteurs de recherche et annuaires (ou "répertoires"), de manière automatique ou manuelle pour les moteurs mais à la main pour les annuaires. ? Il est possible d'inscrire plusieurs pages dans les moteurs de recherche, mais cette technique est à éviter avec les répertoires ou annuaires. ? (Ré)inscrire régulièrement le site dans les moteurs (une fois par mois en modifiant si possible la page). Justification : la position du site dans les résultats de recherche descend au fur et à mesure des nouvelles soumissions des concurrents. ? Faire des échanges de liens avec d'autres sites, car certains moteurs prennent en compte le nombre de liens pointant vers le site pour le positionnement 15/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 8. Tests et validations Un dossier de tests prouvant le bon fonctionnement des pages et des développements applicatifs (tests unitaires, d?intégration, étalonnage des écrans, ?), ainsi que la bonne tenue de charge du site (tests de montée en charge) doit être réalisé. Les tests doivent être effectués depuis plusieurs profils de postes (internes et externes), sur la plate-forme de développement (sauf pour les tests d'intégration). Les pages et sites doivent notamment satisfaire les tests et validations suivants : 1. présentation : validation visuelle du respect de la charte graphique ; 2. contenu : conforme au contenu source (relecture comparative) ; 3. validateur orthographique (automatique + relecture) ; 4. test manuel des liens (cible conforme) ; 5. vérification du code source (relecture du code + vérification du respect des normes de codage) ; 6. validateur de code HTML du W3C : http://validator.w3.org ; 7. validateur de feuille de style CSS du W3C : http://jigsaw.w3.org/css-validator/ ; 8. validation de l'accessibilité du W3C/WAI : a. validation automatique : i. Ocawa : http://www.ocawa.com/ ; ii. et validateur APINC : http://validateur-accessibilite.apinc.org ; iii. et WebXACT/Bobby : http://webxact.watchfire.com/ScanForm.aspx ; iv. et rendu sous Lynx : http://www.delorie.com/web/lynxview.html ; b. et validation manuelle : liste de vérification des critères d'accessibilité Accessiweb et RGAA - fichier "synthese-criteres-accessibilite-accessiweb-et-RGAA-v1-0- 0po.xls" ou "synthese-criteres-accessibilite-accessiweb-et-RGAA-v1-0-0.xls" du webmestre - assisté éventuellement de la barre Accessiweb pour IE ; 9. tests sous les différents navigateurs (sur PC, Mac et Linux), notamment : a. Internet Explorer 6.0 ; b. Firefox 2.0 ; c. Internet Explorer 7.0 ; d. Firefox 1.5 ; e. Safari ; et éventuellement : f. Mozilla ; g. Internet Explorer 5 ; h. Firefox 3 ; i. Opéra 9 ; j. Netscape 7 ? 10. tests en résolutions d'écran : a. 1024 x 768 ; b. et 800 x 600 ; c. et éventuellement : en 640 x 480, en résolutions supérieures à 1024 x 768 et en mode "petit écran"; 11. tests en différentes tailles de polices (fonctionnalité des navigateurs) ; 12. vérification du poids (Ko) des pages HTML ou PHP (ou plus exactement des pages HTML générées à partir des pages PHP) ; 16/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 13. vérification de la présence du "title" et des éventuels mots clés ; 14. vérification des impressions des pages (avec les marges par défaut sous IE et Firefox); 15. vérification de l'insertion des marqueurs de statistiques Xiti ; 16. tests d'erreurs dans l'URI, de fichier manquant, unitaires, d'intégration, d'étalonnage des écrans, de montée en charge : réaliser un doc. 17/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 9. normes connexes à respecter 9.1. Normes relatives à l'accessibilité des sites Web Les pages et sites Web et Intranet doivent respecter les normes nationales d'accessibilité, à savoir les règles du "Référentiel Général d'Accessibilité pour les Administrations - version 2007" (DGME ; http://rgaa.referentiels.modernisation.gouv.fr) et les critères du Guide Accessiweb (http://www.accessiweb.org/fr/guide_accessiweb), synthétisés dans le document "Liste synthèse des critères d'accessibilité Accessiweb/RGAA" en annexe. 18/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 10. Annexe 1 : extraits du manuel PEAR relatifs au style de codage PEAR ? http://pear.php.net/manual/fr/html/standards.html ? http://pear.php.net/manual/fr/html/standards.control.html ? http://pear.php.net/manual/fr/html/standards.funcalls.html ? http://pear.php.net/manual/fr/html/standards.funcdef.html ? http://pear.php.net/manual/fr/html/standards.comments.html ? http://pear.php.net/manual/fr/html/standards.including.html ? http://pear.php.net/manual/fr/html/standards.tags.html ? http://pear.php.net/manual/fr/html/standards.header.html ? http://pear.php.net/manual/fr/html/standards.cvs.html ? http://pear.php.net/manual/fr/html/standards.exampleurls.html ? http://pear.php.net/manual/fr/html/standards.naming.html 19/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 11. Annexe 2 : extrait du site de Java Sun : "How to Write Doc Comments for the Javadoc Tool" ? http://java.sun.com/j2se/javadoc/writingdoccomments/index.html 20/22 Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 12. Annexe 4 : Liste de vérifications (checklist des tests) d'une page Web ? liste-verification-page-web-v1-2-0.xls 21/22 Liste de vérifications (checklist des tests) d'une page Web - version : HC 1.2.0 du 24/09/2007 groupe de pages n° : pages n° : 0 http:// 1 http:// 2 http:// 3 http:// 4 http:// 5 http:// 6 http:// 7 http:// 8 http:// 9 http:// Les pages et sites doivent notamment satisfaire les tests et validations suivants : 0 1 2 3 4 5 6 7 8 9 Réf. Description † † † † † † † † † † 1 présentation : validation visuelle du respect de la charte graphique † † † † † † † † † † 2 contenu : conforme au contenu source (relecture comparative) † † † † † † † † † † 3 validateur orthographique (automatique + relecture) † † † † † † † † † † 4 test manuel des liens (cible conforme) † † † † † † † † † † 5 vérification du code source (relecture du code + vérification du respect des normes de codage) † † † † † † † † † † 6 validateur de code HTML du W3C : http://validator.w3.org † † † † † † † † † † 7 validateur de feuille de style CSS du W3C : http://jigsaw.w3.org/css-validator/ † † † † † † † † † † 8 validation de l'accessibilité du W3C/WAI : † † † † † † † † † † 8.a - validation automatique : † † † † † † † † † † 8.a.i - Ocawa : http://www.ocawa.com/ † † † † † † † † † † 8.a.ii - et validateur APINC : http://validateur-accessibilite.apinc.org † † † † † † † † † † 8.a.iii - et WebXACT/Bobby : http://webxact.watchfire.com/ScanForm.aspx † † † † † † † † † † 8.a.iv - et rendu sous Lynx : http://www.delorie.com/web/lynxview.html - et validation manuelle : liste de vérification des critères d'accessibilité Accessiweb/RGAA - fichier " synthese-criteres- † † † † † † † † † † 8.b accessibilite-accessiweb-et-RGAA-v1-0-0po.xls" ou "synthese-criteres-accessibilite-accessiweb-et-RGAA-v1-0-0.xls" - assisté éventuellement de la barre Accessiweb pour IE † † † † † † † † † † 9 tests sous les différents navigateurs (sur PC, Mac et Linux), notamment : † † † † † † † † † † 9.a - Internet Explorer 6.0 † † † † † † † † † † 9.b - Firefox 2.0 † † † † † † † † † † 9.c - Internet Explorer 7.0 † † † † † † † † † † 9.d - Firefox 1.5 † † † † † † † † † † 9.e - Safari, et éventuellement : † † † † † † † † † † 9.f - Mozilla † † † † † † † † † † 9.g - Internet Explorer 5 † † † † † † † † † † 9.h - Firefox 3 † † † † † † † † † † 9.i - Opéra 9 † † † † † † † † † † 9.j - Netscape 7 ? † † † † † † † † † † 10 tests en résolutions d'écran : † † † † † † † † † † 10.a - 1024 x 768 † † † † † † † † † † 10.b - et 800 x 600 † † † † † † † † † † 10.c - et éventuellement : en 640 x 480, en résolutions supérieures à 1024 x 768 et en mode "petit écran" † † † † † † † † † † 11 tests en différentes tailles de polices (fonctionnalité des navigateurs) † † † † † † † † † † 12 vérification du poids (Ko) des pages HTML ou PHP (plus exactement des pages HTML générées à partir des pages PHP) † † † † † † † † † † 13 vérification de la présence du "title" et des éventuels mots clés † † † † † † † † † † 14 vérification des impressions des pages (avec les marges par défaut sous IE et Firefox) † † † † † † † † † † 15 vérification de l'insertion des marqueurs de statistiques Xiti tests d'erreurs dans l'URI, de fichier manquant, unitaires, d'intégration, d'étalonnage des écrans, de montée en charge : † † † † † † † † † † 16 réaliser un doc Commentaires : Copyright (c) 2006-2007 Hervé Chuzeville - herve @ chuzeville . com Ce document est mis à disposition selon le Contrat "Paternité-NonCommercial-ShareAlike 2.0 France" disponible en ligne http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ ou par courrier postal à Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. liste-verification-page-web-v1-2-0.xls Normes de développement (X)HTML, PHP, CSS et Javascript des pages et sites Web et Intranet Hervé Chuzeville normes-web-chuzeville-v1-5.doc 26/09/2007 13. Annexe 5 : Synthèse des critères d'accessibilité RGAA et Accessiweb ? "synthese-criteres-accessibilite-accessiweb-et-RGAA-v1-0-0po.xls" (version pense-bête) ? ou "synthese-criteres-accessibilite-accessiweb-et-RGAA-v1-0-0.xls" (version complète) 22/22 Liste synthèse des critères d'accessibilité Accessiweb/RGAA - version : HC 1.0.0 du 21/09/2007 page : http:// ; n° Niv. Critères RGAA 08 09 10 Auto WCAG WCAG1.0 Images, éléments graphiques † 1.1 Br. renseigner l'attribut alt pour les img, area shape, input type="image", applet (y compris pour un affichage par du code javascript / lors de màj) 1.1.1, 1.1.13, 6.2.2, 6.2.3 O O O Semi A 1.1 l'attribut alt doit être approprié au contexte de l'image (valeur décorative, illustrative ou fonctionnelle) : alt="*" pour puce à valeur décorative, mais † 1.2 Br. 1.1.5 O O Semi A 1.1 alt="puce jaune" sur un site de téléchargement de puces † 1.3 Br. utiliser alt="" pour les images décoratives, sans valeur informative (y compris image cliquable doublonnant un lien texte) 1.1.2, 1.1.3, 1.1.15 O O O Semi A 1.1 † 1.4 Br. mettre un maximum de 60 caractères dans l'attribut alt (vérifier quand plus de 5-6 mots) 1.1.14 Semi A 1.1 † 1.8 Br. le alt de chaque image contenant du texte doit être au moins équivalent au texte inscritdans l'image (peut en contenir plus) A 1.1 † 1.9 Ar. privilégier un texte mis en forme (CSS) à un texte sous forme d'image (à éviter) 3.1.1 O Semi AA 3.1 † 1.10 Br. utiliser un commentaire lorsqu'une image nécessite une description détaillée (attributlongdesc ou légende - graphe, groupe...) 1.1.7 O Semi A 1.1 † 1.11 Br. si on a une description détaillée d'une image (longdesc, ?), elle doit être pertinente et apporter un plus par rapport au alt 1.1.8 O Semi A 1.1 † 1.12 Br. pour les liens en images, le alt doit donner la fonction du lien (ex : alt="suivant" et non alt="flèche droite" ; destination ou action) 1.1.4, 1.1.6 O O Semi AA 13.1 † 1.13 Or la taille des images doit être appropriée au contexte (ex : apparition d'un ascenseur alors qu'une plus petite donnerait la même info) AAA 14.3 Images map † 1.5 Br. utiliser des alt pour : chacune des area d'une image map (+ title), ainsi que pour l'image map (usemap ; ismap : liens redondants à côté !) 1.2.1, 1.2.2, 9.1.1 O O Semi A 1.1, 1.2, 9.1 † 1.6 Ar. les zones réactives des images map doivent être ordonnées de manière logique (ex : départements par ordre alphabétique) AA 3.6 † 1.7 Ar. les zones réactives des images map doivent être définies juste après la déclaration de l'image map AA 12.3 Cadres † 2.1 Br. renseigner l'attribut name (sans espace) pour les cadres (frames, iframes --> title), ainsi que l'attribut src qui doit pointer vers une page 6.2.1, 12.1.1, 12.2.1 O O O Semi AA 12.1 † 2.2 Br. les noms donnés aux cadres doivent être pertinents (fonction : menu, navigation, contenu, plutôt que localisation : gauche, milieu, ...) 12.1.2 O O O Semi A 12.1 † 2.3 Br. renseigner la balise alternative noframes et donner une alternative aux iframe 6.5.1, 6.5.2 O O Semi AA 6.5 † 2.4 Br. le contenu de la balise noframes doit être pertinent (principaux liens, vers pages et fonctionnalités essentielles : aide, plan, menu...) AA 6.5 † 2.5 Br. renseigner l'attribut title (nom : description + position hiérarchique éventuelle par rapports aux autres) A 12.1 † 2.6 Br. l'attribut title doit être pertinent (fonction, rôle du cadre) A 12.1 † 2.7 Ar. l'attribut longdesc doit être présent pour expliquer l'interaction entre les cadres 12.2.2 Semi AA 12.2 † 2.8 Ar. l'attribut longdesc doit être pertinent 12.2.3 Semi AA 12.2 † 2.9 Br. il doit y avoir un maximum de 3 cadres dans la page AA 13.4 † 2.10 Br. le défilement des cadres doit être automatique ("scrolling" à "auto" ou "yes") et ils doivent être redimensionnables (pas de "noresize") 3.4.4, 3.4.5 O O O Auto AA 14.3 Couleurs lorsque les couleurs sont désactivées, l'information donnée par la couleur doit toujours être lisible(daltoniens, malvoyants) : astérisque en plus † 3.1 Br. 2.1.1, 2.1.2, 2.1.3, 2.1.4, 2.1.5 O O O Semi A 2.1 pour les champs obligatoires, hachures et points pour un camembert † 3.2 Br. les différences de contrastes entre les couleurs doivent être suffisamment élevées (+ éviter : r/b, j/violet, j/v, ?) ; ratio de luminosité >= 4 2.2.1, 2.2.2, 2.2.3 O O Semi AAA 2.2 Multimédia † 4.1 Br. lorsqu'un support multimédia fournit de l'information, il faut prévoir une alternative (ex : fichier RTF, TXT, HTML ; paroles + descript. complets) 1.1.9, 1.1.10, 1.1.11, 1.1.12, 6.3.1 O Semi A 1.3 Le contenu multimédia doit être synchronisé avec son alternative (utilisation du langage SMIL : sous-titrages mis en forme + audio description) † 4.2 Br. 1.3.1, 1.3.2, 1.3.3, 1.4.1, 1.4.2, 1.4.3, 1.4.4 O Semi A 1.4 (dés)activable et pertinente, et doit être éventuellement sous-titré en langue des signes française Tableaux † 5.1 Br. renseigner l'attribut summary des tableaux (ex : température des 5 premiers jours de la semaine pour les villes de Paris et Toulouse ; <> titre) 5.5.2, 5.5.3 O Semi AAA 5.5 † 5.2 Br. donner un titre à chaque tableau de données en utilisant la balisecaption (ex : températures de la semaine en fonction de la ville) 5.5.1 O Semi AAA 5.1 † 5.3 Br. identifier les entêtes de colonnes (et lignes) d'un tableau de données avec la baliseth (et éventuellement thead) 5.1.1 O O O Semi A 5.1, 5.4 † 5.4 Br. relier le contenu d'une cellule à son entête de colonne avec les attributs headers et id (ou scope), dans un tableau de données 5.2.1, 5.2.2 O O O Semi A 5.2 † utiliser correctement thead, tbody, tfoot, colgroup 5.2.3 O Semi A † 5.5 Ar. lorsqu'un titre de colonne fait plus de 15 caractères, utiliser l'attribut abbr (ex : "Marque du véhicule" + abbr="marque") pertinent 5.6.1, 5.6.2, 5.6.3 Semi AAA 5.6 privilégier les CSS aux tableaux de mise en forme, sinon les infos doivent être affichées dans le même ordre en lecture linéaire et les éléments † 5.6 Br. 5.3.1, 5.3.2, 5.4.1 O O O Semi AA 5.3 propres aux tableaux de données ne doivent pas être détournés Page 1 de 4 Liens † 6.1 Br. l'intitulé des liens doit faire un maximum de 80 caractères (accent = 1 caractère ; vérifier quand plus de 7-8 mots) 13.1.5 Semi AA 13.1 † 6.2 Br. les liens doivent être explicites et compréhensibles hors du contextede la page (éviter "cliquer ici" ; préciser "en savoir plus sur ?") 13.1.4 O O O Auto AA 13.1 † 6.3 Br. donner un title d'un maximum de 80 caractères, si nécessaire (liens identiques ; fichier téléchargeable : titre, taille, format, logiciel) 13.1.1 O O Semi AA 6.3 † 6.4 Br. 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)") 13.1.2 O O Semi AA 13.1 † 6.5 Br. chaque intitulé de lien identique doit amener vers une seule et même destination (ex : éviter "lire l'article" plusieurs fois sur la page) 13.1.3 O O O Semi AA 13.1 † 6.6 Or dans l'arborescence du site, il doit y avoir au maximum 9 catégories par niveau de navigation AAA 14.3 † 6.7 Or il doit y avoir un maximum de 40 liens actifs dans la page, hors liens nécessaires à la navigation AAA 13.5, 13.6 † les liens doivent être présentés différemment du reste du texte de la page, et doivent être séparés au minimum par un espace 10.5.3, 10.5.4 O Semi AAA Scripts † 7.1 Br. l'info donnée par l'alternative, si nécessaire, d'un script (désactivé) doit être équivalente à celle du script (ex : contrôle de saisie serveur) 6.3.2 O O Semi A 6.2, 6.3, 8.1 des actions doivent pouvoir être accomplies, même lorsque le périphérique pour lequel elles sont prévues est désactivé (souris --> clavier ; † 7.2 Br. 6.4.1, 6.4.2 O Semi AA 6.4, 9.2, 9.3 onmouseover, menus et listes déroulants --> noscript ; formulaires --> accesskey) la page modifiée par le déclenchement d'un script doit rester accessible, l'utilisateur doit être averti de façon textuelle d'une màj suite à son action, † 6.5.3, 6.5.5 O Semi AA le focus doit être ramené sur ou juste avant l'indication de màj et il doit pouvoir accéder au contenu mis à jour par un lien † les boutons précédent/suivant doivent permettre la navigation à l'état précédent la màj et le retour à l'état màj après une màjXMLHttpRequest 6.5.7 Semi AA † l'information d'un js avec gestionnaires d'événements sans équivalent universel, ou propriétés propres à un périphérique doit avoir une alternative 9.3.1 O Semi AA Eléments obligatoires † 8.1 Br. utiliser la balise doctype pour spécifier le type du document électronique (au début du code sourceconforme à une DTD recommandée) 3.2.1, 3.2.2, 3.2.3, 3.2.4 O O O Semi AA 3.2 † 8.2 Br. spécifier l'attribut lang dans la balise html pour indiquer la langue utilisée (et le sens de lecture si de droite à gauche) 4.3.1, 4.3.2 O O O Semi AAA 4.3 † 8.3 Ar. renseigner les éléments de description d'un page Web meta, charset, link, ? (en Europe de l'ouest : ISO-8859-1 pour charset) 13.2.4, 13.2.5 O O O Semi AA 13.2 † 8.4 Br. le title d'une page Web doit être renseigné (60 à 80 caractères maximum conseillés) 13.2.1, 13.2.2 O O O Auto AA 13.2 † 8.5 Br. le title d'une page Web doit être explicite 13.2.3 O Semi AA 13.2 † 8.6 Br. le title d'une page Web doit être unique (ex : résultat d'une recherche) AA 13.2 † 8.7 Br. les changements de langue (span lang="?") et de sens de lecture (dir) dans un document électronique doivent être spécifiés 4.1.1, 4.1.2, 4.1.3, 4.1.4 O O Semi AA 4.1 Structuration de l'information † 9.1 Br. 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) A 14.1 † 9.2 Br. 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) 3.5.1, 3.5.2, 3.5.3, 3.5.4, 3.5.5, 3.6.4 O O O Semi AA 3.5, 13.8 † ne pas utiliser de simulation visuelle de liste non ordonnée (-, #, *, ?) 3.6.1 O O Semi AA † prévoir un style de secours pour les listes avec images dans les feuilles de styles (définir list-style-type) 3.6.2 O O Auto AA † utiliser systématiquement des listes ordonnées pour les énumérations 3.6.3 O Manu AA † dans les listes de définitions dl, chaque définition dd doit être précédée (de façon immédiatement ou non) d'un élément dt qu'elle définit 3.6.5, 3.6.6 O O Semi AA † les citations doivent être balisées (q pour une citation courte, blockquote pour un bloc) et la source doit être donnée (cite) si elle est en ligne 3.7.1, 3.7.2, 3.7.3 O Manu AA † 9.3 Ar. il doit y avoir un plan du site fonctionnel, avec toute l'arborescence (liens concis, précis et lisibles hors contexte), accessible depuis l'accueil 13.3.1, 13.3.2, 13.3.3 O O Manu AA 13.3 † 9.4 Ar. une page d'aide expliquant les principes de navigation à l'intérieur du site Web doit être présente (raccourcis claviers, ?) AA 13.3 † 9.5 Ar. la page d'aide doit être atteignable de manière identique quelle que soit la page Web visitée (raccourci clavier, lien en haut et bas) AA 9.5, 13.4 † 9.6 Ar. un site Web doit posséder un moteur de recherche interne AA 13.3 † 9.7 Ar. le moteur de recherche doit être atteignable de manière identique quelle que soit la page Web visitée AA 9.5, 13.4 † 9.8 Or la page de moteur de recherche doit comporter : nbr max. de réponses par page, nbr total de réponses, éléments de navigation AAA 13.7, 13.9 † le moteur doit proposer : résultats alternatifs du même thème ou recherche par mot clef prédéfini ou tolérance de l'orthographe approximative 13.7.1 Manu AAA Présentation de l'information † 10.1 Br. le contenu d'une page doit être séparé de sa présentation ( bannir : bgcolor, font, align, b, i, ? à définir en CSS ) 3.3.1 O O O Auto AA 3.3 † le style de présentation des blocs d'information et de navigation doit être homogène sur tout le site 14.3.1 Manu AAA † 10.2 Br. l'information doit être identique lorsqu'on désactive la mise en forme spécifiée pour cette information (feuille de style) 6.1.1, 6.1.2, 6.1.3, 6.1.4 O O Semi A 6.1 † 10.3 Br. l'ordre d'apparition de l'information (div, notamment) doit être identique lorsqu'une mise en forme spécifique est désactivée A 6.1, 9.4 † 10.4 Ar. la dimension des éléments structurels d'une page doit être définie en relatif (taille des tableaux, des polices (hormis px), div : %, em ou px) 3.4.1, 3.4.2 O O Semi AA 3.4 † le document doit rester lisible sans perte d'info avec la taille du texte la plus grande dans IE ou 2 augmentations de taille dans FF 3.4.3 Manu AA † 10.5 Ar. si des valeurs absolues sont utilisées pour les dimensions, elles doivent l'être sans conséquence sur l'affichagede l'info (toute résolution) AA 3.4 † 10.6 Ar. les polices de caractères d'une page doivent appartenir à la famille " sans sérif" (spécifier plusieurs polices, puis "sans sérif" en dernier) AA 3.3 Page 2 de 4 Formulaires † 11.1 Br. les champs de saisie d'un formulaire doivent être reliés à leurs textes explicatifs respectifs (spécifier label, id et for) 12.4.1, 12.4.2 O O O Semi AA 10.2, 12.4 les textes associés aux champs de saisie des formulaires doivent être explicites et donner leur fonction exacte (ex : préférer "Lancer la † 11.2 Ar. 12.4.3 O O O Semi AA 12.3 recherche" plutôt que "Ok") la disposition des champs par rapport aux textes associés ne doit poser aucune ambiguïté (< ou = 2 espaces entre le champ et le texte ; le texte † 11.3 Ar. 10.2.1 Semi AA 10.2, 12.3 descriptif doit être placé avant le bouton radio) † 11.4 Ar. les blocs d'info de même nature doivent être clairement identifiés (utiliser fieldset pour état civil qui regroupe nom, prénom, naissance) 12.3.1 O Semi AA 12.3 † 11.5 Ar. un titre pertinent doit être présent pour chacun des blocs d'info d'un formulaire (utiliser la baliselegend associée à fieldset) 12.3.2, 12.3.3 O O O Semi AA 12.3 † dans une liste déroulante (select), regrouper les éléments (option) de même nature dans un élément optgroup (+ attribut label pertinent) 12.3.4, 12.3.5, 12.3.6 O O O Semi AA † 11.6 Br. le commentaire du bouton de validationd'un formulaire doit être pertinent (si c'est une image, la commenter "valider le formulaire") A 1.1 le contrôle de saisie des champs doit être accessible à tous (alternative à un script de validation sur le client par un script serveur ; spécifier les † 11.7 Br. champs obligatoires de manière explicite en début ("les champs précédés d'une étoile sont tous obligatoires") ; éviter de faire ressortir les champs A 6.3, 6.5 obligatoires uniquement par une couleur ; ne pas effacer les champs déjà remplis en cas d'erreur † 11.8 Ar. dans une liste de choix, l'ensemble des champs doit être défini dans un ordre logique (ex : les départements par ordre alphabétique) AA 3.6 Aide à la navigation † 12.1 Ar. la navigation dans l'ensemble des pages d'un site Web doit être cohérente AA 13.4, 14.3 † 12.2 Br. le menu principal de navigation interne dans un site Web doit toujours être présentà la même place et sous la même forme dans les pages 13.4.1, 13.4.2, 13.4.3 O Manu AA 13.4 † 12.3 Or des barres de navigation qui facilitent l'accès pour la navigation interne doivent être présentes (menu, barre de bas de page,fil d'Ariane) 13.3.4, 13.5.1, 13.5.2, 13.9.1 O O Semi AAA 13.5 † regrouper les liens importants (zone de navigation, de contenu global, d'outils, ...) et y placer uneancre liée par ailleurs 13.6.1, 13.6.2, 13.6.3 O O Semi AAA † 12.4 Ar. des liens facilitant la navigation doivent être présents dans une page Web ( sommaire vers les paragraphes, bouton "haut de page" ) AA 13.4, 13.5, 13.6, 13.10 † des liens d'évitement doivent permettre de passer ou d'accéder à un groupe de liens importants (avec poursuite de la navigation au clavier) 13.6.4, 13.6.5 O O Semi AAA † 12.5 Or prévoir des raccourcis clavier (pour les forms, liens importants : accueil, plan du site, aide, moteur de recherche, contacts, raccourcis, ...) 9.5.1 Semi AAA 9.5 † 12.6 Br. si des raccourcis clavier ont été définis, ils doivent être actifs dans l'ensemble des pages, sans conflits avec navigateur, OS ou aides tech. 9.5.2, 9.5.3 O O Semi AAA 13.4 † le parcours au clavier des éléments pouvant recevoir le focus clavier et ayant une relation entre eux doit êtrelogique 9.4.1 O Semi AAA † 12.7 Or dans un groupement de liens, chaque lien doit être séparé par un caractère imprimable (image avec alt=" | ") ou utiliser les listes ul 10.5.1, 10.5.2 O O Semi AAA 10.5 † 12.8 Or le poids des pages Web doit être limité à 70 Ko (sauf pour une image agrandie, dont le poids devra être indiqué dans le lien ou le title) Contenus accessibles † 13.1 Br. l'utilisateur doit pouvoir provoquer ou arrêter le rafraîchissement (automatique à bannir) dans une page Web (ou sa mise à jour automatique) 6.5.4, 7.4.1 O O O Semi AA 7.4 † 13.2 Br. les redirections automatiques (doivent pouvoir être arrêtées) ne doivent pas s'effectuer par script (mais côté serveur ; ex : header() en php) 7.5.1, 7.5.2, 7.5.3 O O O Semi AA 7.5 † 13.3 Br. l'utilisateur doit être averti lors de l'ouverture (pas auto !) de nouvelles fenêtres (de navigateur/pop up ; dans le title ou le texte après le lien) 10.1.1, 10.1.2, 10.1.3, 10.1.4 O O Semi AA 10.1 † 13.4 Br. une alternative équivalente au script qui déclenche l'ouverture de nouvelles fenêtres (pop up) doit être prévue AA 10.1 † 13.5 Br. des infos doivent être données pour décrire les fichiers téléchargeables (format, poids, langue, lien outil conversion, logiciel de lecture ) 11.3.1, 11.3.2, 11.3.3, 11.3.6 O Semi AAA 11.3 † 13.6 Or les fichiers téléchargeables doivent être proposés dans des formats alternatifs équivalents (ex : RTF, TXT, HTML pour PDF) AAA 11.3 † dans les PDF, le texte doit être sélectionnable et les formulaires doivent avoir un ordre logique et une association intitulés-champs 11.3.7, 11.3.8 Semi AAA † la version du contenu présentée en 1er lieu doit correspondre à la préférence de langue de l'utilisateur (entête HTTP Accept-Language) 11.3.4 Manu AAA † 13.7 Br. la présentation spécifique d'une info ne doit pas entraver l'accès à son contenu (ex : clignotement, défilement trop rapides) A 7.1, 7.2, 7.3 † les changements brusques de luminosité ou les effets de flash doivent se faire à une fréquence <= à 3 par seconde (js, CSS, background) 7.1.1, 7.1.2, 7.1.3 O O Semi A † éviter les clignotements/mouvements des éléments (blink, marquee, gif animées, ...), les arrêter après 3 secondes ou permettre leur arrêt 7.2.1, 7.2.2, 7.2.3, 7.2.4, 7.3.1, 7.3.2, 7.3.3 O O O Semi AA la présentation d'une page Web doit être réalisée sans détourner certaines balises de leur fonction d'origine (blockquote, ul, q, th, h) et ne pas † 13.8 Ar. 3.3.2 O Semi AA 3.7, 5.4, 11.2 utiliser b, center, basefont, applet, dir, font, isindex, menu, s, strike, u et align, bgcolor, height? dépréciés † 13.9 Or chaque acronyme (acronym), abréviation (abbr) ou sigle présent dans une page doit y être défini au moins une fois (sur le 1er) 4.2.1, 4.2.2 Semi AAA 4.2 † 13.10 Or renseigner la définition (utiliser l'attribut title) de chaque acronyme (utiliser la balise acronym), abréviation ou sigle 4.2.1, 4.2.2 Semi AAA 4.2 † 13.11 Or lorsque aucune description d'un acronyme n'est prévue, chaque lettre de celui-ci doit être séparée par un point † 13.12 Or les éléments des textes (titres, sous-titres, phrases, ?) ne doivent pas être écrits en lettres majuscules † 13.13 Or une page Web doit faire au maximum 3 écrans en 1024x768 (police medium) si aucune navigation interne n'est prévue (ou sommaire) AAA 14.3 † objet, applet et embed doivent être accessibles des aides tech. via une API/des fonctionnalités d'accessibilité ou une alternative accessible 8.1.1 Semi AA † objet, applet et embed doivent être accessibles par des raccourcis claviers, une navigation au clavier ou une alternative accessible 9.2.1 O Semi AA † objet, applet et embed avec gestion. d'événemts sans équivalent universel, ou propriétés propres à un périphérique doivent avoir une alternative 9.3.2 O Semi AA † privilégier l'utilisation des technologies du W3C, dans leurs dernières versions, sans composants obsolètes ou dépréciés 11.1.1, 11.1.2, 11.2.1, 11.2.2 O O O Semi AA † proposer une présentation spécifique pour l'impression 11.3.5 Auto AAA † en dernier recours, fournir une version alternative accessible équivalente du site (lien sur page d'accueil) ou d'un élément (lien en dehors) 11.4.1, 11.4.2, 11.4.3, 11.4.4 O O O Semi A † la rédaction doit être simple (phrases, mots) et compréhensible par tous (actif, 1 idée / §, 1 sujet / phrase, info importante au début de §/phr.) 13.8.1 Manu AAA † l'utilisateur doit pouvoir passer l'art Ascii multi ligne (lien avant, vers ancre après) 13.10.1 Manu AAA † proposer des liens pour la compréhension des contenus et bannir les syntaxes cryptiques 14.1.1, 14.1.2 O Manu A † proposer des illustrations visuelles ou sonoresfacilitant la compréhension d'un texte 14.2.1 Manu AAA ; n° Niv. Critères RGAA 08 09 10 Auto WCAG WCAG1.0 Page 3 de 4 Légende : n° numéro de critère Accessiweb RGAA : Référentiel Général d'Accessibilité pour les Administrations Niv. niveau Accessiweb RGAA numéro de critère du RGAA Br. niveau Bronze Accessiweb 08 critères RGAA devant être repectés en 2008 Ar. niveau Argent Accessiweb 09 critères RGAA devant être repectés en 2009 Or niveau Or Accessiweb 10 critères RGAA devant être repectés en 2010 O obligatoire Auto automatisation possible de la vérification Copyright (c) 2007 Hervé Chuzeville - herve @ chuzeville . com Auto test automatisable Ce document est mis à disposition selon le Contrat "Paternité-NonCommercial-ShareAlike 2.0 France" disponible en ligne Semi test semi-automatisable http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ Manu test manuel ou par courrier postal à Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA. WCAG niveau WCAG Les critères AccessiWeb et la méthode de test d'accessibilité AccessiWeb sont la propriété de BrailleNet ; les critères RGAA sont la propriété de la DGME. WCAG1.0 numéro de critère WCAG Page 4 de 4

PARTAGER SUR

Envoyer le lien par email
2239
READS
25
DOWN
7
FOLLOW
5
EMBED
DOCUMENT # TAGS
#développement  #site internet  #intranet  #php  #javascript  #normes 

licence non indiquée


DOCUMENT # INDEX
WEB 
img

Partagé par  ced

 Suivre

Auteur:Hervé CHUZEVILLE
Source:http://www.chuzeville.com/